首页 技术设计 前端 threejs

# 适用场景

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

# 解决问题

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

# 下载字体文件

# 字体格式比较

  • 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

也可以不配置，vite 项目参见 vite 设置。

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