nuxt3:添加谷歌免費字體以及遇到的坑

前言

爲了保證項目呈現的一致性，web往往需要添加一個字體文件到項目中。這裏推薦直接實現 @nuxtjs/google-fonts

正文

安裝配置依賴

安裝依賴

yarn add -D @nuxtjs/google-fonts

配置依賴

// nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/google-fonts'],
  googleFonts: {
        families: {
            'Noto Sans SC': [200, 400, 600, 800],  // 中文無襯線字體
            'Noto Serif SC': true , // 中文襯線體
            // 更多字體到 https://fonts.google.com/?noto.script=Hans 這裏查看，各種語言字體都有，而且全部免費商用
        }
    },
})

使用

使用時直接給css定義對應字體名稱即可

html{
    font-family: 'Noto Sans SC', monospace;
}

......


<div class="text-2xl" style="font-family: 'Noto Sans SC'">這裏是中文字體</div>

後記

這裏說兩個坑，google 太TM 噁心了，感覺故意欺負我們，中文的兩款字體在下載時，居然和標題不一樣

就是這兩款字體，如果在nuxt中直接配置 Noto Sans Simplified Chinese 和 Noto Serif Simplified Chinese 會返回400錯誤；

這兩款字體的名字分別是： Noto Sans SC 和 Noto Serif SC