1 介紹

@font-face 是 CSS 中的一個(gè)規(guī)則，它允許你加載服務(wù)器上的字體文件（遠(yuǎn)程或者本地），并在網(wǎng)頁中使用這些字體。這樣，你可以使用非標(biāo)準(zhǔn)字體，從而給網(wǎng)頁帶來獨(dú)特的視覺風(fēng)格。

2 使用

2.1 語法

@font-face {  
  font-family: 'MyCustomFont';  
  src: url('myfont.woff2') format('woff2'),  
       url('myfont.woff') format('woff');  
  font-weight: normal;  
  font-style: normal;  
}

2.2 屬性說明

• font-family: 為自定義字體定義一個(gè)名稱，后續(xù)在 CSS 中使用這個(gè)名稱來引用這個(gè)字體。
• src: 指定字體文件的 URL。你可以指定多個(gè)字體文件（遠(yuǎn)程或者本地，建議天秤本地地址，更具可靠性），瀏覽器會(huì)按照列出的順序嘗試加載。建議包含多種格式的字體文件，以確保在各種瀏覽器上的兼容性。
• format: 指定字體文件的格式。這有助于瀏覽器確定如何解釋文件。常見的格式包括 woff2, woff, ttf, eot, svg 等。
• font-weight 和 font-style: 這些屬性定義了字體的粗細(xì)和樣式（如斜體）。

其中format()描述符用于指定字體文件的格式。這對(duì)于瀏覽器來說是非常重要的，因?yàn)樗梢詭椭鸀g覽器正確地解析和加載字體文件。不同的瀏覽器可能支持不同的字體格式，因此提供多種格式可以確保更廣泛的瀏覽器兼容性。

以下是format()描述符中常用的一些字體格式及其簡(jiǎn)要說明：

1. woff2：
   • WOFF 2.0 是 WOFF（Web Open Font Format）的更新版本，它提供了更好的壓縮和更廣泛的瀏覽器支持。
   • 它是目前推薦的字體格式，因?yàn)樗峁┝藘?yōu)秀的壓縮效果，并且被現(xiàn)代瀏覽器廣泛支持。
2. woff：
   • WOFF（Web Open Font Format）是專為網(wǎng)頁設(shè)計(jì)的字體格式。
   • 它提供了良好的壓縮效果，并且與多種瀏覽器兼容。
   • 如果不需要woff2格式，woff是一個(gè)很好的備選方案。
3. truetype (或 ttf)：
   • TrueType是一種廣泛使用的字體格式，它支持高質(zhì)量的字體渲染。
   • 然而，TrueType字體文件通常較大，不如woff或woff2壓縮效果好。
   • 在某些情況下，特別是當(dāng)其他格式不可用時(shí)，可以使用TrueType。
4. opentype (或 otf)：
   • OpenType是另一種廣泛使用的字體格式，它支持多種字符集和豐富的字體特性。
   • 與TrueType類似，OpenType字體文件也可能較大。
5. svg：
   • SVG（Scalable Vector Graphics）字體是基于矢量的，這意味著它們可以縮放到任何大小而不會(huì)失去清晰度。
   • 然而，SVG字體通常比其他格式更大，并且不如其他格式常用。
   • 它們主要在老版本的瀏覽器中用于支持某些特殊字符集。
6. eot：
   • EOT（Embedded OpenType）是微軟開發(fā)的一種字體格式，主要用于舊版本的Internet Explorer瀏覽器。
   • 隨著Internet Explorer的使用率下降，EOT的需求也在減少。
7. bitmap formats (如 png, gif)：
   • 位圖字體通常不是通過@font-face加載的，因?yàn)樗鼈兪腔谙袼氐?，不支持縮放。
   • 它們主要用于特定的情況，如創(chuàng)建自定義圖標(biāo)字體。

在@font-face規(guī)則中使用format()描述符時(shí)，你應(yīng)該列出所有你提供的字體格式，以便瀏覽器進(jìn)行兼容。瀏覽器會(huì)按照你列出的順序嘗試加載字體，直到找到它支持的格式為止。

2.3 Vue使用案例

2.3.1 全局定義字體

在index.html進(jìn)行字體定義，以便全局都能訪問到（實(shí)際生產(chǎn)上不建議這么做，加載會(huì)消耗資源）；這里我們定義兩個(gè)字體：

1. SourceHanSansCN；
2. KaiTi

    @font-face {
      /* 思源黑體 */
      font-family: 'SourceHanSansCN';  
      src: url('../src/assets/fonts/SourceHanSansCN-Regular.otf') format('otf'),  
          url('../src/assets/fonts/SourceHanSansCN-Regular.otf') format('woff2');  
      font-weight: normal;  
      font-style: normal; 
    }
    @font-face {
      /* 楷體 */
      font-family: 'KaiTi';  
      src: url('../src/assets/fonts/KaiTi.ttf') format('otf');
      font-weight: normal;  
      font-style: normal; 
    }

2.3.2 在頁面使用

<template>
 <label class="siyuan">零星可比熾日華，字若珠璣句無瑕</label>
 <br />
 <label class="kaiti">我是楷體</label>
</template>
<script>
export default {};
</script>
<style scoped>
.siyuan {
  font-family: "SourceHanSansCN", sans-serif;
  color: red;
}
.kaiti {
  font-family: "KaiTi", sans-serif;
  color: green;
}
</style>

效果如下：

3 注意事項(xiàng)

• 字體文件可能會(huì)比較大，因此加載它們可能會(huì)對(duì)頁面加載速度產(chǎn)生影響。為了優(yōu)化性能，考慮使用字體壓縮技術(shù)，并只包含你實(shí)際需要的字符集。
• 確保你有權(quán)使用你正在加載的字體。一些字體可能受到版權(quán)保護(hù)，未經(jīng)許可不得用于商業(yè)用途。
• 測(cè)試你的字體在各種瀏覽器和設(shè)備上的兼容性。不同的瀏覽器和設(shè)備可能對(duì)不同的字體格式有不同的支持程度。

到此這篇關(guān)于Vue使用font-face自定義字體的案例詳解的文章就介紹到這了,更多相關(guān)Vue font-face自定義字體內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論