Tailwind CSS中的自定义谷歌字体（poppins）？

Posted 2023-03-07

技术标签:

【中文标题】Tailwind CSS中的自定义谷歌字体（poppins）？【英文标题】：Custom google font (poppins) in Tailwind CSS? 【发布时间】：2021-06-17 02:37:49 【问题描述】：

我想使用名为 poppins 的 Google 字体，这是字体 https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap 的 url。有人知道这样做很热吗？

【问题讨论】：

【参考方案1】：

将自定义字体导入 tailwindcss 项目需要三个步骤。

将字体放入项目中配置 tailwindcss 以使用该字体。使用自定义字体系列

1。 Getting the font into the project (Reply by: 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 */

Which way? According to this SO answer: mostly prefer link

2。 Configuring tailwindcss to use the font - tailwind docs

自定义字体系列

默认情况下，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 ...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 等。

3。使用自定义字体系列

使用自定义字体系列是在 fontFamily 名称中添加“字体”。在我们的例子中，font-display 和 font-sans。

    <h1 class="font-display">Example display font</h1>
    
    <p class="font-sans">Example text in body</p>

注意：在整个答案中将字体更改为 Poppins，以使文本保持一致。

【讨论】：

【参考方案2】：

如果你想直接从谷歌字体导入使用，然后在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

【讨论】：

【参考方案3】：

我在 .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 字体 url 中，如下所示：https://css-tricks.com/dont-just-copy-the-font-face-out-of-google-fonts-urls/

【讨论】：

【参考方案4】：

这就是我所做的

在你的主 scss 文件中

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

然后在顺风配置中......

theme: 
        extend: 
            fontFamily: 
                sans: ['Poppins', ...defaultTheme.fontFamily.sans],
            ,

【讨论】：

【参考方案5】：

1。导入字体

您可以使用来自 Google 字体网站的 @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'] 添加到类属性即可。

这是顺风游乐场示例： https://play.tailwindcss.com/xZpx31j8W0

【讨论】：

以上是关于Tailwind CSS中的自定义谷歌字体（poppins）？的主要内容，如果未能解决你的问题，请参考以下文章

swift ios中的自定义谷歌地图标记图标图像