使用TailwindCSS时Google Fonts的Inter字体移动端无法渲染求助

可能的故障原因及修复方案 #

1. Google Fonts导入链接的转义字符错误 #

你CSS文件里的@import链接使用了HTML转义字符&代替原生的&，桌面端浏览器的容错机制会自动修正该错误，因此模拟移动端时显示正常，而部分移动端浏览器对CSS语法校验更严格，会识别为无效链接，导致Inter字体无法加载。
修复方式：把链接中的&替换为&，修改后代码为：

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

2. PurgeCSS配置错误导致字体类被误删 #

你的tailwind.config.js中purge的content路径末尾多了多余的斜杠，会导致PurgeCSS无法正确扫描你项目中的HTML文件，生产构建时会将未被识别到的font-body类当做无用代码删除。桌面端开发环境默认关闭PurgeCSS，因此显示正常，线上生产环境开启后就会丢失字体配置。
修复方式：修正purge.content的路径配置：

content:['./public/**/*.html']

同时建议在全局基础样式中声明字体，避免被PurgeCSS误删：

@layer base {
  body {
    @apply font-body;
  }
}

3. 无字体fallback导致加载失败后无替代字体 #

你定义fontFamily时仅配置了Inter单个字体，未添加系统 fallback 字体，当Inter字体加载失败时，部分移动端浏览器会出现字体渲染异常。
修复方式：补充 fallback 字体：

fontFamily: {
  'body': ['Inter', 'system-ui', 'sans-serif'],
}

4. 暗黑模式颜色冲突导致字体“隐形” #

你开启了基于系统设置的暗黑模式，但自定义的颜色配置中没有适配暗黑模式的文字/背景色规则。如果移动端系统开启了暗黑模式，可能出现文字颜色与背景色重合的情况，看起来像是字体没有渲染，而桌面端模拟时未开启暗黑模式所以显示正常。
修复方式：补充暗黑模式下的颜色配置，或者测试时开启桌面端开发者工具的暗黑模式模拟排查是否是颜色问题。

5. postcss配置语法错误导致构建异常 #

你的postcss.config.js中引入cssnano时没有加字符串引号，属于语法错误，会导致生产构建时CSS压缩逻辑异常，可能会误删@import规则或者字体相关的样式。
修复方式：修正cssnano的引入语句：

const cssnano = require('cssnano');

内容的提问来源于stack exchange，提问作者dul