答案：CSS中通过font-family属性指定字体，优先使用自定义Web字体并提供备用字体以确保兼容性和用户体验。使用@font-face引入自定义字体时需注意格式兼容、性能优化和font-display策略，同时避免常见错误如路径错误或缺少引号。始终以通用字体收尾并测试多平台显示效果，平衡视觉与加载性能。
在CSS中，指定字体类型主要通过
font-family属性来完成。它允许你列出多个字体名称，浏览器会按照列表顺序，从左到右查找并应用它能找到的第一个可用字体。这就像给浏览器一个备选清单，确保即使你最心仪的字体缺失，用户也能看到一个合理的替代品。
解决方案
要指定CSS字体类型，核心就是使用
font-family属性。它的基本语法是这样的：
body {
font-family: "Helvetica Neue", Arial, sans-serif;
}这里，我们首先尝试加载“Helvetica Neue”，如果用户系统没有这个字体，浏览器会接着尝试“Arial”，如果还没有，最后会退回到
sans-serif这个通用字体系列。
需要注意几点：
立即学习“前端免费学习笔记（深入）”；
- 引号的使用：如果字体名称包含空格（比如“Times New Roman”），那么必须用引号（单引号或双引号都可以）括起来。像“Arial”这种单个词的字体名称，引号不是强制的，但为了保持一致性，加上也无妨。我个人习惯是，只要不是通用字体系列，都加上引号，这样出错的概率会小很多。
-
通用字体系列：在字体列表的末尾，总应该包含一个通用字体系列（generic-family）。这是一种安全网，确保在任何特定字体都不可用的情况下，浏览器也能选择一个它认为最接近的字体。常见的通用字体系列有：
serif
(衬线字体，如Times New Roman)sans-serif
(无衬线字体，如Arial, Helvetica)monospace
(等宽字体，如Courier New)cursive
(手写字体)fantasy
(装饰字体)
- 优先级：浏览器会按照你列出的顺序进行匹配。这意味着你最想用的字体应该放在列表的最前面。
当然，如果你的设计对字体有更高的要求，或者需要使用一些系统不自带的独特字体，那就需要引入自定义的Web字体，这通常涉及到
@font-face规则。这其实是字体指定的一个更高级，也更强大的维度。
常见的字体类型有哪些，为什么我们需要备用字体（Fallback Fonts）？
我们平时在网页设计中接触到的字体，大致可以分为几大类，也就是CSS里的那些通用字体系列：
serif、
sans-serif、
monospace、
cursive和
fantasy。
-
serif
字体，比如我们熟悉的“宋体”或“Times New Roman”，它们的笔画末端带有装饰性的“小脚”。这种字体通常给人一种传统、正式、易读的感觉，在印刷品中很常见，尤其适合长篇阅读。 -
sans-serif
字体，如“微软雅黑”、“Arial”或“Helvetica”，笔画末端没有这些装饰。它们看起来更现代、简洁，在屏幕上显示时，由于没有复杂的细节，通常被认为更清晰易读，尤其是在小尺寸或低分辨率下。 -
monospace
字体，顾名思义，每个字符的宽度都是相同的，比如“Courier New”或“Consolas”。它们常用于代码块、终端输出或需要精确对齐的场景。 -
cursive
字体，模拟手写笔迹，具有流畅的连接或装饰性笔画，比如“Brush Script MT”。它们常用于标题或特殊强调，但不适合大段文字阅读。 -
fantasy
字体，这类字体通常具有很强的装饰性，风格独特，不属于前面任何一类。它们主要用于标题或特殊设计元素，以营造特定的氛围。
那么，为什么我们需要备用字体（fallback fonts）呢？这真是一个再实际不过的问题。想象一下，你精心挑选了一款设计感十足的字体，但在用户的电脑上根本没有安装这款字体，那会发生什么？浏览器就会用它自己的默认字体来显示，结果往往是惨不忍睹，完全破坏了你的设计意图。
备用字体的存在，就是为了解决这种跨平台、跨设备字体兼容性的问题。用户的操作系统和安装的字体库千差万别，你不能指望每个人都拥有你指定的所有字体。通过提供一个字体列表，从你最想要的，到次优的，再到操作系统普遍自带的，最后到一个通用字体系列，你就能确保无论如何，用户都能看到一个相对美观且可读的页面。这不仅仅是技术上的严谨，更是用户体验的保障。我个人觉得，一个好的字体备用策略，是前端开发者对用户最基本的尊重。
超越font-family
：自定义Web字体如何融入字体指定？
当
font-family列表里的系统字体已经无法满足我们对美学和品牌独特性的追求时，自定义Web字体就登场了。这就像是从有限的“菜单”里点菜，变成了自己“烹饪”一道独一无二的佳肴。自定义Web字体允许我们使用任何我们想要的字体，只要我们能获取到它的字体文件，并通过
@font-face规则将其引入到网页中。
@font-face规则的基本结构是这样的：
@font-face {
font-family: 'MyCustomFont'; /* 自定义一个字体名称 */
src: url('/fonts/MyCustomFont.woff2') format('woff2'), /* WOFF2格式，现代浏览器首选 */
url('/fonts/MyCustomFont.woff') format('woff'); /* WOFF格式，兼容性更广 */
font-weight: normal; /* 可以指定字体粗细 */
font-style: normal; /* 可以指定字体样式（斜体、正常） */
font-display: swap; /* 字体加载策略 */
}
/* 然后在需要的地方使用这个自定义字体 */
h1 {
font-family: 'MyCustomFont', sans-serif;
}这里有几个关键点：
-
font-family
：在@font-face
内部定义的这个名称，是你将来在其他CSS规则中引用这个字体的“代号”。它可以是你喜欢的任何名称。 -
src
：这是最重要的部分，它指向你的字体文件。通常，为了兼容不同的浏览器，我们会提供多种格式的字体文件，比如woff2
（压缩率高，现代浏览器支持）、woff
（兼容性好）、ttf
、eot
等。浏览器会从左到右尝试加载它支持的第一个格式。 -
format()
：在url()
后面加上format()
可以帮助浏览器快速判断它是否支持这种字体格式，避免下载不必要的字体文件。 -
font-weight
和font-style
：如果你有同一个字体的不同粗细或样式（比如常规体、粗体、斜体），你可以为每个变体定义一个单独的@font-face
规则，并指定它们的font-weight
和font-style
。这样，当你使用font-weight: bold;
时，浏览器就能加载对应的粗体字体文件。 -
font-display
：这是一个非常实用的属性，它控制着自定义字体在加载过程中如何显示。比如font-display: swap;
意味着在自定义字体加载完成前，浏览器会先使用备用字体显示文本，一旦自定义字体加载完成，就会“交换”显示。这能有效避免“隐形文本闪烁”（FOIT - Flash Of Invisible Text）的问题，提升用户体验。
引入自定义字体虽然赋予了我们极大的设计自由，但也带来了性能上的考量。字体文件通常比较大，如果引入过多或过大的字体，会显著增加页面加载时间。因此，在享受视觉盛宴的同时，我们也要权衡性能，比如只加载所需字符的子集（subsetting），或者优先使用可变字体（variable fonts）来减少文件大小。这是一个平衡的艺术，我常常在设计稿和实际性能之间做取舍，因为最终，用户流畅的体验才是最重要的。
字体指定中的最佳实践和常见陷阱
在CSS字体指定这个看似简单的领域，其实隐藏着不少值得我们深思的最佳实践和一些容易踩的坑。
最佳实践：
-
始终包含通用字体系列作为备用：这是我反复强调的，也是最基础、最重要的实践。你的字体列表末尾必须有一个
serif
、sans-serif
或monospace
。这能确保在所有其他特定字体都不可用的情况下，页面至少能以一个可读且符合基本风格的字体呈现。 -
优先使用Web安全字体：在自定义字体成为主流之前，有一批“Web安全字体”因其在大多数操作系统中都预装而备受推崇（如Arial, Times New Roman, Georgia, Verdana等）。虽然现在有了
@font-face
，但将这些字体放在自定义字体之后的备用列表中，仍然是一个稳妥的选择。 -
优化自定义字体：
-
选择合适的格式：优先使用
woff2
，然后是woff
，提供多种格式以确保最大兼容性。 - 子集化（Subsetting）：如果你的网站只需要用到特定语言的字符（比如中文网站只需要中文字符），或者只用到数字和标点，可以通过字体工具生成只包含这些字符的字体文件，大大减小字体体积。
-
使用
font-display
：如前所述，font-display: swap;
是优化字体加载体验的利器，避免白屏或隐形文本。 - 异步加载：对于非核心的字体，可以考虑使用JavaScript进行异步加载，避免阻塞页面渲染。
-
选择合适的格式：优先使用
- 注意字体版权和许可：不是所有字体都可以免费用于商业用途。在使用任何自定义字体之前，务必检查其许可协议。这不仅仅是法律问题，也是对字体设计师劳动成果的尊重。
- 测试，测试，再测试：在不同的浏览器、操作系统和设备上测试你的字体显示效果。移动端和桌面端、Windows和macOS、Chrome和Safari，它们对字体的渲染可能存在细微差异。
常见陷阱：
-
忘记给包含空格的字体名称加引号：这是最常见也最基础的错误。
font-family: Times New Roman;
是无效的，必须是font-family: "Times New Roman";
。 -
@font-face
的src
路径错误：字体文件路径写错，或者服务器没有正确配置字体文件的MIME类型，都会导致字体无法加载。我个人就曾因为服务器配置问题，让字体文件在某些浏览器下无法加载而抓狂过。 - 过度使用自定义字体：网站加载了太多、太大的自定义字体文件，会严重拖慢页面加载速度，导致用户体验下降。有时，少即是多。
- 字体列表过短或无通用备用：只指定一个自定义字体，而没有提供任何系统字体或通用字体作为备用，一旦自定义字体加载失败，页面就会显示浏览器默认的丑陋字体，甚至可能导致文本内容难以阅读。
-
不考虑
font-display
：不设置font-display
，可能会导致在字体加载期间出现FOIT（Flash Of Invisible Text），用户会看到一段时间的空白，这非常影响首次加载体验。
字体指定不仅仅是把属性写对那么简单，它还关乎性能、用户体验和设计的完整性。一个深思熟虑的字体策略，能让你的网站在视觉和功能上都更上一层楼。
