我想使用名为 poppins 的谷歌字体，这是字体 https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap 的网址。有谁知道这样做很热吗？
答案 0 :(得分：1)
我在 .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>
是的，我的字体是本地的，但也许我的配置可以让您了解如何在您这边设置它。
然后，您可以在 google fonts url 中设置 font-face 的 url 键，如下所示：https://css-tricks.com/dont-just-copy-the-font-face-out-of-google-fonts-urls/
答案 1 :(得分：1)
如果你想直接从谷歌字体导入使用，
然后在您的 <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
答案 2 :(得分：1)
将自定义字体添加到 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 */
}
Which way? According to this SO answer: mostly prefer link
默认情况下，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"', ...],
}
}
}
// 文档结束：
字体系列文档没有涵盖这一点，但我已经看到扩展字体系列而不是删除默认字体 sans serif 和 mono ... this is from a github issue by simonswiss
// 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-display 和 font-sans。
<h1 class="font-display">Example display font</h1>
<p class="font-sans">Example text in body</p>
注意：在整个答案中将字体更改为 Poppins，以确保文本之间的一致性。