前端学习 -- Css -- 字体
2023-09-14 08:59:00 时间
设置字体颜色,使用color来设置文字的颜色
设置文字的大小,浏览器中一般默认的文字大小都是16px
font-size设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度,并不是字体的大小一般情况下文字都要比这个格要小一些,也有时会比格大,根据字体的不同,显示效果也不能。
通过font-family可以指定文字的字体
当采用某种字体时,如果浏览器支持则使用该字体,如果字体不支持,则使用默认字体。
该样式可以同时指定多个字体,多个字体之间使用“,”分开。
当采用多个字体时,浏览器会优先使用前边的字体,如果前边没有在尝试下一个。
浏览器使用的字体默认就是计算机中的字体,如果计算机中有,则使用,如果没有就不用。
在开发中,如果字体太奇怪,用的太少了,尽量不要使用,有可能用户的电脑没有,就不能达到想要的效果。
示例demo:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ color: red; font-family: 华文彩云 , arial , 微软雅黑;; } </style> </head> <body> <p> 日出而作,日入而息。 凿井而饮,耕田而食。 帝力于我何有哉! </p> </body> </html>
效果:
相关文章
- 这些特效对于学习前端我们很有用
- 8月前端挑战-----如何做到这个月内每天下班学习两小时
- 前端学习 -- Html&Css -- 框架集
- 前端学习 -- Css -- 高度坍塌问题的产生以及解决
- 前端学习 -- Css -- 浮动
- 前端学习 -- Css -- 内联元素的盒模型
- 前端学习 -- Css -- 有序列表和无序列表
- 前端学习 -- Css -- 兄弟元素选择器
- 前端学习 -- Css -- 伪元素
- 前端学习 -- Css -- 伪类
- 前端学习 -- Html&Css -- 表格
- 前端学习 -- Css -- 高度坍塌问题的产生以及解决
- 前端学习 -- Css -- 盒子模式
- 2022年最新前端零基础学习路径
- 前端进阶必学必会动画学习之Animate.css的使用与解析:一个强大而酷炫的CSS3动画库Animate.css使用方法教程
- 前端学习:javascript进阶
- 前端MVC Vue2学习总结(一)——MVC与vue2概要、模板、数据绑定与综合示例
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
- web前端框架JS学习之JavaScript类型转换