Tailwind 中的 Typekit 字体存在问题答案

【问题标题】：Trouble with Typekit fonts in TailwindTailwind 中的 Typekit 字体存在问题
【发布时间】：2021-09-03 21:47:23
【问题描述】：

我正在尝试将 TypeKit 字体导入我的 Tailwind 配置。我已经在我的索引中包含了这样的 .css 文件：https://use.typekit.net/kcz3fka.css。在我的 tailwind.config.cjs 文件中，我有定义：

module.exports = {
  purge: ['index.html', 'src/**/*.tsx'],
  mode: 'jit',
  theme: {
    extend: {
      container: {
        center: true,
      },
      fontFamily: {
        display: ['"katarine-web"', ...theme.fontFamily.sans],
        body: ['"katarine-web"', ...theme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
};

我已经尝试转义katarine 名称以及使用和不使用双引号。两者似乎都没有按预期工作。我应该怎么做才能确保可以使用 Katarine？

【问题讨论】：

标签： tailwind-css

【解决方案1】：

试试这个，

module.exports = {
  purge: ['index.html', 'src/**/*.tsx'], // include your purge target files
  mode: 'jit',
  theme: {
    extend: { 
      container: {
        'center': true,
      },
      fontFamily: { // if you want extend 'katrarine-web', then just add them instead other originals.
        'display': ['katarine-web'],
        'body': ['katarine-web'],
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
};

另外，请查看Doc。

编码愉快:)

【讨论】：

哦，伙计，你说得对，我把默认设置在它上面拍打额头。