在把旧版网页改造成HTML5结构时，不少人发现原本正常的特殊字体变成了系统默认字体，排版一下子垮掉。这种现象通常不是HTML5本身的问题，而是字体资源的引用方式没有跟着新标准走。下面直接说明怎么把字体稳妥地嵌进页面。
为什么改格式后字体会丢失
旧页面常把字体放在外部目录，用非标准的标签或者已经被废弃的属性去加载。改成HTML5之后，这些写法不再被浏览器识别，导致字体请求失败。另外，有些老字体只有ttf格式，而现代浏览器在性能策略上会忽略没有明确声明格式的字体文件，从而回退到默认字体。
还有一个隐藏原因是路径问题。HTML5项目往往采用更严格的相对路径解析，如果改造时目录结构变了，原来的字体链接就成了死链。服务器如果没有正确设置字体文件的MIME类型，浏览器也会拒绝使用，表现为字体缺失。
用@font-face嵌入字体
最通用的做法是在CSS里用@font-face规则声明字体，并把字体文件放到项目内可访问的位置。为了兼容不同浏览器，最好提供woff2、woff和ttf三种格式。下面的代码演示了基本写法，注意路径要相对于CSS文件或站点根目录正确。
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.woff') format('woff'),
url('/fonts/myfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
上面的font-display属性设为swap，可以让文字先以备用字体显示，字体加载完再替换，避免空白。如果希望彻底避免外部请求，可以把字体转成base64直接写进CSS，不过文件体积会变大。
base64内嵌适合字体文件较小、且页面需要完全离线使用的场景。示例如下，把字体内容省略号替换为真实编码即可。这种方式在HTML5单页应用里很实用，不会因为路径或网络问题丢字体。
@font-face {
font-family: 'EmbedFont';
src: url(data:font/woff2;base64,d09GMgABAAAAAAJcAAoAAAAABlgAAAHAAAAAAAEAAAAAAAAAAAAA) format('woff2');
font-weight: 400;
}
转换字体格式与预加载
很多旧字体只有ttf，建议用工具转成woff2，体积能小一半以上，加载更快。转换后按前面@font-face多格式声明，浏览器会自己选支持的那个。同时，在HTML的head里加link预加载，能减少字体闪烁。
<link rel="preload" as="font" type="font/woff2" href="/fonts/myfont.woff2" crossorigin="anonymous">
注意preload的crossorigin必须带，否则字体请求会被当作匿名请求而重复下载。改造完用浏览器开发者工具看Network里的字体响应码，如果是200且类型正确，就说明嵌入成功了。这样HTML5改格式后字体不会再莫名其妙消失。
常见误区与检查清单
有人以为只要把旧标签删了换HTML5就自动保留字体，这是错的。字体是独立资源，必须显式声明。还有人把<font>标签当成字体文件，其实那是文字颜色大小标签，和嵌入无关。改造时建议按下面清单核对。
- 字体文件是否还在服务器对应路径
- @font-face是否写了多种format
- CSS里font-family名字是否拼写一致
- 服务器MIME是否包含font/woff2等类型
把这些点都确认过，HTML5页面的字体就能和改造前一样稳定显示，不会再出现缺字或者样式跳变的情况。