Tailwind 不在生产版本中应用自定义字体系列

Posted 2023-02-22

【中文标题】Tailwind 不在生产版本中应用自定义字体系列

【英文标题】：Tailwind does not apply custom font family in production build

【发布时间】：2020-11-23 06:15:12

【问题描述】：

我现在正在使用带有 Tailwind 的 Vue。

这是我当前的 Tailwind 配置：

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = 
  purge: [],
  theme: 
    extend: 
      fontFamily: 
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      ,
    ,
  ,
  variants: ,
  plugins: [],

我正在使用Inter var 字体，因为在 OSX 系统上，默认字体粗细不起作用。现在，我想构建这个项目，但在生产版本中它没有应用正确的字体系列。我尝试通过 html 链接和 css 导入来导入字体系列，但这些都不起作用。

【问题讨论】：

你从哪里导入这个字体文件/字体？

用于开发，它在我的电脑上。但我尝试通过 index.html 文件中的 html 链接和 tailwind css 文件中的 css 导入来导入字体。

【参考方案1】：

如果您使用的是 Vue-CLI，我建议您通过 NPM 添加 the typeface 以实现可维护性，并将其导入您的入口文件（例如 main.js）。这个包将负责为您引用和导入 webfont(s)，因此不再需要创建额外的 CSS。

安装字体

npm i typeface-inter

导入

import Vue from 'vue';
import 'typeface-inter';
// ...

当然，您仍然需要extend the font-family（或者只需将其添加到列表中也可以）。

【讨论】：

还是不行。我尝试导入另一种字体，但问题仍然存在。

您目前如何确认是否未应用所需的字体？我假设您知道，如果其他字体不存在/未安装在机器上，它只会回退到 字体。

可能值得尝试将此字体添加到集合中而不是扩展它，然后明确定位此特定字体并将其应用于特定元素。

这很奇怪。我创建了一个额外的集合，只指定了 Inter，应用了这个类，这很好。

这是 PostCSS 的问题。一切都很好。无论如何，谢谢！