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

mi7gmzs6  于 2023-07-01  发布在  其他
关注(0)|答案(8)|浏览(270)

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

afdcj2ne

afdcj2ne1#

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

  1. module.exports = {
  2. theme: {
  3. fontFamily: {
  4. sans: ['"PT Sans"', 'sans-serif']
  5. }
  6. },
  7. }

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

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

More about tailwind font families

v7pvogib

v7pvogib2#

我使用Inter字体,这是在尝试了很多建议和教程后为我工作的内容:

  1. module.exports = {
  2. important: true,
  3. future: {
  4. removeDeprecatedGapUtilities: true,
  5. purgeLayersByDefault: true,
  6. },
  7. purge: [
  8. './components/**/*.js',
  9. './pages/**/*.js'],
  10. theme: {
  11. screens: {
  12. sm: '640px',
  13. md: '768px',
  14. lg: '1024px',
  15. xl: '1280px',
  16. },
  17. extend: {
  18. fontFamily: {
  19. sans: [
  20. '"Inter"',
  21. 'system-ui',
  22. '-apple-system',
  23. 'BlinkMacSystemFont',
  24. '"Segoe UI"',
  25. 'Roboto',
  26. '"Helvetica Neue"',
  27. 'Arial',
  28. '"Noto Sans"',
  29. 'sans-serif',
  30. '"Apple Color Emoji"',
  31. '"Segoe UI Emoji"',
  32. '"Segoe UI Symbol"',
  33. '"Noto Color Emoji"',
  34. ],
  35. },
  36. },
  37. },
  38. variants: {},
  39. plugins: [
  40. require( 'tailwindcss' ),
  41. require( 'precss' ),
  42. require( 'autoprefixer' ),
  43. ],
  44. };
展开查看全部
lx0bsm1f

lx0bsm1f3#

当你按照官方的指南使用install Tailwind CSS时,应用于你项目的HTML元素的默认字体家族对应于font-sans工具类,如下所示(Preflight);

  1. 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 如下:

  1. /*
  2. * Override default font-family above
  3. * with CSS properties for the .font-serif utility.
  4. */
  5. @tailwind base;
  6. @layer base {
  7. html {
  8. @apply font-serif;
  9. }
  10. }
  11. @tailwind components;
  12. @tailwind utilities;

虽然是全局的(因为它适用于文档的根HTML元素),但上面描述的方法会覆盖Tailwind印前检查配置中定义的font-family,但要确保在使用时仍保留在编译的CSS中。
假设你想使用“Segoe UI”与Roboto和sans-serif只作为 sans font-family应用到你的HTML元素以相同的顺序,没有覆盖,利用下面的片段;

  1. // tailwind.config.js
  2. const { fontFamily } = require('tailwindcss/defaultTheme')
  3. module.exports = {
  4. content: [
  5. './pages/**/*.{js,ts,jsx,tsx}',
  6. './components/**/*.{js,ts,jsx,tsx}',
  7. ],
  8. theme: {
  9. fontFamily: {
  10. sans: [
  11. '"Segoe UI"',
  12. 'Roboto',
  13. 'sans-serif',
  14. ],
  15. },
  16. },
  17. plugins: [],
  18. }

如果您希望应用新定义的 sansfont-family(仍然没有覆盖),但将Tailwind作为默认回退,请按以下方式修改脚本;

  1. // tailwind.config.js
  2. const { fontFamily } = require('tailwindcss/defaultTheme')
  3. module.exports = {
  4. content: [
  5. './pages/**/*.{js,ts,jsx,tsx}',
  6. './components/**/*.{js,ts,jsx,tsx}',
  7. ],
  8. theme: {
  9. fontFamily: {
  10. sans: [
  11. '"Segoe UI"',
  12. 'Roboto',
  13. 'sans-serif',
  14. ...fontFamily.sans,
  15. ],
  16. },
  17. },
  18. plugins: [],
  19. }

请注意:在上面的最后一个场景中,应用于项目的HTML元素的font-family可能包含重复的字体列表,如果已经存在于Tailwind的.font-sans实用程序类的CSS属性中(即上面示例中使用的三种字体的情况)。
假设你想使用IBM Plex Sans Variable作为你的自定义 sans 字体,使用常规的Tailwind CSS .font-familysans,不覆盖,使用下面的代码片段,然后将字体导入到你的项目中;

  1. // tailwind.config.js
  2. const { fontFamily } = require('tailwindcss/defaultTheme')
  3. module.exports = {
  4. content: [
  5. './pages/**/*.{js,ts,jsx,tsx}',
  6. './components/**/*.{js,ts,jsx,tsx}',
  7. ],
  8. theme: {
  9. fontFamily: {
  10. sans: [
  11. '"IBM Plex Sans"',
  12. ...fontFamily.sans,
  13. ],
  14. },
  15. },
  16. plugins: [],
  17. }

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

展开查看全部
uqcuzwp8

uqcuzwp84#

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

  1. <link
  2. rel="preload"
  3. href="/fonts/inter-var-latin.woff2"
  4. as="font"
  5. type="font/woff2"
  6. crossOrigin="anonymous"
  7. />

1.在tailwind全局css文件中提及字体,使其适用于所有页面:

  1. @tailwind base;
  2. @tailwind components;
  3. @tailwind utilities;
  4. @layer base {
  5. @font-face {
  6. font-family: "Inter";
  7. font-style: normal;
  8. font-weight: 100 900;
  9. font-display: optional;
  10. src: url(/fonts/inter-var-latin.woff2) format("woff2");
  11. }
  12. }

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

  1. /* disable eslint errors if any */
  2. const defaultTheme = require("tailwindcss/defaultTheme");
  3. module.exports = {
  4. theme: {
  5. extend: {
  6. fontFamily: {
  7. sans: ["Inter", ...defaultTheme.fontFamily.sans],
  8. },
  9. },
  10. },
  11. };

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

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

展开查看全部
brc7rcf0

brc7rcf05#

当我想让我的应用使用 Roboto 字体作为默认的sans字体时,这对我很有效:
tailwind.config.js中:

  1. const defaultTheme = require('tailwindcss/defaultTheme')
  2. const fontFamily = defaultTheme.fontFamily;
  3. fontFamily['sans'] = [
  4. 'Roboto', // <-- Roboto is a default sans font now
  5. 'system-ui',
  6. // <-- you may provide more font fallbacks here
  7. ];
  8. module.exports = {
  9. purge: [],
  10. theme: {
  11. fontFamily: fontFamily, // <-- this is where the override is happening
  12. extend: {},
  13. },
  14. variants: {},
  15. plugins: [],
  16. };

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

展开查看全部
vltsax25

vltsax256#

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

  1. @tailwind base;
  2. @tailwind components;
  3. @tailwind utilities;
  4. @layer base {
  5. @font-face {
  6. font-family: 'BeautifulQueen';
  7. src: url('/font/BeautifulQueen.otf');
  8. }
  9. }
  10. // rest of your css goes below

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

  1. /** @type {import('tailwindcss').Config} */
  2. const defaultTheme = require("tailwindcss/defaultTheme");
  3. module.exports = {
  4. content: [
  5. "./pages/**/*.{js,ts,jsx,tsx}",
  6. ],
  7. theme: {
  8. extend: {
  9. fontFamily: {
  10. sans: ['BeautifulQueen', ...defaultTheme.fontFamily.sans],
  11. },
  12. },
  13. },
  14. plugins: [],
  15. }

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

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

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

  1. body {
  2. padding: 0;
  3. margin: 0;
  4. }
展开查看全部
q5lcpyga

q5lcpyga7#

对我来说关键是加上

  1. , ...defaultTheme.fontFamily.sans]

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

覆盖默认字体系列

z4bn682m

z4bn682m8#

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

相关问题