CSS字体样式

1. color:设置字体颜色

 p {
     /*color 设置字体颜色,也可以设置其他颜色 */
        color: #999;
}

2. font-size：设置字体大小， 单位px、em、rem....vh

px:像素，常用单位，浏览器默认的字体大小16px

em:当前元素的字体大小

rem:是指html的字体大小,移动端常用

vh:移动端的时候使用

p {
/* font-size 设置字体的大小 */
        font-size: 2rem;
}

3. font-weight:设置字体大小

属性值：100~900 整百数

lighter=100代表极细

normal=400代表正常

bold=700代表加粗

100~300一般都是代表极细

400~600一般代表正常

700~900一般代表加粗

p {
font-weight: 700;
}

4. font-family:设置文字字体，用户电脑上有该字体，才会有效，所以一般在后面都要添加一个网页字体五大类中的一种

p {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
}

5. font-style：设置字体样式

可选值：normal（默认值，正常显示）

italic(文字斜体显示)

oblique（文字倾斜显示）

一般浏览器不会对斜体和倾斜做区分=》一般使用italic

p {
font-style: italic;
}

6. @font-face 可以自定义使用非电脑自带字体

使用步骤（1）先自定，设置好字体 （2）去使用即可

 @font-face {
        /* 你给字体起的名字 */
        font-family: "xiyangyang";
        /* 自定义字体的路径 */
        src: url(./字体/MeowScript-Regular.ttf);
      }
p {
         font-family: "xiyangyang";
}    

7. font-variant 设置一个小型大写字母

可选值：normal 文本正常显示，默认值

small-caps 将字母变成小型大写字母

p {
 font-variant:small-caps;
}

8. font简写

注意：1、字体相关的样式值设置，需要以空格隔开

2、必须要写字体大小和字体

3.书写顺序：

font: font-style | font-variant | font-weight | font-size | line-height | font-family;

9. 补充

在网页中将字体分成5大类：

serif （衬线字体）

sans-serif（非衬线字体）

monospace （等宽字体）

cursive （草书字体）

fantasy （虚幻字体）

可以将字体设置为这些大的分类,当设置为大的分类以后， 浏览器会自动选择指定的字体并应用样式一般会将字体的大分类，指定为font-family中的最后一个字体 用来兜底