本文介绍了tailwind 全局使用本地文件中的字体的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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 内添加 fontFamilyextend 内并指定要覆盖的字体系列(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 全局使用本地文件中的字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-23 06:24
查看更多