[TOC] #### 1. font-family --- ##### 属性介绍 font-family：这是一个 css 属性，用于指定元素使用的字体系列，按顺序查找并使用列表中第一个可用的字体 该属性的值是一个字体系列，每个字体名称使用逗号隔开，如果字体名称包含空格，那么字体名称必须使用引号包裹 ```css body { font-family: "Microsoft YaHei", Arial, sans-serif; } ``` ##### 思源黑体 通过 link 标签在网页头部引用 `Google Web Font`。字体名称: Noto Sans SC，大小: 100,300,400,500,700,900 ```html <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900"> ``` 在需要使用思源黑体的地方使用 CSS 设置字体 ```css font-family: 'Noto Sans SC'; ``` ##### 中英文设置不同的字体 如果想要给英文，中文设置不同的字体，可以使用一个仅支持的英文的字体（比如: Arial），再找一个支持中文的字体 如下所示: 遇到文字时，首选会尝试使用 Arial 字体，该字体仅支持英文，所以遇到英文会生效，遇到中文时 Arial 不生效，将自动使用后面的 Noto Sans SC（思源黑体） 字体 ```css :root { font-family: Arial, 'Noto Sans SC'; } ``` #### 2. @font-face --- ##### 规则介绍 @font-face：这是一个 css 规则，用于定义和加载自定义字体。 通过它，可以指定字体文件的路径，并且给这个字体起个名称，这打破了只能使用用户系统已安装字体的限制。 ```css @font-face { font-family: 'Cascadia Code'; src: url('./woff2/CascadiaCode.woff2') format('woff2'); font-display: swap; } ``` ##### src 属性 @font-face 的 src 属性：用于指定字体文件的位置和格式，是自定义字体的关键属性 + 使用 url() 函数指定字体文件的路径，可以是相对路径，也可以是绝对路径 + 使用 format() 函数来指定字体的格式，帮助浏览器识别并选择合适的字体文件 + 通过 local() 函数引用系统中已安装的字体，如果本地有该字体，直接使用该字体，就不加载后面的字体文件了 ```css src: url('myfont.woff2') format('woff2'); ``` 字体文件有多个来源时，可以通过逗号分隔多个 src 值，浏览器会按顺序尝试加载，直到成功加载到其中一个 ```css src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); ``` 我用的 mac 笔记本，系统自带 `STHeiti` 字体，以下写法，在控制台可发现就不会加载 woff2 字体文件了 ```css src: local('STHeiti'), url('myfont.woff2') format('woff2'); ``` ##### 字体格式 当我们决定使用某一个字体时，将字体文件下载下来后，会发现有很多种格式，最常见的有：woff2、woff、ttf 那么，我们应该使用哪种字体格式呢？我们需要对比一下各种格式之间的差异 | 格式 | 优点 | 缺点 | 推荐度 | | ------------ | ------------ | ------------ | ------------ | | woff2 | 文件体积小，加载速度快，现代浏览器支持好 | 旧浏览器不支持（IE9） | 最高 | | woff | 兼容性较好，支持ie9+等较老浏览器 | 文件体积比woff2大 | 高 | | ttf | 兼容性极佳，几乎所有浏览器都支持 | 文件体积大，渲染效果一般 | 中 | | otf | 支持高级排版特性，文件体积与 ttf 相近 | 部分旧浏览器支持不佳（ie8） | 中 | | eot | 仅用于兼容旧版IE（≤ ie8） | 已过时，文件体积大 | 低 | 使用建议： + 首选 woff2：现代项目优先使用 woff2 格式，以获得最佳性能 + 提供备选格式：为兼容性考虑，可同时提供 woff、ttf 格式作为回退 ```css @font-face { font-family: 'MyCustomFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'), url('myfont.otf') format('opentype'); } ``` ##### 优化技巧 `font-display: swap;` 这个属性能控制字体加载过程中的文本显示行为 `swap` 让浏览器先用系统字体显示文本（避免“空白”或“闪烁”），等自定义字体加载完后再切换，极大提升用户体验 ```css @font-face { font-family: 'MyCustomFont'; src: url('myfont.woff2') format('woff2'); font-display: swap; /* 优化加载体验 */ } ```