软件开发培训班 >> 编程开发 >> JavaScript


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

适用场景

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

解决问题

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

下载字体文件

字体格式比较

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

以上就是在Vue项目中使用自定义字体的操作步骤的详细内容，更多关于Vue使用自定义字体的资料请关注其它相关文章！