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

如果使用 npm install tailwindcss

作为项目的依赖项安装 Tailwind，您可以自定义它

步骤：

复制下载的字体并将其放入项目中的 fonts 文件夹中。
运行npx tailwind init，生成一个空的tailwind.config.js
在 tailwind.config.js 内添加 fontFamily 在 extend 内并指定要覆盖的字体系列（Tailwind 的默认系列是 sans）。将新添加的字体系列放在开头(order matters)

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's documentation, this is typically done using postcss:

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

如果你没有使用 postcss，你可以运行:

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

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

Answer 2

我知道这是针对 JavaScript 的，但如果有人将其用于 Flask 和 Tailwind CSS（就像我一样），这就是我必须做的。我将字体放在静态文件夹中的单独 CSS 文件中。在我的 HTML 模板中，我只是在链接我的 Tailwind CSS 文件后链接样式 sheet。

<link rel="stylesheet" href="{{ url_for('static', filename='gameStyles.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='styles2.css') }}"/>

仅供参考，这是我在 styles2.css 中输入的内容：

@font-face {
    font-family: 'reg';
    src: url(../static/ObjectSans-Regular.otf);
}

@font-face {
    font-family: 'bol';
    src: url(../static/ObjectSans-Heavy.otf);
}

body {
    font-family: 'reg';
}

h1 {
    font-family: 'bol';
}

如果有更好的方法来做这件事就好了，但这是我让它工作的唯一方法。希望这对您有所帮助！

Answer 3

@Juan Marcos 的回答是正确的，但略有过时。从 v2.1.0 开始，Tailwind 建议 in their docs 使用 @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");
  }
}

By using the @layer directive, Tailwind will automatically move those styles to the same place as @tailwind base to avoid unintended specificity issues.

Using the @layer directive will also instruct Tailwind to consider those styles for purging when purging the base layer. Read our documentation on optimizing for production for more details.

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

另请参阅：Customizing the default font

Answer 4

我只是在 index.css 中添加这个 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500&display=swap'); 并使用以下内容更新 tailwind.config.js :

theme: {
      fontFamily: {
        sans: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
        serif: ['Merriweather', 'serif'],
      },

Answer 5

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

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

@font-face {
font-family: Oswald;
src: url(/dist/fonts/Oswald/Oswald-Bold.ttf) format("truetype") or ttf;

如果我们现在运行 npm 运行 watch ，font-family 会立即编译成 styles.css，如果我们搜索“Oswald”，我们得到：提示：如果有什么不起作用，您可以在按住 URL 的同时单击 link “CTRL”键查看路径是否正确！

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

theme: {
extend: {
fontFamily: {
headline: ['Oswald']
}
},

头条这个名字可以随意选择！

Answer 6

我们可以通过两步在 tailwind 中添加自定义字体系列：

添加自定义字体

我们可以从 fonts.googleapis.com 导入字体并将其添加到 index.html 头部，或者我们可以使用 @import、@font-face:

<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">

扩展 tailwind 字体系列

接下来，我将在 tailwind.config.js 中扩展 tailwind font-family sans:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  purge: [],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Raleway', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {},
  plugins: [],
}

Answer 7

我的方式，全插件风格，一种本地字体，一种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',
            fontWheight: '300',
            src: 'url(/src/common/assets/fonts/RedHatDisplay-VariableFont_wght.ttf)'
        }
      })
    }),
    plugin(function ({ addBase }) {
      addBase({
        '@font-face': {
            fontFamily: 'Damion',
            fontWheight: '400',
            src: 'url(https://fonts.gstatic.com/s/damion/v10/hv-XlzJ3KEUe_YZkamw2.woff2) format(\'woff2\')'
        }
      })
    }),
  ],
}

Answer 8

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.config 将您的字体添加到主题扩展 ex :

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

5 - 在 HTML 中使用它，例如：class="font-FontName"

tailwind 在全局范围内使用本地文件中的字体

tailwind use font from local files globally

javascript

html

css

tailwind-css