tailwind 全局使用本地文件中的字体 [英] tailwind use font from local files globally

问题描述

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

Currently I'm doing this in my style tags

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

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

但我下载了 Roboto 字体并想知道如何配置 Tailwind 以将这些文件和字体全局用于所有元素.

but I downloaded the Roboto font and would like to know how I can configure Tailwind to use those files and the font globally for all elements.

旁注:

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

I'm using Vuejs and followed the guide on how to setup Tailwind for Vue from here

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

推荐答案

如果使用 npm install tailwindcss

步骤:

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

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

在 tailwind.config.js 内添加 fontFamily 在 extend 内并指定要覆盖的字体系列(Tailwind 的默认系列是 <代码>sans).将新添加的字体系列放在开头(订单事项)

Inside tailwind.config.js add fontFamily inside extend and specify the font family to override (Tailwind's default family is sans). Place the newly added font family at the beginning (order matters)

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

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

Important: Using extend will add the newly specified font families without overriding Tailwind's entire font stack.

然后在主 tailwind.css 文件(在其中导入所有 Tailwind 功能)中，您可以导入本地字体系列.像这样:

Then in the main tailwind.css file (where you import all of tailwind features), you can import your local font family. Like this:

@tailwind base;
@tailwind components;

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

@tailwind utilities;

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

Now recompile the CSS. If you're following Tailwind's documentation, this is typically done using postcss:

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

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

If you're not using postcss, you can run:

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

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

Your newly added font family should now be rendered.

这篇关于tailwind 全局使用本地文件中的字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！