Google字体桌面正常显示但移动端（安卓/iOS）无法加载求助

我帮你分析下这个字体加载的问题，从你的描述和代码来看，大概率是移动端字体引入的加载优先级、跨域处理或者缓存导致的，下面是具体的排查步骤和解决方案：

1. 替换@import为标签引入（优先级最高的解决办法） #

你当前用的@import方式是在CSS文件加载完成后才会发起字体请求，移动端网络环境不稳定时很容易加载失败，换成<link>标签放在页面<head>最前面（早于其他CSS文件）能显著提升加载成功率，同时加上预连接和字体加载策略：

<!-- 放在<head>的最顶部，在你的其他CSS之前 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

为什么这么改？ #

• preconnect：提前和Google的字体服务器建立连接，减少DNS解析和连接耗时
• crossorigin：解决移动端浏览器对跨域字体资源的严格检查
• display=swap：保证字体加载完成前显示系统 fallback 字体，避免页面空白，同时字体加载后无缝切换

2. 优化CSS字体声明，增加明确的fallback字体 #

虽然你加了!important，但可以给字体声明加上系统级的fallback，既提升用户体验，也方便排查是否是字体加载失败还是样式覆盖问题：

body {
  font-family: 'Zilla Slab', Georgia, Times, 'Times New Roman', serif !important;
}

h1, h2 {
  font-family: 'Kanit', Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  color: #e63f2f;
}

h1 {
  font-size: 20px;
}

3. 清理所有缓存（MODX+移动端浏览器） #

即使你停用了MinifyX，MODX的内置缓存、CDN缓存（如果有）或者移动端浏览器的旧缓存都可能导致字体资源无法更新：

• 在MODX后台清空全站缓存（System → Clear Cache）
• 让用户在移动端用隐私/无痕模式测试，避免浏览器缓存干扰

4. 检查移动端字体加载状态 #

用Chrome DevTools的移动端模式（F12 → 切换到手机图标），打开Network面板，筛选「Fonts」类型，查看Zilla Slab和Kanit的字体文件是否成功加载：

• 如果显示404/500：说明字体URL有误，检查标签里的字体参数是否正确
• 如果加载成功但字体不显示：可能是CSS优先级问题，你可以在DevTools里查看body/h1的font-family是否被其他样式覆盖

5. 排除MODX其他资源处理模块的影响 #

除了MinifyX，MODX的其他模块比如AssetOptimizer或者自定义的资源合并插件，可能会修改CSS内容导致字体引入失效，建议暂时停用所有资源优化类模块，测试字体是否正常显示。

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