CSS字体 ,文本属性

1、font-family：

• 作用：设置文本的字体系列

• 语法：font-family:字体名称

• 常用值：

  • 一个字体名称或系列名称（介绍常用字体名称、字体系列）

    • 微软雅黑 Microsoft YaHei

    • 宋体 simsun

    • 黑体 HeiTi

    • 楷体 KaiTi

  • 多个字体名称

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

    • 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，ine-height

• 作用：设置行高（效果是产生文本行间距）

• 语法：line-height:值

• 特性:实现单行文本的垂直居中

• 测量：文字高+行间距

• 打开px软件--在视图菜单---标尺（Ctrl+r）

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

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

  方法：测量两行文字中间的间距，然后除以2，得到平均间距，拉出参考线，进行标注，方便测量

• 常用值

  • normal默认。设置合理的行间距。

• px 设置固定的行间距。

6、font简写

• 作用：设置所有字体属性

• 语法：font: 字体风格 字体加粗 字号/行高 字体;

  • 依次【空格】隔开

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

• 7、text-align：

• 作用：设置文本的水平对齐方式

• 语法：text-align:值

• 常用值

  • left居左对齐 [默认值]

  • right居右对齐

  • center居中对齐

  • text-align: justify文本两端对齐方式

• 注：适用于块状元素

8、text-decoration

• 作用：设置文本装饰

• 语法：text-decoration:值

• 常用值

  • none 默认。定义标准的文本。 【常用】

  • underline 定义文本下的一条线 【常用】

  • line-through 定义穿过文本的一条线。【比较常用】

  • overline 定义文本上的一条线。 【不常用】

9、text-indent

• 作用：设置文本块首行的缩进

• 语法：text-indent:值

• 常用值

  • 默认值：0

  • 长度值，px,em

  • 百分比: 相对于元素内容宽进行计算

  • 允许负值

10、color

• 作用：设置文字的颜色

• 语法：color:颜色值