如何在 NuxtJS 中高效載入不同粗細的 Google 字型？-css教學-PHP中文網

如何在 NuxtJS 中高效載入不同粗細的 Google 字型？

DDD

發布： 2024-11-01 07:15:30

原創

983 人瀏覽過

How to load Google Fonts with different weights efficiently in NuxtJS?

如何在Nuxt 中高效加載Google 字體

問題陳述

您在NuxtJS 應用程式中加載具有不同字體時遇到困難。您為同一字體導入了多個不同粗細的鏈接，但僅應用了基本字體，導致缺乏所需的字體粗細自訂。

解決方案

載入 Google 的推薦方法Nuxt 中的字體是為了避免使用 CDN，而是自行託管字體或透過頁面來源代理它們。要實現此目標，請考慮利用 @nuxtjs/google-fonts 模組，該模組為自架 Google Fonts 提供了一個無障礙的解決方案。

Nuxt 模組配置(nuxt.config.js)

<code class="javascript">export default {
  buildModules: [
    [
      '@nuxtjs/google-fonts',
      {
        families: {
          'Saira Semi Condensed': {
            wght: [600, 800],
          },
        },
        subsets: ['latin'],
        display: 'swap',
        download: true,
      },
    ],
  ],
}</code>

登入後複製

此組態將下載「Saira Semi Condensed」字型系列的600 和800 字型粗細，並使其可在應用程式中使用。

CSS 使用

一旦字體下載後，您可以使用 @font-face 規則在 CSS 中引用它們。

<code class="css">@font-face {
  font-family: 'Saira Semi Condensed';
  src: url('/fonts/SairaSemiCondensed-Regular.woff2') format('woff2'),
       url('/fonts/SairaSemiCondensed-Regular.woff') format('woff'),
       url('/fonts/SairaSemiCondensed-Regular.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Saira Semi Condensed';
  src: url('/fonts/SairaSemiCondensed-Bold.woff2') format('woff2'),
       url('/fonts/SairaSemiCondensed-Bold.woff') format('woff'),
       url('/fonts/SairaSemiCondensed-Bold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}</code>

登入後複製

將 /fonts 替換為下載字型檔的目錄。

元件中的使用

在Vue 元件中，您可以設定font-family 和font-weight 屬性來套用所需的字體：

<code class="html"><template>
  <h1 style="font-family: 'Saira Semi Condensed', sans-serif; font-weight: 600;">I am Component A</h1>
</template></code>

登入後複製

<code class="html"><template>
  <h1 style="font-family: 'Saira Semi Condensed', sans-serif; font-weight: 800;">I am Component B</h1>
</template></code>

登入後複製

按照以下步驟，您可以有效地載入和使用在您的NuxtJS 應用程式中自訂具有不同字體粗細的Google 字體。

以上是如何在 NuxtJS 中高效載入不同粗細的 Google 字型？的詳細內容。更多資訊請關注PHP中文網其他相關文章！