Tailwind 中的 Typekit 字体存在问题

Posted 2023-03-07

【中文标题】Tailwind 中的 Typekit 字体存在问题

【英文标题】：Trouble with Typekit fonts in Tailwind

【发布时间】：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？

【参考方案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。

编码愉快:)

【讨论】：

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