Vue项目应用：如何使用自定义字体

分享一个Vue项目应用：如何使用自定义字体。

适用场景

• 多设备兼容：解决不同设备和浏览器中系统字体不一致的问题。

• 品牌统一：保持品牌的视觉一致性。

• 高级排版：使用特定的字重和样式，提升排版质量。

解决问题

• 页面加载性能：通过优化字体文件加载，减少页面渲染阻塞。

• 视觉一致性：确保字体在各种设备上都能正确显示。

• 易于维护：通过合理的配置和文件结构，方便后续维护和更新。

下载字体文件

字体格式比较

• OTF (OpenType Font)：

• 特点：支持高级排版特性，如连字、替代字符。

• 优点：兼容性好，适用于复杂排版需求。

• 选择原因：适合需要高质量排版的项目。

• TTF (TrueType Font)：

• 特点：广泛使用，支持大多数操作系统。

• 优点：良好的可读性，适合屏幕显示。

• 缺点：文件相对较大，不支持部分高级排版特性。

• WOFF/WOFF2 (Web Open Font Format)：

• 特点：专为网页设计，基于压缩的 TTF/OTF。

• 优点：文件小，加载快，支持现代浏览器。

• 缺点：不兼容较旧的浏览器。

• EOT (Embedded OpenType)：

• 特点：微软开发，主要用于旧版 IE 浏览器。

• 优点：支持 IE 浏览器。

• 缺点：逐渐被淘汰，不支持其他浏览器。

为什么选择 OTF

我们选择 .otf 格式，因为它支持高级排版功能，兼容性好，适合多种使用场景。虽然 WOFF 和 WOFF2 在网页加载性能上更优，但 .otf 提供了更丰富的排版特性，适合需要高质量排版的项目。

将下载的 .otf 文件放入 src/assets/fonts/ 目录中。

配置 vue.config.js

确保在 vue.config.js 中配置文件加载规则，以正确处理字体文件：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('fonts')
      .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'fonts/[name].[hash:8].[ext]'
      });
  }
};

创建全局 CSS 文件

在 src/assets/styles/ 目录中创建 fonts.css，引入所需的字体：

@font-face {
  font-family: 'NotoSansCJK';
  src: url('@/assets/fonts/NotoSansCJK-Regular-1.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NotoSansCJK';
  src: url('@/assets/fonts/NotoSansCJK-Bold-6.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'NotoSansCJK', sans-serif;
}

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

在 src/main.js 中添加以下代码：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import '@/assets/styles/fonts.css';  // 引入全局字体样式

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

在项目中使用字体

在你的组件中，通过指定 font-family 和 font-weight 使用不同的字重：

<template>
  <div>
    <h1 style="font-weight: 700;">加粗标题</h1>
    <p style="font-weight: 400;">普通文本</p>
  </div>
</template>

优化建议

• 选择性引入：根据项目需求，仅引入常用的字重（如 Regular 和 Bold），避免加载不必要的字体。

• 字体压缩：使用工具（如 font-spider）压缩字体文件，减少文件大小，加快加载速度。

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

• 异步加载：使用 font-display: swap;，允许浏览器在加载字体时使用后备字体，避免文字隐形（FOIT）问题。

• 使用 CDN：若可能，使用 CDN 提供的字体资源，加快字体加载速度，同时减轻服务器负担。

• 延迟加载：对于不常用的字体或字重，可以通过懒加载或在非关键路径中使用，以优化首屏性能。

结论

通过以上步骤，可以在 Vue 项目中高效地引入和使用自定义字体。这不仅提升了用户体验，还通过选择性加载和优化技术减少了页面加载时间，确保项目在不同设备上都能呈现一致的视觉效果。