@font-face定义的自定义字体在桌面端和移动端显示效果不一致

问题排查与解决方案 #

1. 优先排查字体命名冲突（最高概率） #

iOS等移动端系统本身预装了官方的Futura字体，你定义的font-family: 'futura'会和系统内置字体重名，浏览器会优先调用系统自带字体，跳过你引入的自定义字体，直接导致两端显示效果不一致。
解决方法：将@font-face中的font-family修改为不会和系统字体重名的唯一命名，例如'my-custom-futura'，后续页面所有调用字体的位置都使用这个自定义名称即可。

@font-face {
    font-family: 'my-custom-futura'; /* 修改为唯一命名 */
    src: url('./futura.eot');
    src: url('./futura.eot?') format('embedded-opentype'),
         url('./futura.woff2') format('woff2'),
         url('./futura.woff') format('woff'),
         url('./futura.ttf') format('truetype'),
         url('./futura.svg#my-custom-futura') format('svg'); /* 给svg格式加对应后缀，适配旧版iOS */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 可选，避免字体加载阶段页面空白 */
}

2. 字重/字样式匹配问题 #

你当前只定义了font-weight: normal、font-style: normal的字体规则，如果页面中使用了粗体、斜体样式，移动端找不到对应匹配的自定义字体，就会调用系统字体自动模拟，出现变形。
解决方法：如果页面用到不同字重/样式，需要分别引入对应版本的字体文件，单独定义@font-face规则，匹配对应的font-weight、font-style属性。

3. 移动端浏览器兼容优化 #

添加以下全局CSS规则，规避移动端浏览器的默认字体干预：

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%; /* 禁止iOS自动调整字体大小 */
}

4. 小概率场景排查 #

• 确认你生成的各格式字体文件来源于同一套原版字体，避免不同版本字体本身样式不同
• 测试时清除移动端浏览器缓存，避免旧的字体文件缓存影响效果
• 确认你没有开启安卓浏览器的「强制使用系统字体」类的用户设置，该设置会覆盖所有自定义字体

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