加载中...

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 ChineseNoto Serif Simplified Chinese 会返回400错误;

这两款字体的名字分别是: Noto Sans SCNoto Serif SC

posted @ 2024-01-15 17:03  水车  阅读(175)  评论(0编辑  收藏  举报