適用場景

• 多設(shè)備兼容：解決不同設(shè)備和瀏覽器中系統(tǒng)字體不一致的問題。
• 品牌統(tǒng)一：保持品牌的視覺一致性。
• 高級排版：使用特定的字重和樣式，提升排版質(zhì)量。

解決問題

• 頁面加載性能：通過優(yōu)化字體文件加載，減少頁面渲染阻塞。
• 視覺一致性：確保字體在各種設(shè)備上都能正確顯示。
• 易于維護：通過合理的配置和文件結(jié)構(gòu)，方便后續(xù)維護和更新。

下載字體文件

字體格式比較

• OTF (OpenType Font)：

  • 特點：支持高級排版特性，如連字、替代字符。
  • 優(yōu)點：兼容性好，適用于復(fù)雜排版需求。
  • 選擇原因：適合需要高質(zhì)量排版的項目。

• TTF (TrueType Font)：

  • 特點：廣泛使用，支持大多數(shù)操作系統(tǒng)。
  • 優(yōu)點：良好的可讀性，適合屏幕顯示。
  • 缺點：文件相對較大，不支持部分高級排版特性。

• WOFF/WOFF2 (Web Open Font Format)：

  • 特點：專為網(wǎng)頁設(shè)計，基于壓縮的 TTF/OTF。
  • 優(yōu)點：文件小，加載快，支持現(xiàn)代瀏覽器。
  • 缺點：不兼容較舊的瀏覽器。

• EOT (Embedded OpenType)：

  • 特點：微軟開發(fā)，主要用于舊版 IE 瀏覽器。
  • 優(yōu)點：支持 IE 瀏覽器。
  • 缺點：逐漸被淘汰，不支持其他瀏覽器。

為什么選擇 OTF

我們選擇 .otf 格式，因為它支持高級排版功能，兼容性好，適合多種使用場景。雖然 WOFF 和 WOFF2 在網(wǎng)頁加載性能上更優(yōu)，但 .otf 提供了更豐富的排版特性，適合需要高質(zhì)量排版的項目。

將下載的 .otf 文件放入 src/assets/fonts/ 目錄中。

配置 vue.config.js

確保在 vue.config.js 中配置文件加載規(guī)則，以正確處理字體文件：

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]'
      });
  }
};

創(chuàng)建全局 CSS 文件

在 src/assets/styles/ 目錄中創(chuàng)建 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>

優(yōu)化建議

• 選擇性引入：根據(jù)項目需求，僅引入常用的字重（如 Regular 和 Bold），避免加載不必要的字體。

• 字體壓縮：使用工具（如 font-spider）壓縮字體文件，減少文件大小，加快加載速度。

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

• 異步加載：使用 font-display: swap;，允許瀏覽器在加載字體時使用后備字體，避免文字隱形（FOIT）問題。

• 使用 CDN：若可能，使用 CDN 提供的字體資源，加快字體加載速度，同時減輕服務(wù)器負擔。

• 延遲加載：對于不常用的字體或字重，可以通過懶加載或在非關(guān)鍵路徑中使用，以優(yōu)化首屏性能。

結(jié)論

通過以上步驟，可以在 Vue 項目中高效地引入和使用自定義字體。這不僅提升了用戶體驗，還通過選擇性加載和優(yōu)化技術(shù)減少了頁面加載時間，確保項目在不同設(shè)備上都能呈現(xiàn)一致的視覺效果。

以上就是在Vue項目中使用自定義字體的操作步驟的詳細內(nèi)容，更多關(guān)于Vue使用自定義字體的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論