javascript - 顺风使用全局本地文件中的字体

目前，我正在使用样式标签进行此操作

@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

最佳答案

您可以使用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 base;
@tailwind components;

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

@tailwind utilities;

现在重新编译CSS。如果您关注Tailwind's documentation，通常使用postcss完成:

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

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

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

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