使用 TailwindCSS 时，Google 字体无法在移动设备上呈现
Posted
技术标签:
【中文标题】使用 TailwindCSS 时，Google 字体无法在移动设备上呈现【英文标题】：Google Fonts does not render on mobile devices when using TailwindCSS 【发布时间】：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/… 成功了，谢谢！ 【参考方案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 而不是使用他当前代码的移动设备？ 他很可能已经缓存了它以上是关于使用 TailwindCSS 时，Google 字体无法在移动设备上呈现的主要内容，如果未能解决你的问题，请参考以下文章
使用 PostCSS 和 TailwindCSS 构建 Gatsby 站点时出错
构建和导出 TailwindCSS 和 NextJS 时遇到问题
使用 TailwindCSS 时，如何避免模板在渲染列表时将分隔符添加到分隔符？
使用 TailwindCSS 单击按钮时，使侧边栏从左侧滑入