在Nuxt 中高效加載Google 字體
問題：
問題：問題：
在NuxJS 項目中使用者想要對兩個不同的組件使用具有不同字體粗細（600 和800）的Saira Semi Condensed 字體。但是，匯入具有不同粗細的相同字體的兩個 Google Font 連結會導致冗餘，並導致字體粗細應用程式出現潛在問題。
解決方案：
export default {
buildModules: [
[
'@nuxtjs/google-fonts',
{
families: {
'Saira Semi Condensed': {
wght: [600, 800],
},
},
// Other options here...
},
],
],
}建議的方法是透過頁面源自行託管或代理 Google Font 文件，而不是使用 CDN。 Nuxt 提供了 @nuxtjs/google-fonts 模組，可以高效且可自訂地載入 Google 字型。使用方法如下：
<link rel="preload" href="/fonts/SairaSemiCondensed-wght@600.woff2" as="font" type="font/woff2" crossorigin="anonymous"> <link rel="preload" href="/fonts/SairaSemiCondensed-wght@800.woff2" as="font" type="font/woff2" crossorigin="anonymous">
Layout.vue（頭部部分）：
footer {
font-family: 'Saira Semi Condensed', sans-serif;
font-weight: 600; /* or 800 for ComponentB */
}注意：
將/fonts 替換為下載字型檔案的正確路徑。 ComponentA.vue 或ComponentB.vue（樣式部分）：此方法可確保下載特定的字體粗細並將其套用到對應的元件，從而無需多個CDN 連結。以上是如何在Nuxt中高效載入不同字體粗細的Google字體？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
