Mar*_*yah 9 import fonts google-fonts tailwind-css
我想使用名为 poppins 的 Google 字体，这是该字体的 url https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap。有谁知道要这样做吗？
not*_*tch 15
将自定义字体添加到 tailwindcss 项目中需要三个步骤。
Tailwind 不会做任何特殊的自动导入字体或任何操作，因此您需要像在常规项目中一样导入它们，或者通过将 Google 样式表引用添加到 HTML 顶部，如下所示：
<!-- index.html or similar -->
<head>
...
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
...或者通过在 CSS 文件开头使用 @font-face 声明导入字体：
/* Example file: styles.css */
/* poppins-regular - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url('../fonts/poppins-v15-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/poppins-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/poppins-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/poppins-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/poppins-v15-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}
默认情况下，Tailwind 提供三种字体系列实用程序：跨浏览器无衬线堆栈、跨浏览器衬线堆栈和跨浏览器等宽堆栈。您可以通过编辑 Tailwind 配置的 theme.fontFamily 部分来更改、添加或删除这些内容。
// tailwind.config.js
module.exports = {
theme: {
fontFamily: {
// Note: This is @notapatch and not the docs
// I think what it is trying to say is that if you define
// a custom font here you are also removing the default
// font families sans, serif and mono.
//
- 'sans': ['ui-sans-serif', 'system-ui', ...],
- 'serif': ['ui-serif', 'Georgia', ...],
- 'mono': ['ui-monospace', 'SFMono-Regular', ...],
+ 'display': ['Poppins', ...],
+ 'body': ['"Open Sans"', ...],
}
}
}
// 文档结束：
font-family 文档没有涵盖这一点，但我已经看到了扩展 font-family 而不是删除默认字体 sans serif 和 mono 的示例......这是来自 simonswiss 的 github 问题
// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
+ extend: {
fontFamily: {
sans: ['Poppins', ...defaultTheme.fontFamily.sans]
}
+ }
}
}
...将 Poppins 添加到 font-sans 堆栈中，并保留其他字体系列，如 font-mono、font-serif 等。
使用自定义字体系列只需在 fontFamily 名称中添加“font”即可。在我们的例子中，font-display并且font-sans.
<h1 class="font-display">Example display font</h1>
<p class="font-sans">Example text in body</p>
注意：将整个答案的字体更改为 Poppins，以保持文本之间的一致性。
如果您想直接从 Google 字体导入并使用它，请<link>在文件<head>的您的部分中添加index.html。
然后在你的tailwind.config.js文件中
module.exports = {
theme: {
extend: {
fontFamily: {
'poppins': ['Poppins'],
}
}
}
}
通过在其中定义您自己的字体extend将保留默认主题字体并添加/扩展您自己的字体。
现在，您可以将字体与类font-poppins一起使用font-sans，您可以通过将后备字体添加到poppins主题扩展中的数组中来添加后备字体。
更多内容请参考以下链接， https://tailwindcss.com/docs/theme
https://tailwindcss.com/docs/font-family#customizing
您可以使用@import...Google Font 网站中的指令将 Web 字体导入您的global.css文件中。请务必将该指令放在开头，否则无效
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
正如其他答案所提到的，您可以配置tailwind.config.js以在项目中生成可重用的实用程序。此外，您还可以使用方括号表示法动态生成类。只需添加font-['Poppins']到类属性即可。
这是顺风游乐场示例： https://play.tailwindcss.com/xZpx31j8W0
.css我在文件中有这个配置
@font-face {
font-display: swap;
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
src: local('Nunito Regular'), local('Nunito-Regular'),
url('~assets/fonts/Nunito-400-cyrillic-ext1.woff2') format('woff2');
}
这在我的tailwind.config.js文件中
fontFamily: {
// https://tailwindcss.com/docs/font-family#customizing
sans: [
'Nunito'
],
},
因此我可以在我的标记中使用它
<p class="font-sans">
I'm a sans-serif paragraph.
</p>
所以是的，我的字体是本地的，但也许我的配置可以让您了解如何在您这边设置它。
然后，您可以url在 google 字体 url 中设置 font-face 的键，如下所示： https: //css-tricks.com/dont-just-copy-the-font-face-out-of-google-fonts-urls /
| 归档时间： |
|
| 查看次数： |
39337 次 |
| 最近记录： |