在HTML5中，服务器字体的核心做法是：把字体文件放到服务器上，通过CSS的@font-face规则声明并引用它，网页就能在用户没安装该字体时，照样按你的设计显示。 听起来很简单，实际操作中却容易踩坑，下面按步骤拆开讲。
服务器字体怎么弄？先掌握@font-face实战步骤
字体文件放哪里？服务器目录规划
建议在网站根目录下建一个专门的fonts目录，把字体文件都收在里面，方便管理和缓存，路径引用有两种常用方式：
![[网站开发入门指南56] 使用字体文件 常用字体文件格式 @font-face｜ html css 零基础入门教程 html5 css3](https://i1.hdslb.com/bfs/archive/cf5e1ad477afacaaa7cc18a627d8f7dacda2d399.jpg)
- 绝对路径,例如
/fonts/MyFont.woff2，直接以根目录为起点。 - 完整网址,例如
https://你的域名.com/fonts/MyFont.woff2，适合CDN或对象存储。
注意Linux服务器对文件大小写敏感,上传后先用浏览器直接访问一下字体文件地址，能显示或下载才说明路径没问题。
@font-face的语法要点
一个标准声明看起来是这样：
@font-face {
font-family: 'MyFont';
src: url('/fonts/MyFont.woff2') format('woff2'),
url('/fonts/MyFont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
这里的MyFont是你自己命名的字体家族名，后面样式里用同一个名字即可：
body {
font-family: 'MyFont', 'PingFang SC', sans-serif;
}
如果字体有粗体和斜体版本,需要分别声明，或者在@font-face里写明对应的font-weight和font-style，一个常被忽视的坑是：粗体字重若未单独声明，浏览器可能会用合成加粗，效果会失真。
浏览器兼容格式怎么选
字体格式主要分WOFF2、WOFF、TTF/OTF、EOT，它们的兼容性和体积差别较大：
- WOFF2：现代浏览器都支持，压缩率最好，是首选。
- WOFF：覆盖老版本浏览器，体积比WOFF2大，但仍然可用。
- TTF/OTF：兼容Win和Mac，但体积大，通常只作为后备。
- EOT：只有老版IE才用，如今基本可以忽略。
行业共识认为,普通网站准备WOFF2加WOFF两种格式就够用了，格式之间的转换可以借助免费在线字体转换工具，上传TTF后直接导出WOFF2。
本地字体与服务器字体怎么选？性能与场景对比
本地字体的优势与局限
本地字体指的是用户设备上已安装的字体,比如windows里的微软雅黑、macOS里的苹方，优势是零网络请求，加载速度几乎是瞬间的，局限也很明显：不同系统之间显示效果不一致，用户没安装的字体只能回退到默认字体，品牌感会丢失。
服务器字体的适用场景
当你需要以下效果时,就该考虑服务器字体：
- 官网首页的大标题,需要用品牌定制字体。
- 企业门户或后台系统,要求全平台视觉统一。
- 电商活动页,用特殊字体营造氛围。
特别是中文网站,常用服务器字体加载标题所需字重，正文仍然用系统字体，这样兼顾效果和性能。
用表格对比两者差异
| 对比项 | 本地字体 | 服务器字体 |
|---|---|---|
| 加载速度 | 无请求，最快 | 依赖网络环境 |
| 视觉一致性 | 跨设备差异大 | 完全统一 |
| 体积成本 | 无额外流量 | 消耗服务器流量 |
| 版权风险 | 跟随系统授权 | 需购买或使用开源授权 |
| 维护难度 | 无需配置 | 需监控加载效果 |
网站字体加载慢怎么办？服务器字体优化技巧
如果你发现用服务器字体后,页面首屏白屏时间长或者文字跳动，大概率是字体文件太大或加载策略不合理，下面几个优化手段按优先级排序。
优先使用WOFF2并启用压缩
WOFF2自带压缩算法,文件体积通常比TTF小一半以上，如果服务器上只能放TTF源文件，建议转成WOFF2再上传，对于已启用的WOFF格式，可以在Nginx里开启gzip，进一步减小传输大小。
用font-display控制字体加载行为
在@font-face里加上font-display: swap;，浏览器会先用回退字体渲染页面，等字体加载完再替换，这样用户能第一时间看到内容，缺点是有短暂的无样式闪烁，多数情况下，这个体验远比白屏好。
子集化与unicode-range减体积
中文全量字体动辄数MB,直接加载会拖垮慢速网络，常用的做法是：
- 做子集化,只保留页面里用到的字，比如把某款字体按常用3500字切分。
- 用
unicode-range让浏览器按需下载对应字体的分段。
业内专家指出,中文网页字体通过子集化能砍掉大半体积，加载速度提升非常明显。
合理用preload提前请求字体
如果字体是首屏必需的,可以在head里提前预加载：
<link rel="preload" as="font" type="font/woff2" href="/fonts/MyFont.woff2" crossorigin>
注意crossorigin属性不能去掉，否则有些浏览器会忽略预加载，导致字体延后请求。
服务器字体跨域问题怎么解决？
当字体文件与页面不在同一个域名下,比如用CDN或对象存储托管字体，浏览器会默认拦下跨域字体请求，解决方案是给字体文件响应头加上CORS字段：
Access-Control-Allow-Origin: 如果是Nginx服务器,可以在配置里针对字体扩展名设置：
location ~ .(woff2?)$ {
add_header Access-Control-Allow-Origin ;
}
如果是简米云OSS、酷番云COS这类存储，直接在产品控制台的“跨域设置”里添加来源即可，这里强调一个使用细节：即使字体文件与页面同源，但是通过preload预加载，也必须在响应头带CORS字段，否则预加载会失效。
同源与CDN场景的跨域配置
同域名下通常不用额外设置,使用CDN时除了响应头，还要确认CDN没有屏蔽字体文件后缀，比如某些CDN默认不缓存woff2，需要在缓存配置里手动添加，另一种限制资源被其他网站盗用的做法是，把Access-Control-Allow-Origin设为你的具体域名，而不是，同时加上Referer校验。
北京服务器字体部署要点与成本参考
国内服务器部署的路径与备案常识
如果你的网站放在国内机房,例如北京服务器，那么域名需要完成ICP备案后才能绑定访问，据工信部规定，未备案的域名使用大陆服务器属于违规，字体文件本身不需要单独备案，但整个网站如果未备案，字体自然也无法正常服务。
部署路径和海外服务器没有区别,将字体文件放在站点根目录下的
fonts文件夹，再配置好MIME类型即可。
字体方案的成本由哪些因素构成
对于中小型网站,服务器字体的成本主要由三部分组成：
- 字体版权授权费,像思源黑体、思源宋体这类开源字体免费可用，商用也无压力；品牌定制字体则可能需要按年购买授权。
- 服务器与CDN流量费用,国内云服务器基础配置的月付价格有高有低，普通个人站选最低档就够用，流量费通常按GB计费，字体文件若控制得当，每月增加的成本很有限。
- 制作维护成本,子集化、格式转换、跨域配置这些操作需要投入时间，但都是一次性设置。
整体来看,用免费或开源字体是成本最低的方案，这也是目前多数网站采用的方式。
服务器字体的核心就是@font-face，把字体文件放对路径，选对格式，再做好跨域和加载优化，你就能稳定地让所有用户看到一致的字体效果。 遇到字体不生效或加载慢，按照上面的路径和条件检查，基本能直接定位问题。
Q&A：html5中服务器字体怎么弄更稳？
@font-face引用字体文件后不生效是什么原因？
常见原因有四个：路径写错，先直接访问字体URL看能否打开；字体格式与浏览器不匹配，建议至少提供WOFF2；font-family名称前后不一致，CSS里少写引号或写错都会导致无法匹配；服务器未正确返回字体MIME类型，WOFF2的标准类型为font/woff2，排查时可在开发者工具的Network面板里看响应头。
服务器字体和图标字体是一回事吗？
不是,服务器字体一般指用于正文或标题的文本字体，通过@font-face加载，影响的是字体外观，图标字体本质上是把图元做成了字体编码，每个字形对应一个符号，通常配合伪元素或CSS类来显示，两者都依赖服务器上的字体文件，但用途和实现方式完全不同。
字体文件可以放在对象存储或CDN上吗？
可以,对象存储如简米云OSS、酷番云COS，以及各种CDN提供的静态URL，都能直接作为@font-face的src地址，使用时需要在存储或CDN控制台配置跨域头，并保证URL长期稳定有效，同时注意字体文件的缓存时间设置。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/693428.html
