3. CSS 字体

2020-10-3 , 2020-10-23

1. font-size : 字号 ( px / % )
2. font-family : 字体 (字体名称)
3. font-style: 样式 （italic / oblique / normal ）
4. font-weight: 加粗 ( normal / bold / bolder / lighter / 100-900 ) { nomal ~ 400 , bold ~ 700 }
5. line-height: 行高 ( px / 倍数行距 / em / normal 默认行高 )
6. color: 文字颜色 ( red / rgb(233,0,0) / #ff0022 ~ #f02, 推荐 16 进制)
7. text-decoration: 文字修饰 （ underline / overline / line-through / none）
8. text-align: 文本对齐方式 (left / center / right )
9. text-transform: 字母大小写 ( lowercase / uppercase / capitalize )
10. text-indent: 文字缩进 ( em / % / px / pt )
11. font : 复合属性
    （font-style font-variant font-weight font-size/line-height font-family）
    font-variant: small-caps / normal
    font 属性顺序不能变， font-size ， font-family 属性不能省略

1. font-size

设置字体大小

属性值：

number+px ： 固定值尺寸像素
number+ % ： 其百分比取值是基于父元素的字体的尺寸大小

p { font-size: 20px;}
p {font-size: 80%;}

2. font-family

设置文本字体

属性值：

• name: 字体名称，按优先顺序排列，以逗号隔开，如果字体名称包含空格，则应该使用双引号括起来。
  示例如下 表示如果浏览器不支持 字体 Courier ，后面的是备选字体，如果提供的字体都不支持，浏览器会提供一种默认字体。

p {
      font-family: Courier, "Courier New", monospace; 
}

3. font-style

设置文本字体的样式。

属性值：

• normal : 默认值。 正常的字体。
• italic : 斜体。对于没有斜体变量的特殊字体，将使用 oblique
• oblique : 倾斜的字体。

p {
font-style: normal;
}
p {
font-style: italic;
}

p {
font-style: oblique;
}

4. font-weight

设置文本字体的粗细

属性值：

• normal : 默认值，正常的字体
• bold ： 粗体
• bolder ： 比 bold 粗
• lighter ： 比 normal 细
• 100-900 ： 定义由细到粗的字符。 400 等同于 normal ， 700 等同于 bold

p {
    font-weight: normal;
}
p {
    font-weight: bold;
}
p {
    font-weight: 600;
}

5. color

设置文本字体的颜色
推荐使用 16 进制指定颜色。
属性值：

• name : 颜色英文名称指定
• rgb ： 指定颜色为 rgb 值
• 颜色 16 进制 ： 指定颜色为 16 进制

p {
      color: red;
}
p {
      color: rgb(100,20,200);
}
p {
      color: #345678;
}

6. line-height ( / px / 数字 / em 等 )

设置文字字体的行高，即字体最底端与最顶端之间的距离

属性值：

• normal ： 默认值，默认行高
• number + px ： 指定行高为长度像素
• number ： 指定行高为字体大小的倍数
• number + em ： 指几个文字的行高

p {
      line-height: normal;
}
p {
      line-height: 24px;
}
p {
      line-height: 1.5;
}

p {
      line-height: 2 em;   （连两个文字的行高 ， 等于  2 ）
}

7. text-decoration

设置文本字体的修饰 ( none / line-through / overline /underline )

属性值：

• normal ： 默认值，没有修饰
• underline ： 下划线
• line-through ： 贯穿线
• overline ： 上划线

p  { text-decoration: underline;}
p  { text-decoration: overline;}
p  { text-decoration: line-through;}

8. text-align

设置文本字体的对齐方式 ( left / center / right )

属性值

• left ：默认值，左对齐
• right
• center

p  { text-align:  righht;}
p  { text-align:  center;}

9. text-transform

设置文本字体的大小写 （none / lowercase / uppercase / capitalize ）

属性值：

• none ： 默认值（无转换发生）
• capitalize ： 将每个单词的首字母转换成大写字母
• uppercase ： 转化成大写
• lowercase ： 转换成小写

p  { text-transform: capitalize;}
p  { text-transform: upppercase;}
p  { text-transform: lowercase;}

10. text-indent

设置文本字体的首行缩进 (px / em / % / pt 等)
属性值

• number + px ：首行缩进 number 像素
• number + em ： 首行缩进 number 字符

p { text-indent: 24px;}
p { text-indent: 2em;}     // 缩进 2 个字符

11. font 复合属性

font：font-style font-variant font-weight font-size/line-height font-family;

注意：

1. 属性值的位置顺序
2. 除了 font-size 和 font-family 外，其他任何一个属性至都可以省略
3. font-variant 文本修饰，normal / small-caps
   small-caps 让大写字母变得比同行的小一号，单词有大写的不转换，单词全是小写全部转换成大写

人生苦难重重