nuxt3:添加谷歌免费字体以及遇到的坑

前言#

为了保证项目呈现的一致性，web往往需要添加一个字体文件到项目中。这里推荐直接实现 @nuxtjs/google-fonts

google 字体 官网

正文#

安装配置依赖#

安装依赖#

yarn add -D @nuxtjs/google-fonts

配置依赖#

// nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/google-fonts'],
  googleFonts: {
        families: {
            // 中文字体不要使用 'Noto Sans SC': [400,700] 这种多个字体格式，没有效果，还会增加文件大小
            'Noto Sans SC': true,  // 中文无衬线字体,
            'Noto Serif SC': true , // 中文衬线体
            // 更多字体到 https://fonts.google.com/?noto.script=Hans 这里查看，各种语言字体都有，而且全部免费商用
        },
        download: true, // 将字体下载到本地，并且打包到项目里，防止用户访问不了google字体服务器
        base64: false, // 不要使用 base64格式，不然首页下载文件会非常大
        overwriting: true,
        outputDir: 'assets/fonts' // 本地字体文件目录，下载的字体会放到这个目录里
    },
})

使用#

使用时直接给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