1、CSS字体设置 font-family 基础
css-family 是CSS 中用于指定文本字体的核心属性。它允许我们为网页元素定义一个或多个字体名称。浏览器会按照指定的顺序尝试应用这些字体，直到找到可用的字体。
基础语法如下：
selector {
font-family: font1, font2, font3, generic-family;
}示例：
body {
font-family: Arial, Helvetica, sans-serif;
}2、font-family 使用规则
font-family 使用规则有三条：
- 优先使用排在前面的字体。
- 如果找不到该种字体，或者该种字体不包括所要渲染的文字，则使用下一种字体。
- 如果所列出的字体，都无法满足需要，则让操作系统自行决定使用哪种字体。
小贴士1：根据这些规则，font-family 应该优先指定英文字体，然后再指定中文字体。否则，中文字体所包含的英文字母，会取代英文字体，这往往很丑陋。
小贴士2：为了保证兼容性，中文字体的中文名称和英文名称应该都写入 font-family。比如 `微软雅黑`的英文名称是 `Microsoft YaHei`。
3、常见字体类型
CSS中的字体大致可分为以下几类：
- 衬线字体(Serif): 字符笔画末端有装饰，如 Times New Roman
- 无衬线字体(Sans-serif): 字符笔画末端平滑，如 Arial
- 等宽字体(Monospace): 每个字符宽度相同，如 Courier
- 草书字体(Cursive): 模仿手写体，如 Comic Sans MS
- 装饰字体(Fantasy): 具有装饰性的字体，如 Impact
4、通用字体族
为保证跨平台兼容性，CSS 提供了五种通用字体族：
- serif
- sans-serif
- monospace
- cursive
- fantsay
建议在 font-family 声明的末尾始终包含一个通用字体族，作为后备选项。
p {
font-family: "Helvetica Neue", Arial, sans-serif;
}5、字体文件格式
字体文件一般有如下格式
- .ttf 对应的format为 truetype
- .woff 对应的format为 woff
- .woff2 对应的format为 woff2
小贴士：.woff2 格式的字体文件通常体积更小，加载速度更快，是网页字体的首选
6、@font-face 字体声明
@font-face 允许我们使用自定义字体，极大的扩展了网页设计的可能性。
基本语法：
@font-face {
font-family: 'MyCustomFont'; /* 给你的字体起个名字，CSS里就用它 */
src: url('path/to/font.woff2') format('woff2'),
url('path/to/font.woff') format('woff'); /* 字体文件的路径 */
font-weight: normal; /* 字体的粗细，根据你的字体文件调整 */
font-style: normal;
font-display: swap; /* 字体加载策略，推荐用这个，能让页面更快显示文字 */
}参数解读：
font-family: 这是你在CSS 中引用这个字体时会用到的名称，可以随意取，但要保持一致。
src: 指向要引用的字体文件。
font-weight: 如果你的字体有不同的粗细（比如常规、粗体），你可以在这里指定。如果灭有特殊需求，normal 就够了。
font-display: swap: 显示方式。swap表示 浏览器会先用系统默认字体显示文本，等你的自定义字体加载完成后再替换掉，这样用户就不会看到空白页面了。
font-display值选项：
- auto：浏览器默认行为
- block：短暂的不可见文本期后显示自定义字体
- swap：立即使用后备字体，加载完成后切换
- fallback：短暂的不可见文本期后使用后备字体，紧张快速加载时切换
- optional：让浏览器决定是否使用自定义字体
使用自定义字体：
body {
font-family: 'MyCustomFont', sans-serif;
}7、本站新字体
最后附上本站的新字体：
font-family: Georgia, "Times New Roman",
"Microsoft YaHei", "微软雅黑",
STXihei, "华文细黑",
serif;使用的是衬线字体噢，是不是不再圆润了，感觉还不错噢