CSS字体样式

一. 字体大小

属性名: font-size，属性值:数字 + px
注意点:

• 谷歌浏览器默认文字大小是16px
• 单位需要设置，否则无效

示例：

  <style>
        p {
            font-size: 18px;
        }
    </style>

二.字体粗细

属性名: font-weight，其相关取值如下：

注意点:

• 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
• 实际开发中以:正常、加粗两种取值使用最多

示例：

<style>
        p {
            font-weight: 700;
        }
        h1 {
            font-weight: 400;
        }
    </style>

三.字体系列

属性名: font-family，常见取值: 具体字体1,具体字体2,具体字体3,具体字体4,
…
字体系列具体字体:“Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等…字体系列: sans-serif、serif、monospace等…

渲染规则:

1. 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
2. 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点:

• 1.如果字体名称中存在多个单词，推荐使用引号包裹
• 2.最后一项字体系列不需要引号包裹
• 3.网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

示例：

<style>
        /* 如果用户没安装黑软雅黑字体，那么就使用黑体字体，如果用户无安装黑体字体，那么就使用非衬线字体中任意一种有安装的字体，网页一般使用非衬线字体 */
        p {
            font-family: 黑软雅黑,黑体,sans-serif;
        }
    </style>

四.字体样式（是否倾斜）

属性名: font-style
取值:

• 正常(默认值):normal
• 倾斜: italic
  示例：

<style>
        p {
            font-style: italic;
        }
        em {
            font-style: normal;
        }
    </style>

五 . 字体复合属性连写

属性名: font (复合属性)
取值: font : style weight size family;
省略要求：只能省略前两个，如果省略了相当于设置了默认值
注意点（如果需要同时设置单独和连写形式）:

• 要么把单独的样式写在连写的下面
• 要么把单独的样式写在连写的里面

示例：

    <style>
        p {
            /* font: style weight size family */
            font: italic 700 66px 宋体;
            /* font只能省略前两个属性，相当于设置默认值 */
            font: 100px 微软雅黑;
            /* 一个属性冒号后面书写多个值--复合属性 */
            font-style: normal;
            /* 可把单独的样式写在连写下面 */
        }
    </style>

六.字体颜色

属性名: color