使用 TailwindCSS 时，Google 字体无法在移动设备上呈现答案

【问题标题】：Google Fonts does not render on mobile devices when using TailwindCSS使用 TailwindCSS 时，Google 字体无法在移动设备上呈现
【发布时间】：2021-10-20 01:39:20
【问题描述】：

我正在使用 TailwindCSS 创建一个投资组合网站。不使用任何花哨的东西，只是使用 Tailwind 的静态网站。

最近，我的 Google 字体中的“Inter”字体无法在移动浏览器上呈现。在我扩展几种颜色时突然停止工作之前它正在工作。

奇怪的是，使用 Chrome 和 Safari 中的开发工具，在具有移动屏幕尺寸的桌面浏览器上一切正常。

有谁知道似乎是什么问题或遇到了同样的问题？

提前致谢！

这是我的代码：

我的 src css 文件：

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

我的 tailwind.config.js 文件：

module.exports = {
  purge: {
    mode:'layers',
    content:['./public/**/*.html/']
  },
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    
    extend: {

      fontFamily: {
        'body': ['Inter'],
      },

      colors: {
        cwc: {
          red:'#FF0000',
        },

        black: {
          900:'#000000',
          800:'#0D0D0D',
          700:'#191919',
          600:'#333333',
        },

        bg: {
          white:'#F6F9FC',
        },

        text: {
          primary:'#0b0014',
          paragraph:'#61656b',
          secondary:'#61656b',
          tertiary:'#90959D',
          highlight:'#1f66ff',
        },

        button: {
          neutral:'#676B71',
          hover: '#0b0014',
        },

      },

    },

  },
  variants: {
    extend: {},
  },
  plugins: [],
}

我的 postcss.config.js 文件

const cssnano = require(cssnano);
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    cssnano({
      preset:'default',
    }),
  ]
}

【问题讨论】：

您是否按照本指南添加了字体？ daily-dev-tips.com/posts/…
成功了，谢谢！

标签： html firebase tailwind-css vercel

【解决方案1】：

设置 Google 字体

首先，前往Google Fonts 并找到您想要使用的酷字体。

打开字体并为您喜欢的每种样式单击“选择此样式”按钮。

选择 Google 字体样式

选中它后，您会在右侧看到一个侧边栏，显示它的<link> 属性。复制此链接方法。

现在返回您的项目并打开index.html 文件。我们将把这个导入放在我们的 styles.css 文件之上。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- other stuff -->
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
</html>

添加到 Tailwind

现在让我们扩展 Tailwind 主题，让它知道这种字体。

打开 tailwind.config.js 文件并扩展主题的 fontFamily 选项。

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'press-start': ['"Press Start 2P"', 'cursive']
      }
    }
  }
};

如果您的字体（如本示例）使用空格，最好使用双转义符'""'，它会确保以正确的方式使用它。

我们的字体现在可以作为 font-press-start 使用，我们可以将其添加到主页上的标题中，如下所示：

<h1 class="text-6xl font-press-start">Welcome</h1>

【讨论】：

那么为什么它适用于桌面上的 OP 而不是使用他当前代码的移动设备？
他很可能已经缓存了它