如何使用本地 Google Fonts 模块和 Tailwind 设置 Nuxt？

Question

我似乎无法在我的应用程序中渲染衬线字体“Source Serif Pro”。我还设置了“Roboto”，它渲染得很好。我在 tailwind 配置中尝试了几种不同的方法...数组...字符串...双引号中的字体堆栈，如 Tailwind 网站上所述。
不确定我在这里缺少什么？

顺风配置

module.exports = {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  theme: {
    fontFamily: {
      roboto: ['Roboto', 'sans'],
      source: ['Source Serif Pro', 'serif'],
    },
    extend: {
      colors: {
        gray: {
          50: '#f4f4f4',
          100: '#000029',
          200: '#bebebe',
          300: '#555555',
          400: '#444444',
          500: '#3e3e3e',
        },
        tan: {
          400: '#d1b991',
          500: '#caae7f',
        },
        green: {
          400: '#008059',
          500: '#006846',
        },
      },
    },
  },
};

“构建模块”中的 nuxt 配置

[
  '@nuxtjs/google-fonts',
  {
    families: {
      Roboto: {
        wght: [400, 700],
      },
      'Source+Serif+Pro': {
        wght: [400, 600],
      },
    },
    subsets: ['latin'],
    display: 'swap',
    prefetch: false,
    preconnect: false,
    preload: false,
    download: true,
    base64: false,
  },
],

Answer 1

你需要做：

• 以下有一个工作的Nuxt字体模块，几乎就是你所做的
• 需要将给定字体引用到 Tailwind 中，正如您所实现的那样
• 不要忘记在本地引用字体就像这样

---

例如

Nunito

@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'),
    url('~assets/fonts/Nunito-400-cyrillic-ext1.woff2') format('woff2');
}

Answer 2

Nuxt Google 字体使用起来有点有趣。我尝试工作并最终卸载了该软件包。尝试使用

@font-face

在本地托管字体文件，并使用 Nuxt Config

css

属性访问它们。

我遵循了 Gabriel Aigner 的指南，让它为我工作。