06 【CSS字体属性 CSS文本属性】

8.CSS字体属性

CSS Fonts（字体）属性用于定义：字体系列、大小、粗细、和 文字样式（如：斜体）。

8.1字体族

font-family 字体族（字体的格式）

CSS 使用 font-family 属性定义文本的字体系列。

p {
   
	font-family: "Microsoft YaHei";
}

div {
   
	font-family: Arial, "Microsoft YaHei";
}

• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
• 字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推
• 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
• 最常用的字体：body {font-family: "Microsoft YaHei", tahoma, arial, sans-serif, "Hiragino Sans GB";}

Apple 官网字体：

body {
    
	font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

Instagram 官网字体：

body {
    
	font-family: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, sans-serif
}

知乎官网字体：

body {
    
	font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif
}

爱奇艺官网字体：

body {
    
font-family: PingFangSC-Regular, Helvetica, Arial, Microsoft Yahei, sans-serif
}

    <style type="text/css">
        /* 浏览器会从第一个字体开始进行适配，如果本机可以适配的话，那么就使用该字体，否则看下一个字体，
           如果都不可以，那么浏览器会使用自带的默认字体，所以实际开发中一般建议使用比较标准化的字体 */
        h2 {
     
            /* font-family: '微软雅黑'; 可以使用中文，但不建议 */
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }

        p {
     
            font-family: "Times New Roman", Times, serif;
        }
    </style>

    <style type="text/css">
        /* 一些情况下，如果要全局设置字体可以直接在 body 标签选择器中指明 */
        body {
     
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }
    </style>

注意：浏览器字体是依据用户操作系统来调用的，所以这里介绍一种 Windows 系统安装字体的方法。

当然实际开发中通常浏览器请求时，会把字体文件随 HTML CSS JS 等一同传送到客服端。

8.2 @font-face

我们除了可以使用系统自带的字体样式外，还可以在服务器端自定义字体位置

@font-face可以将服务器中的字体直接提供给用户去使用

@font-face {
   
    /* 指定字体名字 */
    font-family: 'myFont1';
    /* 服务器中字体路径 */
    src: url('/font/ZCOOLKuaiLe-Regular.woff'),
        url('/font/ZCOOLKuaiLe-Regular.otf'),
        url('/font/ZCOOLKuaiLe-Regular.ttf') format('truetype');/* 指定字体格式，一般不写 */
}

p {
   
    font-size: 30px;
    color: salmon;
    font-family: myFont1;
}

问题

1. 加载速度：受网络速度影响，可能会出现字体闪烁一下变成最终的字体

2. 版权：有些字体是商用收费的，需要注意

3. 字体格式：字体格式也有很多种（woff、otf、ttf），未必兼容，可能需要指定多个

8.2字体大小

CSS 使用 font-size 属性定义字体大小。

p {
   
	font-size: 20px;
}

• px（像素）大小是我们网页的最常用的单位
• 谷歌浏览器默认的文字大小为：16px
• 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
• 可以给 body 指定整个页面文字的大小

    <style type="text/css">
        /* 全局设置时，一般在 body 标签选择器中指定文字大小，谷歌浏览器默认 16px，
           但是最好还是指定一个明确值，以保证在不同浏览器中的效果是一样的 */
        body {
     
            font-size: 24px;
        }

        /* 标题标签比较特殊，body 中的设置对其是不生效的，需要单独指定文字大小 */
        h2 {
     
            font-size: 54px;
        }
    </style>

8.3字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

p {
   
	font-weight: bold;
}

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100-900	400 等同于 normal，而 700 等同于 bold，其它值一般不使用，注意这个数字后面不跟单位

• 学会让加粗标签（比如 h 和 strong 等）变为不加粗，或者让其他标签加粗
• 实际开发时，我们更喜欢用数字表示粗细
</