现代网页设计不再推荐使用<font face>属性，因为它违反了内容与样式分离的原则，导致维护困难、扩展性差、缺乏语义化且浏览器支持逐渐弱化；2. 使用css的font-family属性可实现更灵活的字体控制，通过定义字体栈和结合选择器集中管理样式，实现了样式与内容的解耦；3. 引入自定义字体的最佳实践包括使用@font-face规则定义字体、优先选择woff2格式、通过cdn或自托管加载、仅加载必要字重、进行字体子集化、合理设置font-display属性以优化加载体验，并确保字体授权合规。
在HTML中设置字体样式，最直接但已不推荐的方式是使用
font标签的
face属性。不过，现代网页开发更倾向于使用CSS的
font-family属性，它提供了更灵活、更强大的字体控制能力，包括引入自定义字体。
解决方案
说实话，每次看到旧代码里还在用
<font>标签，我都会忍不住叹口气。那玩意儿，确实能设置字体，比如你想把一段文字变成“微软雅黑”，可以直接这么写：
<p><font face="Microsoft YaHei">这段文字是微软雅黑。</font></p>
但这种做法，用行话讲，就是把“内容”和“样式”混在了一起。想象一下，你盖房子的时候，把墙壁的颜色直接画在结构图纸上，虽然也能实现，但将来想换个颜色，就得动图纸，多麻烦。网页也是一样，HTML是骨架，CSS才是皮肤。
立即学习“前端免费学习笔记（深入）”；
所以，现在我们设置字体，几乎都是用CSS。最常用的就是
font-family属性。它可以写在HTML元素的
style属性里（不推荐，但应急时有用），写在
<style>标签里，或者最好的方式，写在一个独立的
.css文件里。
比如，你想让所有段落都用“微软雅黑”，如果用户电脑没有，就退而求其次用“宋体”，再没有，就用系统默认的无衬线字体（sans-serif）：
p {
font-family: "Microsoft YaHei", "SimSun", sans-serif;
}或者，你想让某个特定的标题用一种很酷的字体，你可以给它一个类名，然后通过CSS来控制：
<h1 class="cool-title">我的酷炫标题</h1>
.cool-title {
font-family: "Impact", fantasy; /* Impact是系统字体，fantasy是通用字体族 */
}这比
font face强大多了，不仅能指定多个备选字体，还能配合
font-size、
font-weight、
color等属性，全方位地控制文字样式。
为什么现代网页设计不再推荐使用<font face>
属性？
这其实是个老生常谈的问题了，但对于刚接触网页开发的同学来说，确实需要掰扯清楚。简单讲，
<font face>属性，包括整个
<font>标签，都是HTML4时代遗留下来的“历史包袱”。它被淘汰，主要有几个原因：
首先，是“关注点分离”的原则。HTML的本职工作是定义网页的结构和内容，比如哪些是标题，哪些是段落，哪些是图片。而样式（字体、颜色、布局等）应该由CSS来负责。当你在HTML里直接写
font face时，你就把样式信息硬编码进了结构里。这就像我前面说的，把家具颜色写在房子的地基图纸上，虽然能用，但逻辑上就是错位了。
其次，是维护性和可扩展性问题。想象一下，你的网站有几百个页面，每个页面里都有几十处用
<font face="Arial">来设置字体。有一天老板说：“我们品牌升级了，所有Arial字体都要换成Helvetica！”你怎么办？一个页面一个页面地改？那简直是噩梦。但如果用CSS，你只需要改一个CSS文件里的一行代码，所有页面的字体就都更新了。这效率上的差异，简直是天壤之别。
再者，是性能和语义化。HTML标签应该具有语义，告诉浏览器和搜索引擎它代表什么。
<p>代表段落，
<h1>代表一级标题。而
<font>标签除了设置样式，没有任何语义上的意义。它增加了HTML文件的体积，却没带来任何结构上的信息。同时，它也限制了你对样式的精细控制，比如你想同时改变字重、行高、颜色，
font face就无能为力了。
最后，浏览器对这种老旧属性的支持也越来越弱，或者说，它们更倾向于按照CSS的规则来渲染。所以，为了网站的长期健康发展，抛弃
<font face>，拥抱CSS，是必然的选择。
如何使用CSS的font-family
属性来设置字体？它和<font face>
有什么本质区别？
CSS的
font-family属性是目前设置字体样式的标准方法。它的用法比
font face灵活得多，也更符合现代网页开发的最佳实践。
font-family的语法是这样的：你可以提供一个或多个字体名称，用逗号隔开。浏览器会从左到右依次尝试这些字体。如果用户系统安装了第一个字体，就用第一个；如果没有，就尝试第二个，以此类推。直到找到一个可用的字体，或者最终使用浏览器默认的字体。
body {
font-family: "Helvetica Neue", Arial, sans-serif;
}这里，“Helvetica Neue”是首选字体，如果用户没有，就用Arial，如果还没有，就用任何系统提供的无衬线字体（sans-serif）。这种“备用字体链”机制，是
font-family非常重要的一个特性，它保证了在用户设备上总能显示出可读的文字，同时尽可能地保留了设计意图。
font-family和
font face的本质区别在于它们的“管辖范围”和“设计理念”。
font face是HTML的一个属性，它直接作用于单个HTML元素，是一种“内联式”的样式定义。它的设计理念是“所见即所得”，你直接在元素上指定样式。这种方式简单粗暴，但缺乏复用性和集中管理的能力。
font-family是CSS的一个属性，它属于样式表的一部分。CSS的设计理念是“样式与内容分离”，它通过选择器（比如元素名、类名、ID等）来批量地、有条件地应用样式。这意味着你可以把所有字体样式定义集中在一个地方，然后让多个HTML元素引用这些样式。这种方式更抽象，但带来了极大的灵活性、可维护性和可扩展性。
说白了，
font face是“硬编码”，直接把字体信息写死在HTML里；而
font-family是“配置化”，通过CSS规则来统一管理字体，实现了样式和内容的解耦。这不仅仅是语法上的不同，更是两种完全不同的开发哲学。
引入自定义字体（Web Fonts）的最佳实践是什么？@font-face
规则该如何应用？
有时候，系统自带的字体无法满足设计需求，设计师可能需要使用一些特别的字体来体现品牌特色或视觉风格。这时候，我们就需要引入“自定义字体”，也叫“Web Fonts”。这玩意儿，才是真正让网页设计摆脱系统字体限制的利器。
引入自定义字体，主要依赖CSS的
@font-face规则。它允许你指定一个字体文件的路径，然后给这个字体起个名字，之后就可以像使用系统字体一样，在
font-family里引用它了。
一个基本的
@font-face规则是这样的：
@font-face {
font-family: 'MyCustomFont'; /* 给字体起个名字 */
src: url('fonts/my-custom-font.woff2') format('woff2'), /* 优先加载WOFF2格式 */
url('fonts/my-custom-font.woff') format('woff'); /* 兼容性更好的WOFF格式 */
font-weight: normal; /* 字体的粗细 */
font-style: normal; /* 字体的样式，比如斜体 */
font-display: swap; /* 字体加载策略 */
}然后，你就可以在CSS里这样使用它：
h1 {
font-family: 'MyCustomFont', sans-serif; /* 记得加上备用字体 */
}关于最佳实践，我个人有一些心得：
字体格式的选择： 不同的浏览器支持的字体格式不同。现在最推荐的是
WOFF2
，它压缩率高，加载速度快，现代浏览器基本都支持。其次是WOFF
，兼容性也不错。TTF
（TrueType）和OTF
（OpenType）是原始字体格式，文件通常较大。EOT
（Embedded OpenType）是IE专用的，现在基本不用考虑了。SVG
字体也逐渐被淘汰。所以，通常你至少需要WOFF2
和WOFF
两种格式，以确保广泛兼容性。-
字体文件的来源：
- 自托管： 如果你购买了字体授权，或者使用了免费开源字体，可以将字体文件放在自己的服务器上。这样可以更好地控制加载过程，但需要处理好跨域问题（如果字体文件和网页不在同一个域名下）。
-
第三方服务： 像Google Fonts、Adobe Fonts等服务提供了大量的Web字体，并且通常有很好的CDN支持，加载速度快。它们会自动帮你处理
@font-face
规则和各种字体格式的兼容性，非常方便。但缺点是依赖第三方服务，且可能涉及隐私问题（字体服务商会记录用户IP等）。
-
性能优化：
- 只加载需要的字重和样式： 一个字体家族可能包含几十种字重（细体、粗体、黑体等）和样式（斜体、正常）。如果你只用到常规体和粗体，就不要把所有字重都加载进来，这会大大增加字体文件的大小。
- 字体子集化（subsetting）： 如果你的网站只使用中文字符，可以考虑对字体文件进行子集化，只包含常用汉字，这样能显著减小文件体积。不过这操作有点复杂，通常需要专门的工具。
-
font-display
属性： 这个属性非常重要，它控制了字体加载时的行为，可以避免“无样式文本闪烁”（FOUT - Flash of Unstyled Text）或“不可见文本闪烁”（FOIT - Flash of Invisible Text）的问题。swap
：在字体加载期间，先显示系统默认字体，加载完成后再替换为自定义字体。这是最常用的，体验比较好。block
：在字体加载期间，文本会先隐藏一段时间，直到字体加载完成才显示。可能导致空白。fallback
：类似于block
，但等待时间更短，如果字体加载失败，会立即显示备用字体。optional
：字体加载优先级最低，如果网络不好，可能直接不加载自定义字体，始终显示备用字体。
-
预加载： 对于关键字体，可以使用
<link rel="preload" as="font" type="font/woff2" crossorigin>
标签来提前加载，提高用户体验。
字体授权： 使用任何自定义字体前，务必检查其授权协议。有些字体是免费商用的，有些则需要购买授权。避免侵权是基本原则。
引入自定义字体，虽然能让网页看起来更独特，但也要注意权衡性能。毕竟，一个好看但加载慢的网站，用户体验会大打折扣。
