在Vue项目中使用自定义字体的操作步骤

曾经得老班长

适用场景

• 多设备兼容：解决不同设备和浏览器中系统字体不一致的问题。
  
• 品牌统一：保持品牌的视觉一致性。
  
• 高级排版：使用特定的字重和样式，提升排版质量。
  

解决问题

• 页面加载性能：通过优化字体文件加载，减少页面渲染阻塞。
  
• 视觉一致性：确保字体在各种设备上都能正确显示。
  
• 易于维护：通过合理的配置和文件结构，方便后续维护和更新。
  

下载字体文件


字体格式比较

• OTF (OpenType Font)：
  
  
  
  • 特点：支持高级排版特性，如连字、替代字符。
    
  • 优点：兼容性好，适用于复杂排版需求。
    
  • 选择原因：适合需要高质量排版的项目。
    
  
  
• TTF (TrueType Font)：
  
  
  
  • 特点：广泛使用，支持大多数操作系统。
    
  • 优点：良好的可读性，适合屏幕显示。
    
  • 缺点：文件相对较大，不支持部分高级排版特性。
    
  
  
• WOFF/WOFF2 (Web Open Font Format)：
  
  
  
  • 特点：专为网页设计，基于压缩的 TTF/OTF。
    
  • 优点：文件小，加载快，支持现代浏览器。
    
  • 缺点：不兼容较旧的浏览器。
    
  
  
• EOT (Embedded OpenType)：
  
  
  
  • 特点：微软开发，主要用于旧版 IE 浏览器。
    
  • 优点：支持 IE 浏览器。
    
  • 缺点：逐渐被淘汰，不支持其他浏览器。
    
  
  

为什么选择 OTF

我们选择

1. .otf

复制代码

格式，因为它支持高级排版功能，兼容性好，适合多种使用场景。虽然

1. WOFF

复制代码

和

1. WOFF2

复制代码

在网页加载性能上更优，但

1. .otf

复制代码

提供了更丰富的排版特性，适合需要高质量排版的项目。
将下载的

1. .otf

复制代码

文件放入

1. src/assets/fonts/

复制代码

目录中。

配置 vue.config.js

确保在

1. vue.config.js

复制代码

中配置文件加载规则，以正确处理字体文件：

1. module.exports = {
   
2.   chainWebpack: config => {
   
3.     config.module
   
4.       .rule('fonts')
   
5.       .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
   
6.       .use('file-loader')
   
7.       .loader('file-loader')
   
8.       .options({
   
9.         name: 'fonts/[name].[hash:8].[ext]'
   
10.       });
    
11.   }
    
12. };

复制代码

创建全局 CSS 文件

在

1. src/assets/styles/

复制代码

目录中创建

1. fonts.css

复制代码

，引入所需的字体：

1. @font-face {
   
2.   font-family: 'NotoSansCJK';
   
3.   src: url('@/assets/fonts/NotoSansCJK-Regular-1.otf') format('opentype');
   
4.   font-weight: 400;
   
5.   font-style: normal;
   
6.   font-display: swap;
   
7. }
   
8. 
   
9. @font-face {
   
10.   font-family: 'NotoSansCJK';
    
11.   src: url('@/assets/fonts/NotoSansCJK-Bold-6.otf') format('opentype');
    
12.   font-weight: 700;
    
13.   font-style: normal;
    
14.   font-display: swap;
    
15. }
    
16. 
    
17. body {
    
18.   font-family: 'NotoSansCJK', sans-serif;
    
19. }

复制代码

在 main.js 中引入全局 CSS 文件

在

1. src/main.js

复制代码

中添加以下代码：

1. import Vue from 'vue';
   
2. import App from './App.vue';
   
3. import router from './router';
   
4. import store from './store';
   
5. import '@/assets/styles/fonts.css';  // 引入全局字体样式
   
6. 
   
7. Vue.config.productionTip = false;
   
8. 
   
9. new Vue({
   
10.   router,
    
11.   store,
    
12.   render: h => h(App)
    
13. }).$mount('#app');

复制代码

在项目中使用字体

在你的组件中，通过指定

1. font-family

复制代码

和

1. font-weight

复制代码

使用不同的字重：

1. <template>
   
2.   <div>
   
3.     <h1 style="font-weight: 700;">加粗标题</h1>
   
4.     <p style="font-weight: 400;">普通文本</p>
   
5.   </div>
   
6. </template>

复制代码

优化建议

• 选择性引入：根据项目需求，仅引入常用的字重（如 Regular 和 Bold），避免加载不必要的字体。
  
• 字体压缩：使用工具（如
  1. font-spider

  复制代码
  ）压缩字体文件，减少文件大小，加快加载速度。
  

1. npm install font-spider -g
   
2. font-spider your-font-file.otf

复制代码

• 异步加载：使用
  1. font-display: swap;

  复制代码
  ，允许浏览器在加载字体时使用后备字体，避免文字隐形（FOIT）问题。
  
• 使用 CDN：若可能，使用 CDN 提供的字体资源，加快字体加载速度，同时减轻服务器负担。
  
• 延迟加载：对于不常用的字体或字重，可以通过懒加载或在非关键路径中使用，以优化首屏性能。
  

结论

通过以上步骤，可以在 Vue 项目中高效地引入和使用自定义字体。这不仅提升了用户体验，还通过选择性加载和优化技术减少了页面加载时间，确保项目在不同设备上都能呈现一致的视觉效果。
以上就是在Vue项目中使用自定义字体的操作步骤的详细内容，更多关于Vue使用自定义字体的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/javascript/323515fws.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！