移动端Firefox与Chrome无法识别@font-face字体问题求助

嘿，我帮你梳理下排查思路，先从最明显的问题入手：

1. 立即修正@font-face的格式映射错误 #

看你的CSS代码，发现一个关键错误——你把字体文件格式和URL搞反了！

/* 你原来的错误代码 */
src: url('../fonts/typographica.regular-webfont.woff') format('woff2'),
url('../fonts/typographica.regular-webfont.woff2') format('woff');

移动端浏览器对字体格式的匹配要求很严格，你应该把.woff2文件对应format('woff2')，.woff对应format('woff')，而且优先加载更高效的woff2：

/* 修正后的代码 */
@font-face {
font-family: 'typographicaregular';
src: url('../fonts/typographica.regular-webfont.woff2') format('woff2'),
url('../fonts/typographica.regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

这个错误大概率是移动端加载失败的核心原因。

2. 排查跨域访问限制 #

PC端浏览器可能对跨域字体的限制更宽松，但移动端Chrome/Firefox会严格检查CORS（跨域资源共享）设置。你需要确保服务器允许字体文件的跨域请求：

• 如果你用Apache，在网站根目录的.htaccess里添加：

<FilesMatch "\.(woff|woff2)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

• 如果你用Nginx，在站点配置里添加：

location ~* \.(woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

3. 确认字体文件路径的正确性 #

相对路径../fonts/可能在移动端页面的上下文里解析出错，试试换成绝对路径（从网站根目录开始）：

src: url('/fonts/typographica.regular-webfont.woff2') format('woff2'),
url('/fonts/typographica.regular-webfont.woff') format('woff');

这样不管你的页面在哪个子目录，都能准确找到字体文件。

4. 检查font-weight的匹配问题 #

你的.home类设置了font-weight: bold;，但@font-face里只定义了font-weight: normal;。如果你的自定义字体没有单独的加粗版本，移动端浏览器会直接 fallback 到无衬线字体。解决方法：

• 去掉.home里的font-weight: bold;，或者改成font-weight: normal;
• 如果有字体的加粗版本，添加对应的@font-face规则：

@font-face {
font-family: 'typographicaregular';
src: url('../fonts/typographica.bold-webfont.woff2') format('woff2'),
url('../fonts/typographica.bold-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}

5. 验证字体文件的完整性 #

有时候上传到服务器的字体文件会损坏，你可以在移动端浏览器直接访问字体文件的URL（比如https://你的域名/fonts/typographica.regular-webfont.woff2），看能否正常下载并打开。如果打不开，重新上传字体文件。

6. 清除移动端缓存 #

移动端浏览器的缓存很顽固，即使修复了问题，旧的错误资源可能还在缓存里。你可以：

• 手动清除浏览器的缓存和数据
• 给字体文件加版本号，强制浏览器加载新资源：

src: url('../fonts/typographica.regular-webfont.woff2?v=1.0') format('woff2'),
url('../fonts/typographica.regular-webfont.woff?v=1.0') format('woff');

先试试第一个修正格式的方法，应该能解决大部分问题，如果不行再依次排查后面的点。

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