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