CSS字体 +文本属性

最新推荐文章于 2024-07-06 20:00:00 发布

halo.顾北

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量106

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/Sun__Fei/article/details/125879335

版权

1、font-family：

作用：设置文本的字体系列
语法：font-family:字体名称

常用值：

一个字体名称或系列名称（介绍常用字体名称、字体系列）
- 微软雅黑 Microsoft YaHei
- 宋体 simsun
- 黑体 HeiTi
- 楷体 KaiTi

多个字体名称

逗号分开
如果浏览器不支持第一个字体，则会尝试下一个（回退机制）

1.使用多个字体名称形成一个回退系统（也就是备用字体），当浏览器不支持第一个字体的时候则会尝试下一个字体，多个字体之间用逗号隔开
2.中英文混合字体时，要先写英文字体，在写中文字体
font-family: 'Times New Roman', '楷体', '宋体'
.box{
    /*font-family:"微软雅黑","宋体";*/
    /*font-family:"宋体","微软雅黑"; *//*与上一个相比产生的效果不同，谁在前使用哪一个*/
    font-family:"微软雅黑abc","宋体"; 
    /*第一个任意改写一个系统不存在的字体，会按照第二个字体显示*/
}

2、font-size

作用：设置字体的大小
语法：font-size:值
常用值：
- 长度值（通常是像素px）
- 百分比（相对于父元素字号计算）
em
- 相对单位
- 如果用于字号，相当于父元素字号计算，如果用于其它属性，相对于当前元素的字号
一般浏览器默认的大小为16px,支持最小的字体为12px。

3、font-style

作用：设置字体的样式
语法：font-style:值
常用值：
- normal默认值
- italic斜体显示

4、font-weight

作用：设置字体粗细
语法：font-weight:值
常用值：
- normal默认值
- bold加粗
- 100-900九级字重， 400相当于normal,700相当于bold

5、line-height

作用：设置行高（效果是产生文本行间距）
语法：line-height:值
特性:实现单行文本的垂直居中
测量：文字高+行间距
打开px软件--在视图菜单---标尺（Ctrl+r）

参考线：在标尺上按住鼠标左键不松手，拖拽鼠标

按住alt键，放大图纸，为了测量更加准确，滚动滚轮，向外滚表示放大，向内滚表示缩小

方法：测量两行文字中间的间距，然后除以2，得到平均间距，拉出参考线，进行标注，方便测量
常用值
- normal默认。设置合理的行间距。
px 设置固定的行间距。

百分比:相对于font-size计算

.box{
line-height:200%; /*产生的效果一致都是字号的两倍*/
}
 line-height: 26px;
 如果行高属性值没有单位，那么表示字号的倍数
20px/2 表示：字体大小是20px，行高是字体的两倍40px

6、font简写

作用：设置所有字体属性
语法：font: 字体风格字体加粗字号/行高字体;
- 依次【空格】隔开

总结：只有当【字号和字体】同时存在简写才是有效的，简写属性可以精简简代码

font:font-style font-weight font-size/line-height font-family;
顺序：文字的样式 文字的加粗 文字的字号/行高 文字的字体
注意：如果font属性有效，则必须要有font-size属性和font-family属性
font: italic bold 14px/2 '微软雅黑';