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