CSS字体属性

一.font-size（重要）

🤢font-size：决定文字的大小，常用的设置方式如下：

1. 具体数值+单位：比如100px。
2. 也可以用em单位(不推荐)，1em代表100%。
3. 百分比：基于父元素的font-size进行计算，比如50%表示等于父元素font-size的一半。

<style>
  .box{
    font-size:12px;
  }
</style>

/* 将box盒子中的这字体大小设置为12px  */

二.font-family

🥰font-family用于设置字体的名，可以设置文字的字体名称，浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过@font-face指定的可以直接下载的字体；

🤢当页面代码设置微软雅黑的话，浏览器首先会去当前电脑的操作系统是否支持当前的字体，浏览器会选择列表中的第一个该计算机上安装的字体，或者通过@font-face指定的直接下载的字体；

😬如果字体是由多个单词组成的，一般推荐使用''包裹起来，这样浏览器支持性更好；

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

三.font-weight

👽font-weight:用于设置文字的粗细；

1. 常见的取值为，100|200|300|400|500|600|700|800|900：每一个数字表示一个重要。
2. normal 等于400。
3. bold：等于700。

🙈strong``b``h1-h6等标签的font-weight默认就是bold；

p {
  font-weight: bold;
}

四.font-style

🐸font-style：用于设置文字的常规，斜体显示；

1. normal：常规的显示
2. italic：用字体的斜体显示（通常会有专门的字体）
3. oblique：文字的倾斜显示(仅仅让文字倾斜)

p {
  font-style: italic;
}

五.font-variant

😈font-variant：影响小写字母的显示形式，variant是显示形变的意思；

1. normal：常规显示；
2. small-caps：将小写字母替换为缩小过的大写字母；

p {
  font-variant: small-caps;
}

六.line-height

🐔line-height用来设置文本的行高，行高可以先简单理解为一行文字所占据的高度；

🐳行高的严格定义：两行文字基线之间的间距；

🦄基线：与小写字母x最底部对齐的线；

😈实际案例：如果想让文本居中对齐，将line-height与height设置为一样即可；

p {
  line-height:20px;
}

六.font缩写

🐳font是一个缩写，可以用来做font-style font-variant font-weight font-size line-height font-family属性的简写；

1. font-style font-variant font-weight可以随意调换位置，也可以省略；
2. line-height可以省略，如果不省略，必须跟在font-size后面；
3. font-size，font-family不可以调换位置，不可以省略；

selector {
  font: font-style font-variant font-weight font-size/line-height font-family;
}

🦄总结就是：font-size和font-family是必须的并且位置不可换，其他都是可选的；

原文链接：https://juejin.cn/post/7346394191264923658 作者：一溪风月