Vue项目@font-face自定义字体引入与格式兼容配置

脚本专家

在Vue项目中，使用@font-face引入非标准字体是前端样式实现中的常见需求。@font-face是CSS规则，用于加载服务器上的字体文件，远程或本地均可，并在网页中引用这些字体，从而带来不同于系统默认字体的视觉效果。下面围绕语法、format格式、Vue中的全局定义与页面调用，以及常见注意事项进行整理。

1. @font-face基本语法与属性

基本写法如下：

2. @font-face {
3.   font-family: 'MyCustomFont';
4.   src: url('myfont.woff2') format('woff2'),
5.        url('myfont.woff') format('woff');
6.   font-weight: normal;
7.   font-style: normal;
8. }

复制代码

其中font-family为自定义字体定义名称，后续在CSS里用这个名称引用；src指定字体文件URL，可以列出多个远程或本地地址，浏览器会按顺序尝试加载，原文建议优先使用本地地址以提升可靠性；format用于说明字体文件格式，帮助浏览器正确解析和加载；font-weight与font-style分别定义字体粗细和样式。src中提供多种格式，是为了覆盖不同浏览器的格式支持差异。

2. format格式的选择

woff2是WOFF 2.0，压缩效果和现代浏览器支持较好，原文将其列为推荐格式。woff是面向网页设计的字体格式，压缩效果良好且兼容多种浏览器，可作为woff2之外的备选。truetype（ttf）支持较高质量的字体渲染，但文件通常较大，压缩效果不如woff或woff2。opentype（otf）支持多种字符集和丰富字体特性，文件也可能较大。svg字体基于矢量，可缩放到任意大小而保持清晰，但通常体积更大、使用不如其他格式普遍，主要见于老版本浏览器对特殊字符集的支持。eot由微软开发，主要用于旧版Internet Explorer，随着IE使用率下降需求减少。png、gif等位图字体基于像素，不支持缩放，通常不通过@font-face加载，更多用于自定义图标字体等特定情况。使用format()时应列出所提供的字体格式，浏览器按顺序尝试，直到找到支持的格式。

3. Vue项目中的全局定义

原文案例在index.html中定义字体，以便全局访问，并说明实际生产上不建议这样做，因为加载会消耗资源。示例定义SourceHanSansCN和KaiTi两个字体：

2. @font-face {
3.   /* 思源黑体 */
4.   font-family: 'SourceHanSansCN';
5.   src: url('../src/assets/fonts/SourceHanSansCN-Regular.otf') format('otf'),
6.        url('../src/assets/fonts/SourceHanSansCN-Regular.otf') format('woff2');
7.   font-weight: normal;
8.   font-style: normal;
9. }
11. @font-face {
12.   /* 楷体 */
13.   font-family: 'KaiTi';
14.   src: url('../src/assets/fonts/KaiTi.ttf') format('otf');
15.   font-weight: normal;
16.   font-style: normal;
17. }

复制代码

这段代码体现了全局定义字体的基本结构。需要留意，原文示例中SourceHanSansCN重复使用.otf文件却分别标注为otf和woff2，KaiTi使用.ttf文件却标注为otf；在实际配置时，format描述应与真实文件格式对应，否则可能影响浏览器对格式的判断。字体路径也应按Vue项目的资源目录和构建配置调整。

4. 在Vue页面中调用自定义字体

定义完成后，在组件模板和样式中按font-family名称引用：

2. <template>
3.   <label class='siyuan'>零星可比炽日华，字若珠玑句无瑕</label>
4.   <br />
5.   <label class='kaiti'>我是楷体</label>
6. </template>
8. <script>
9. export default {};
10. </script>
12. <style scoped>
13. .siyuan {
14.   font-family: 'SourceHanSansCN', sans-serif;
15.   color: red;
16. }
18. .kaiti {
19.   font-family: 'KaiTi', sans-serif;
20.   color: green;
21. }
22. </style>

复制代码

调用逻辑是用CSS的font-family引用@font-face中声明的名称，并保留sans-serif等后备字体。这样页面元素就能使用自定义字体，同时在后备字体可用时保持基本显示。

5. 注意事项与排查方向

字体文件可能较大，加载自定义字体可能影响页面加载速度，原文建议考虑字体压缩技术，并只包含实际需要的字符集。要确保拥有所加载字体的使用权限，部分字体受版权保护，未经许可不得用于商业用途。还需要测试字体在不同浏览器和设备上的兼容性，不同浏览器和设备对字体格式的支持程度不同。结合原文案例，排查时可重点检查src路径是否可访问、多个格式的顺序是否合理、format与文件扩展名是否一致，以及全局加载是否带来不必要的资源消耗。

总结来说，Vue项目使用@font-face的核心是声明字体名称与src，按浏览器兼容性排列字体格式，再在组件样式中通过font-family引用。原文案例给出了全局定义和页面调用的完整示例，实际落地时应结合资源路径、文件格式、字体体积和授权情况做调整。