您可以在顺风配置中更改基本字体系列吗？
我在我的tailwind.config.js文件中添加了新的字体系列。这些在.font-sans类中可用，但我也想更改全局字体系列。在'tailwindcss/base'进口增加了一个通用的无衬线字体家族的html, body选择。
有没有办法在配置文件中更改此全局字体系列，而不仅仅是添加新样式来撤消它？
我想将整体 css 保持在最低限度，而不必添加额外的 css 来撤消我不需要的样式。我在文档中看不到任何适用于此的选项。
小智 18
对我来说，它可以覆盖“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 -->
nye*_*eke 10
当您按照官方指南安装Tailwind CSS 时，适用于您项目的 HTML 元素的默认字体系列对应于font-sans实用程序类，如下所示（Preflight）；
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扩展底座；
/*
* 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 font-family 以相同的顺序应用于 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 （仍然不覆盖）但使用 Tailwind 作为默认后备，请按如下所示修改您的脚本； font-family
// 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 属性中）.font-sans请注意：在上面的最后一个场景中，如果已经存在于 Tailwind实用程序类的 CSS 属性中（即在项目中使用的三种字体的情况）上面的例子）。
假设您想要使用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"。
这是添加具有良好后备功能的自定义字体的正确方法（如果浏览器无法下载字体，则该网站在使用默认字体时仍然应该看起来很漂亮）。
将字体文件放入您的项目文件夹中。
将字体添加到
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.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
当我希望我的应用程序使用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。
小智 5
我使用 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' ),
],
};