@font-face自定义字体跨浏览器失效及字重回退异常咨询

一、跨浏览器兼容配置（解决全文字体自动变粗问题） #

所有文本自动变粗的核心原因是@font-face配置错误：lighter和bolder是用于元素样式的相对字重关键字，依赖父元素字重计算，不能用于@font-face中做字体文件和字重的映射，会导致浏览器字重匹配逻辑错乱，所有文本都错误加载粗体字体文件。

正确的跨浏览器兼容配置遵循以下规则：

• 字重映射使用固定值：Light字重对应300，Regular常规字重对应400（等价于关键字normal），Bold粗体对应700（等价于关键字bold）
• 字体源按优先级排序：优先用压缩率最高、现代浏览器全支持的woff2，其次是兼容IE9+、老版本移动浏览器的woff，再是兼容更老设备的ttf，最后加eot兼容IE8及以下版本。svg字体已被主流浏览器废弃，无需引入。
• 补充必要属性：添加font-style: normal避免浏览器自动合成伪斜体，添加font-display: swap避免字体加载期间文本完全隐藏，优化加载体验。
• 不要用通配符*设置全局字体，容易覆盖表单、按钮、代码块等元素的默认样式，建议将全局字体配置在body选择器上，通过继承生效。
• 确认服务器配置了正确的字体MIME类型，避免字体文件加载返回403/404错误，常见字体MIME类型：woff2对应font/woff2，woff对应font/woff，ttf对应font/ttf，eot对应application/vnd.ms-fontobject。

正确配置代码参考：

@font-face {
   font-family: 'Bicyclette';
   src: url('fonts/Bicyclette-Light.eot');
   src: url('fonts/Bicyclette-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Bicyclette-Light.woff2') format('woff2'),
        url('fonts/Bicyclette-Light.woff') format('woff'),
        url('fonts/Bicyclette-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'Bicyclette';
   src: url('fonts/Bicyclette-Regular.eot');
   src: url('fonts/Bicyclette-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Bicyclette-Regular.woff2') format('woff2'),
        url('fonts/Bicyclette-Regular.woff') format('woff'),
        url('fonts/Bicyclette-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'Bicyclette';
   src: url('fonts/Bicyclette-Bold.eot');
   src: url('fonts/Bicyclette-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Bicyclette-Bold.woff2') format('woff2'),
        url('fonts/Bicyclette-Bold.woff') format('woff'),
        url('fonts/Bicyclette-Bold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body {
   font-family: 'Bicyclette', Helvetica, 'Helvetica Neue', Arial, sans-serif;
}

注：最初使用的.tiff是图像格式，不属于web支持的字体格式，不要作为字体文件引入。

二、Helvetica回退异常问题 #

自定义字体加载失败时显示Arial而非Helvetica，是系统字体预装差异导致的：

• Helvetica仅在macOS、iOS、部分Linux发行版中默认预装，Windows系统默认不搭载该字体（除非用户手动安装或安装了带Helvetica的商业软件），浏览器找不到Helvetica时会自动匹配字体栈中下一个存在的系统字体，也就是Windows默认自带的Arial，这个行为是浏览器的默认规则，无法通过CSS强制未安装Helvetica的设备显示该字体。

优化方案：

• 优化字体栈顺序，按'Bicyclette', Helvetica, 'Helvetica Neue', Arial, sans-serif配置，优先匹配各平台自带的Helvetica系列字体，找不到再降级到Arial，最终用系统默认无衬线字体兜底，尽可能保证视觉风格接近。
• 如果要求所有设备回退时必须显示Helvetica，需要先获得Helvetica的商用授权，再将其制作成多格式web字体，在@font-face中定义为第二优先级字体引入即可，注意无授权使用会有版权风险。

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