Tailwind css laravel mix 添加字体答案

【问题标题】：Tailwind css laravel mix add fontsTailwind css laravel mix 添加字体
【发布时间】：2020-11-04 20:12:39
【问题描述】：

我正在尝试将 tailwndo css 用于 laravel 中的一个项目，我想为整个应用程序维护 nunito 字体，但 Tailwind 有自己的字体集。有人知道怎么改吗？

【问题讨论】：

【解决方案1】：

将字体连接到项目（就像您通常做的那样），然后将您的字体添加到tailwind.config.js

module.exports = {
  theme: {
    fontFamily: {
     'sans': ['-apple-system', 'BlinkMacSystemFont', ...],
     'serif': ['Georgia', 'Cambria', ...],
     'mono': ['SFMono-Regular', 'Menlo', ...],
     'your-font': ['Your Font', ...]
    }
  }
}

https://tailwindcss.com/docs/font-family/#app

【讨论】：

我得到了这一步，但它似乎不起作用我认为我添加字体的方式错误。如何在 laravel 中添加字体？
С选择你想要的字体粗细fonts.google.com/specimen/… (Screen)。从“嵌入”选项卡复制代码并将其添加到您的head 中的app.blade.php。然后在你的tailwind.config中添加'nunito': ['Nunito', 'sans-serif']

【解决方案2】：

tailwind.config.js：

theme: {
    extend: {
        fontFamily: {
            body: ['Rowdies']
        }
    }
  },

css\app.css

@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300&display=swap');

外壳：

npm run dev
or 
npm run watch

现在您可以在任何您想要的标签中使用.font-body 类例如：

<body class="font-body">
  <h1>Hello World!</h1>
</body>

字体 + 正文 = 字体正文

fontFamily: {
            body: ['Open Sans']
        }

（你可以改变身体）

【讨论】：