css 你能在Tailwind配置中改变基本字体家族吗？

mi7gmzs6 于 2023-07-01 发布在其他

关注(0)|答案(8)|浏览(267)

我在tailwind.config.js文件中添加了新的字体系列。.font-sans类提供了这些，但我也想更改全局字体家族。'tailwindcss/base'导入在html, body {}选择器上添加了一个通用的sans-serif系列。
有没有办法在配置文件中更改这个全局字体家族，而不是仅仅添加一个新的样式来撤消它？
我想保持整体的CSS到最低限度，而不必添加额外的CSS来撤销我不需要的样式。我在文档中看不到任何适用于此的选项。

css

来源：https://stackoverflow.com/questions/60692794/can-you-change-the-base-font-family-in-tailwind-config

8条答案

按热度按时间

afdcj2ne1#

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

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

(Note fontFamily覆盖了3个默认值，所以如果你复制粘贴上面的代码，你会丢失font-serif和font-mono）
但是用serif堆栈之类的东西覆盖'sans'会很奇怪，所以在这些情况下，你可以定义堆栈并将其应用于html/body标签：

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

More about tailwind font families

赞(0）回复(0）举报 2023-07-01

v7pvogib2#

我使用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' ),
  ],
};

赞(0）回复(0）举报 2023-07-01

lx0bsm1f3#

当你按照官方的指南使用install 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扩展 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印前检查配置中定义的font-family，但要确保在使用时仍保留在编译的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: [],
}

如果您希望应用新定义的 sansfont-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元素的font-family可能包含重复的字体列表，如果已经存在于Tailwind的.font-sans实用程序类的CSS属性中（即上面示例中使用的三种字体的情况）。
假设你想使用IBM Plex Sans Variable作为你的自定义 sans 字体，使用常规的Tailwind CSS .font-familysans，不覆盖，使用下面的代码片段，然后将字体导入到你的项目中;

// 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"。

赞(0）回复(0）举报 2023-07-01

uqcuzwp84#

这是添加自定义字体的正确方法，并具有良好的后备功能（如果浏览器无法下载字体，则站点仍应使用默认字体显示）。
1.把字体文件放到你的项目文件夹里。
1.将字体添加到Head部分，以便在所有页面中加载：

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

1.在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");
  }
}

1.告诉顺风优先考虑这个字体。在tailwind.config.js中：

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

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

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

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

赞(0）回复(0）举报 2023-07-01

brc7rcf05#

当我想让我的应用使用 Roboto 字体作为默认的sans字体时，这对我很有效：
在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系列。

赞(0）回复(0）举报 2023-07-01

vltsax256#

我有一个自定义下载的字体，所以我这样做：下载一个免费的字体（例如BeautifulQueen.otf）并将其放入public/font文件夹。转到globals.css文件，其中包含tailwindcsscss内容（@tailwind base;@尾风组件;@顺风公用事业;）在文件/styles/globals. css后添加此内容

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  @font-face {
    font-family: 'BeautifulQueen';
    src: url('/font/BeautifulQueen.otf');
  }
}
// rest of your css goes below

现在转到根文件夹file/tailwind.config.js中的tailwind.config.js文件

/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['BeautifulQueen', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
}

您只需要fontFamily和sans line。Sans是tailwind的默认字体名称，您正在将第一种字体覆盖为自定义字体。
它是如何工作的：Tailwind配置文件无：'BeautifulQueen'链接到您的css @font-face名称font-family：'BeautifulQueen'，它使用您的字体文件位置的src源。邮箱：info@beautifulqueen.com
注意：在globals.css文件中，删除正在使用的任何字体系列（例如在Nextjs中，它会自动创建

body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

您需要注解掉或删除正在引用的字体系列，例如下面。如果你不删除它，你将使用它，而不是你的自定义字体。

body {
  padding: 0;
  margin: 0;
}

赞(0）回复(0）举报 2023-07-01

q5lcpyga7#

对我来说关键是加上

, ...defaultTheme.fontFamily.sans]

在

fontFamily: {
   sans: ["Inter", ...defaultTheme.fontFamily.sans],
},

覆盖默认字体系列

赞(0）回复(0）举报 2023-07-01

z4bn682m8#

是的，看看文档配置tailwind.config.js在这里：https://tailwindcss.com/docs/configuration/

赞(0）回复(0）举报 2023-07-01

我来回答

css 你能在Tailwind配置中改变基本字体家族吗？

8条答案

相关问题

热门标签

最新问答