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

用@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");

  }

}

Answer 2

如果 Tailwind 作为项目的依赖项安装，您可以使用npm install tailwindcss

脚步：

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

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

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

module.exports = {

  theme: {

    extend: {

      fontFamily: {

        'sans': ['Roboto', 'Helvetica', 'Arial', 'sans-serif']

      }

    },

  },

  variants: {},

  plugins: []

}

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

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

@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 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"

Answer 5

第 1 步：下载字体并将其保存在本地您转到右上角的“下载系列”按钮，您将获得一个具有不同字体粗细的 zip 或文件夹。从我们下载的文件中，我们将文件static/Oswald-Bold.ttf 移动到我们创建的新文件夹 /dist/fonts/Oswald。

步骤 2：本地导入字体在@layer base内的tailwind.css 以及我们添加的标题上方：

@font-face {

font-family: Oswald;

src: url(/dist/fonts/Oswald/Oswald-Bold.ttf) format("truetype") or ttf;

如果我们现在运行npm run watch，字体系列会立即编译到 styles.css 中，如果我们搜索“Oswald”，我们会得到： 提示：如果出现问题，您可以单击中的链接按住“CTRL”键查看URL，看看路径是否正确！

**步骤 3：** 扩展 Tailwindcss 主题 在tailwind.config.js 中，我们在“主题”和“扩展”下添加：

theme: {

extend: {

fontFamily: {

headline: ['Oswald']

}

},

“标题”这个名字可以在这里自由选择！