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 的默认系列是）。将新添加的字体系列放在开头（顺序很重要）fontFamilyextendsansmodule.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.jsconst plugin = require('tailwindcss/plugin');const defaultTheme = require('tailwindcss/defaultTheme');module.exports = {&nbsp; purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],&nbsp; darkMode: false, // or 'media' or 'class'&nbsp; theme: {&nbsp; &nbsp; extend: {&nbsp; &nbsp; &nbsp; fontFamily: {&nbsp; &nbsp; &nbsp; &nbsp; 'sans': ['Red Hat Display', ...defaultTheme.fontFamily.sans],&nbsp; &nbsp; &nbsp; &nbsp; 'damion': ['Damion'],&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; },&nbsp; variants: {&nbsp; &nbsp; extend: {},&nbsp; },&nbsp; plugins: [&nbsp; &nbsp; plugin(function ({ addBase }) {&nbsp; &nbsp; &nbsp; addBase({&nbsp; &nbsp; &nbsp; &nbsp; '@font-face': {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontFamily: 'Red Hat Display',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontWeight: '300',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src: 'url(/src/common/assets/fonts/RedHatDisplay-VariableFont_wght.ttf)'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }),&nbsp; &nbsp; plugin(function ({ addBase }) {&nbsp; &nbsp; &nbsp; addBase({&nbsp; &nbsp; &nbsp; &nbsp; '@font-face': {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontFamily: 'Damion',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontWeight: '400',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src: 'url(https://fonts.gstatic.com/s/damion/v10/hv-XlzJ3KEUe_YZkamw2.woff2) format(\'woff2\')'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }),&nbsp; ],}

Answer 4

1 - 将下载的字体提取到文件 ex 中./fonts2 - 在同一文件夹中创建样式表并添加以下代码：@font-face {&nbsp; &nbsp; font-family: 'x-font-name';&nbsp; &nbsp; src: local('x-font-name'), local('x-font-name'),&nbsp; &nbsp; &nbsp; &nbsp; url('x-font-name.woff2') format('woff2'),&nbsp; &nbsp; &nbsp; &nbsp; url('x-font-name.woff') format('woff');&nbsp; &nbsp; font-weight: normal;&nbsp; &nbsp; font-style: normal;&nbsp; &nbsp; font-display: swap;}3 - 将样式表导入到 input.css 中，其中您已经拥有基础、组件和实用程序，例如：@import url('./assets/fonts/stylesheet.css');@tailwind base;@tailwind components;@tailwind utilities;4 - 转到 tailwind 配置文件并将字体添加到主题扩展 ex ：theme: {&nbsp; extend: {&nbsp; &nbsp; fontFamily: {&nbsp; &nbsp; &nbsp; 'FontName': ['x-font-name','Roboto'],&nbsp; &nbsp; &nbsp; 'FontName-2': ['x-name-2','Roboto']&nbsp; &nbsp; },&nbsp; },},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']}},“标题”这个名字可以在这里自由选择！