tailwind 全局使用本地文件中的字体

Question

目前我在我的风格标签中这样做

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

* {
  font-family: 'Roboto', sans-serif;
}

但我下载了 Roboto 字体，想知道如何配置 Tailwind 以对所有元素全局使用这些文件和字体。

边注：

我正在使用 Vuejs 并按照有关如何从此处为 Vue 设置 Tailwind 的指南进行操作

https://www.youtube.com/watch?v=xJcvpuELcZo

Answer 1

如果 Tailwind 是作为项目的依赖项安装的，您可以自定义 Tailwind npm install tailwindcss

脚步：

• 复制下载的字体并将其放在fonts项目内的文件夹中。

• 运行npx tailwind init，生成一个空的tailwind.config.js

• 在里面tailwind.config.jsadd fontFamilyinsideextend并指定要覆盖的字体系列（Tailwind 的默认系列是sans）。将新添加的字体系列放在开头（顺序很重要）

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Roboto', 'Helvetica', 'Arial', 'sans-serif']
      }
    },
  },
  variants: {},
  plugins: []
}

重要提示：使用extend将添加新指定的字体系列，而不会覆盖 Tailwind 的整个字体堆栈。

然后在主tailwind.css文件中（在其中导入所有顺风功能），您可以导入本地字体系列。像这样：

@tailwind base;
@tailwind components;

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), url(./fonts/Roboto-Regular.ttf) format('ttf');
}

@tailwind utilities;

现在重新编译 CSS。如果您正在关注Tailwind 的文档，这通常是使用postcss完成的：

postcss css/tailwind.css -o public/tailwind.css

如果您不使用 postcss，则可以运行：

npx tailwindcss build css/tailwind.css -o public/tailwind.css

现在应该呈现您新添加的字体系列。

Answer 2

@Juan Marcos 的回答是正确的，但略有过时。从 v2.1.0 开始，Tailwind在他们的文档中建议使用@layer指令来加载本地字体：

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

@layer base {
  @font-face {
    font-family: Proxima Nova;
    font-weight: 400;
    src: url(/fonts/proxima-nova/400-regular.woff) format("woff");
  }
  @font-face {
    font-family: Proxima Nova;
    font-weight: 500;
    src: url(/fonts/proxima-nova/500-medium.woff) format("woff");
  }
}

通过使用 @layer 指令，Tailwind 会自动将这些样式移动到与 @tailwind 基础相同的位置，以避免意外的特异性问题。

使用 @layer 指令还将指示 Tailwind 在清除基础层​​时考虑要清除的样式。阅读我们关于优化生产的文档以了解更多详细信息。

请参阅：https : //tailwindcss.com/docs/functions-and-directives#layer

Answer 3

我的方式，完整的插件风格，一种本地字体，一种 https 字体，不需要 @import，不需要<link>：

// tailwind.config.js
const plugin = require('tailwindcss/plugin');
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Red Hat Display', ...defaultTheme.fontFamily.sans],
        'damion': ['Damion'],
      }
    }
  },
  variants: {
    extend: {},
  },
  plugins: [
    plugin(function ({ addBase }) {
      addBase({
        '@font-face': {
            fontFamily: 'Red Hat Display',
            fontWeight: '300',
            src: 'url(/src/common/assets/fonts/RedHatDisplay-VariableFont_wght.ttf)'
        }
      })
    }),
    plugin(function ({ addBase }) {
      addBase({
        '@font-face': {
            fontFamily: 'Damion',
            fontWeight: '400',
            src: 'url(https://fonts.gstatic.com/s/damion/v10/hv-XlzJ3KEUe_YZkamw2.woff2) format(\'woff2\')'
        }
      })
    }),
  ],
}

Answer 4

1 - 将下载的字体提取到文件 ex 中./fonts

2 - 在同一文件夹中创建一个样式表并添加以下代码：

@font-face {
    font-family: 'x-font-name';
    src: local('x-font-name'), local('x-font-name'),
        url('x-font-name.woff2') format('woff2'),
        url('x-font-name.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

3 - 将样式表导入到 input.css 中，其中您已经拥有基础、组件和实用程序，例如：

@import url('./assets/fonts/stylesheet.css');

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

4 - 转到 tailwind 配置文件并将字体添加到主题扩展 ex ：

theme: {
  extend: {
    fontFamily: {
      'FontName': ['x-font-name','Roboto'],
      'FontName-2': ['x-name-2','Roboto']
    },
  },
},

5 - 在 HTML ex 中使用它：class="font-FontName"