logo标签列表

如何在Tailwind CSS中使用自定义的谷歌字体（Poppins）？

importfontstailwind-cssgoogle-fonts
9

我想使用名为Poppins的Google字体，其URL为https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap。有人知道如何做吗？

5个回答
13

将自定义字体添加到tailwindcss项目中需要三个步骤：

  1. 将字体文件导入项目。
  2. 配置tailwindcss以使用该字体。
  3. 使用自定义字体。

1. 将字体文件导入项目 (回复者: Adam Wathan)

在这方面，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 */
}

哪种方式？根据这个 Stack Overflow 答案：大多数人更喜欢链接

2. 配置 tailwindcss 使用字体 - tailwind 文档

自定义字体族

默认情况下，Tailwind 提供三个字体家族工具：跨浏览器 sans-serif 堆叠、跨浏览器 serif 堆叠和跨浏览器等宽字体堆叠。您可以通过编辑 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"', ...],
          }
        }
      }

使用 extend 自定义字体族

虽然 font-family 的文档没有涵盖此项内容，但我看到过一些示例是通过扩展字体族而不是删除默认的 sans-serif 和 monospace 字体... 这来自 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，以保持文本的一致性。

8
如果您想直接从Google字体库中导入并使用它， 则需要在您的index.html文件的<head>部分添加<link>。
然后，在您的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

6

1. 导入字体

你可以使用 Google Font 网站的 @import... 指令来导入网页字体到你的 global.css 文件中，记得将这个指令放在文件的开头位置，否则会无效。

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

2. 使用字体

如其他答案所提到的，你可以配置tailwind.config.js以在项目中生成可重用的工具类。此外，你也可以使用方括号符号来实时生成一个类名。只需将font-['Poppins']添加到类属性中即可。

这里是Tailwind Playground示例：https://play.tailwindcss.com/xZpx31j8W0

2

这是我所做的：

在你的主要 SCSS 文件中

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

然后在 Tailwind 配置中...

theme: {
        extend: {
            fontFamily: {
                sans: ['Poppins', ...defaultTheme.fontFamily.sans],
            },
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>

所以，我的字体是本地的，但也许我的配置可以给你一些启示，让你在自己的网站上设置它。
然后，你可以使用 font-face 的 "url" 键来设置 Google Fonts 的 URL，如此处所示：https://css-tricks.com/dont-just-copy-the-font-face-out-of-google-fonts-urls/。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接