HTML中如何优雅地使用思源黑体等开源中文字体？

Question

在HTML中使用思源黑体等开源中文字体时，如何优化加载性能并确保跨浏览器兼容性？直接引用外部字体文件可能导致页面加载速度变慢，影响用户体验。为解决此问题，可以采用WOFF2格式以减小字体文件体积，并通过CSS的`@font-face`规则定义字体。同时，利用`local()`函数检查用户设备是否已安装相同字体，避免重复下载。此外，为确保兼容性，需按优先级顺序列出多种字体格式（如woff2, woff, ttf），并设置合理的回退字体。最后，借助媒体查询根据屏幕分辨率加载不同精度的字体，进一步提升性能与显示效果。这种优雅的实现方式既能保证美观，又能兼顾效率与兼容性。

Answer 1

在HTML中优化思源黑体等开源中文字体的加载性能与跨浏览器兼容性

1. 基础问题：字体加载对性能的影响

直接引用外部字体文件可能会导致页面加载速度变慢，影响用户体验。这是因为浏览器需要下载字体文件后才能渲染文本内容，而大体积的字体文件会显著增加页面的加载时间。

• 字体文件通常较大，尤其是包含多种字符集的中文字体。
• 加载字体文件可能导致页面呈现阻塞（FOIT - Flash of Invisible Text）。
• 不同浏览器对字体格式的支持程度不一致，可能引发兼容性问题。

2. 核心技术：使用WOFF2格式减小字体文件体积

WOFF2是一种高效的字体压缩格式，相比传统格式（如TTF、EOT），它可以显著减小文件体积，从而加快加载速度。

@font-face {
    font-family: 'SourceHanSans';
    src: local('Source Han Sans'),
         url('source-han-sans.woff2') format('woff2'),
         url('source-han-sans.woff') format('woff'),
         url('source-han-sans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
    

通过上述CSS代码，我们优先使用用户本地已安装的字体，避免重复下载，并按优先级顺序列出多种字体格式以确保兼容性。

3. 高级优化：结合`local()`函数与回退字体

`local()`函数可以检查用户设备是否已安装相同字体，若存在则直接使用本地字体，无需额外下载。此外，设置合理的回退字体（如Arial或sans-serif）可确保在字体加载失败时仍能正常显示内容。

字体优先级	字体格式	适用场景
1	local('Source Han Sans')	用户设备已安装字体
2	woff2	现代浏览器支持
3	woff	旧版浏览器支持
4	tff	最低兼容性保障

4. 动态适配：借助媒体查询加载不同精度字体

根据屏幕分辨率动态加载不同精度的字体可以进一步提升性能与显示效果。例如，在高DPI设备上加载更高精度的字体，而在低DPI设备上使用较低精度版本以减少带宽消耗。

@media (min-resolution: 2dppx) {
    @font-face {
        font-family: 'SourceHanSansHD';
        src: url('source-han-sans-hd.woff2') format('woff2');
    }
}

@media (max-resolution: 1dppx) {
    @font-face {
        font-family: 'SourceHanSansLD';
        src: url('source-han-sans-ld.woff2') format('woff2');
    }
}
    

通过这种方式，我们可以为不同设备提供最佳的字体显示效果，同时保持良好的性能表现。

5. 实现流程图：整体优化步骤

graph TD;
            A[开始] --> B[选择字体文件];
            B --> C[转换为WOFF2格式];
            C --> D[定义@font-face规则];
            D --> E[添加local()检测];
            E --> F[设置回退字体];
            F --> G[应用媒体查询];
            G --> H[完成];