您可以更改 Tailwind 配置中的基本字体系列吗？

Question

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

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

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

Answer 1

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

Answer 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

Answer 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 系列。

Answer 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' ),
  ],
};

Answer 5

当您 install Tailwind CSS 遵循官方指南时，应用于项目 HTML 元素的默认字体系列对应于 font-sans 实用程序class，如下（预检）；

font-family: ui-sans-serif, 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";

为了修改 Tailwind Preflight 配置，您可以使用 @layer 扩展 base，如下所示；

/*
 * Override default font-family above
 * with CSS properties for the .font-serif utility.
 */
@tailwind base;
@layer base {
  html {
    @apply font-serif;
  }
}
@tailwind components;
@tailwind utilities;

尽管是全局的（因为它适用于文档的根 HTML 元素），上述方法会覆盖 Tailwind Preflight 配置中定义的字体系列，但确保它保留在编译的 CSS，使用时。

假设您只想将“Segoe UI”与 Roboto 和 sans-serif 一起使用，因为 sans 字体系列应用于您的 HTML 元素同样的顺序，没有覆盖，使用下面的代码片段；

// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    fontFamily: {
      sans: [
        '"Segoe UI"',
        'Roboto',
        'sans-serif',
      ],
    },
  },
  plugins: [],
}

如果您希望应用新定义的 sans font-family（仍然没有覆盖）但使用 Tailwind 作为默认后备，请按以下方式修改您的脚本；

// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    fontFamily: {
      sans: [
        '"Segoe UI"',
        'Roboto',
        'sans-serif',
        ...fontFamily.sans,
      ],
    },
  },
  plugins: [],
}

请注意：在上面的最后一个场景中，应用于项目 HTML 元素的字体系列可能包含重复的字体列表，如果已经存在于 Tailwind 的 CSS 属性中=18=] utility class（上例中使用的三种字体就是这种情况）。

假设您想使用 IBM Plex Sans Variable 作为您的自定义 sans 字体，使用常规的 Tailwind CSS .font-family sans，无需覆盖，使用下面的代码片段，然后将字体导入您的项目；

// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    fontFamily: {
      sans: [
        '"IBM Plex Sans"',
        ...fontFamily.sans,
      ],
    },
  },
  plugins: [],
}

记住：使用与 tailwind.config.js 文件中相同的字体系列名称作为自定义字体的名称 - 此处："IBM Plex Sans".

Answer 6

这是添加具有良好后备功能的自定义字体的正确方法（万一浏览器无法下载字体，使用默认字体该站点应该仍然看起来很漂亮）。

将字体文件放入项目文件夹。
将字体添加到 Head 部分，以便它在所有页面中加载：

<link
            rel="preload"
            href="/fonts/inter-var-latin.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
          />

在 tailwind 全局 css 文件中提及字体，以便它适用于所有页面：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: optional;
    src: url(/fonts/inter-var-latin.woff2) format("woff2");
  }
}

告诉 tailwind 优先使用此字体。在 tailwind.config.js:

/* disable eslint errors if any */
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter", ...defaultTheme.fontFamily.sans],
      },
    },
  },
};

氛围。

要验证自定义字体是否已正确加载，请使用 WhatFont chrome ext 或转到开发工具，检查文本，然后滚动到 HTML CSS：

PS：您可以在我的 (Next.js) 网站上看到 Tailwind 自定义字体实现：https://github.com/GorvGoyl/Personal-Site-Gourav.io

您可以更改 Tailwind 配置中的基本字体系列吗？

Can you change the base font-family in Tailwind config?

css

tailwind-css