您可以在顺风配置中更改基本字体系列吗？答案

【问题标题】：Can you change the base font-family in Tailwind config?您可以在顺风配置中更改基本字体系列吗？
【发布时间】：2020-06-26 18:54:17
【问题描述】：

我在tailwind.config.js 文件中添加了新的字体系列。这些在.font-sans 类中可用，但我也想更改全局字体系列。 'tailwindcss/base' 导入在 html, body 选择器上添加了一个通用的无衬线系列。

有没有办法在配置文件中更改这个全局字体系列，而不仅仅是添加新样式来撤消它？

我希望将整体 CSS 保持在最低限度，并且不必添加额外的 CSS 来撤消我不需要的样式。我在文档中看不到任何适用于此的选项。

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

是的，请在此处查看配置 tailwind.config.js 的文档：https://tailwindcss.com/docs/configuration/

【讨论】：

感谢您，但这些文档没有提及如何更改出现在 'tailwindcss/base' 导入中的默认字体系列。我已成功添加新系列，但我想更改默认值而不是覆盖它。我猜这不是可以改变的东西，但它似乎很奇怪，因为其他一切都是可配置的。
这可能是一条评论

【解决方案2】：

对我来说，它可以覆盖“sans”，因为这是默认使用的。

module.exports = {
  theme: {
    fontFamily: {
      sans: ['"PT Sans"', 'sans-serif']
    }
  },
}

（请注意，theme.fontFamily 覆盖了 3 个默认值，因此如果您复制粘贴上面的代码，则会丢失 font-serif 和 font-mono）

但是用衬线堆栈之类的东西覆盖“sans”会很奇怪，所以在这些情况下，您可以定义堆栈并将其应用于 html/body 标记：

<body class="font-serif"> <!-- Or whatever your named your font stack -->

More about tailwind font families

【讨论】：

【解决方案3】：

当我希望我的应用程序使用 Roboto 字体作为默认的无字体时，这对我有用：

在tailwind.config.js:

const defaultTheme = require('tailwindcss/defaultTheme')

const fontFamily = defaultTheme.fontFamily;
fontFamily['sans'] = [
  'Roboto', // <-- Roboto is a default sans font now
  'system-ui',
  // <-- you may provide more font fallbacks here
];

module.exports = {
  purge: [],
  theme: {
    fontFamily: fontFamily, // <-- this is where the override is happening
    extend: {},
  },
  variants: {},
  plugins: [],
};

此覆盖变体仅修改 font-sans 系列并保留 font-serif 和 font-mono 系列。

【讨论】：

【解决方案4】：

我使用 Inter 字体，在尝试了很多建议和教程数小时后，这对我有用：

module.exports = {
  important: true,
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: [
    './components/**/*.js',
    './pages/**/*.js'],
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    extend: {
      fontFamily: {
        sans: [
          '"Inter"',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          '"Segoe UI"',
          'Roboto',
          '"Helvetica Neue"',
          'Arial',
          '"Noto Sans"',
          'sans-serif',
          '"Apple Color Emoji"',
          '"Segoe UI Emoji"',
          '"Segoe UI Symbol"',
          '"Noto Color Emoji"',
        ],
      },
    },
  },
  variants: {},
  plugins: [
    require( 'tailwindcss' ),
    require( 'precss' ),
    require( 'autoprefixer' ),
  ],
};

【讨论】：