离线使用Google Font(Poppins)仍有网络请求的问题解决

架构老林

2026-6-26

解决WebView中本地字体仍有网络请求的问题

排查在线引用残留：检查HTML文件是否有<link>标签引入Google Fonts在线链接，再检查CSS代码里是否存在@import拉取在线字体的语句，把这些内容全部删除——这是最常见的触发网络请求的原因，哪怕你定义了本地字体，浏览器仍会优先尝试加载残留的在线引用。
确认本地字体路径与打包状态：
- 核对@font-face里的url('./assets/fonts/Poppins-Regular.woff')路径是否正确，路径基准是当前CSS文件的位置，比如CSS在css/目录下时，字体路径应改为../assets/fonts/...
- 检查打包后的产物里，字体文件是否确实被复制到了指定的assets/fonts/目录下。如果使用Webpack、Vite等打包工具，要确保配置了静态资源处理规则，让字体文件被正确打包进输出包，避免被工具忽略。
补全所需的字重定义：如果应用用到了Poppins的其他字重（如粗体、轻量体），仅定义Regular字重的话，浏览器找不到对应字重的本地字体，就会去请求在线版本。把需要的字重（如500、700）的woff文件下载转换后，添加对应的@font-face规则：
```
@font-face {
  font-family: 'Poppins';
  src: url('./assets/fonts/Poppins-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
```
清空WebView缓存再测试：WebView可能缓存了之前的在线字体请求，清空缓存后重新加载应用，确认网络请求是否消失。