CSS 常用字体属性

1、字体大小

• 属性名：font-size
• 语法：

dev {

        font-size: 40px;

}

• 注意点：

1. Chrome 浏览器支持最小12px。默认的文字大小为16px，并且0px会自动消失。
2. 不同的浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。
3. 通常以给 body 设置 font-size 属性，这样body中的其他元素就都可以继承了

• 借助控制台看样式：

2、字体族

• 属性名：font-family
• 语法：

div {

        font-family: "STCaiyun","Microsoft YaHei",sans-serif

}

• 注意：

1. 使用字体的英文名字兼容性会更好，具体的英文名可以自行百度查询，或在电脑的设置里去寻找
2. 如果字体名包含空格，必须使用引号包起来。
3. 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后面写上 serif（衬线字体） 或 sans-serif（非衬线字体）
4. windows 系统中，默认的字体就是微软雅黑

3、字体风格

• 属性名：font-style
• 常用值：
  1、normal ：正常（默认值）
  2、italic：斜体（使用字体自带的斜体效果）
  3、oblique：斜体（强制倾斜产生的斜体效果）

实现斜体时，更推荐使用 italic

语法：5

div {
    font-style: italic;
}

4、 字体粗细

• 属性名：font-weight
• 常用值：

关键字：

1. lighter：细
2. normal：正常
3. bold：粗
4. bolder：很粗（多数字体不支持）

数值：

1. 100～1000 且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的精确程度）
2. 100～300 等同于lighter，400～500等同于normal，600及以上等同于bold

语法：

div {
    font-weight: bold;
}

div {
    font-weight: 600;
}

5、字体复合写法

• 属性名：font ， 可以把上述字体样式合并成一个属性
• 编写规则：
      1、字体大小、字体族必须都写上
      2、字体族必须放在最后一位，字体大小必须放在倒数第二位
      3、各个属性间用空格隔开
• 实际开发中更推荐使用复合写法，但这也不是绝对的，不如只想设置字体大小，那就直接用font-size 属性。

举例：

/* 加粗、倾斜、100px、华文彩云的字体、非衬线字体 */

div {
    font: bold italic 100px "华文彩云",sans-serif;
}