不同浏览器系统字体渲染不一致的CSS兼容方案咨询

问题背景 #

当前CSS设置的字体族在不同浏览器表现不一致：Chrome和Edge默认渲染HelveticaNeue-Condensed变体，而Firefox使用常规的Helvetica Neue及HelveticaNeue-Medium。需求是默认统一为Firefox的渲染效果，仅在指定font-stretch: condensed时才使用窄体变体，且仅依赖系统字体。

解决方案 #

通过调整字体族优先级、强制常规宽度、指定匹配权重来实现统一：

.header {
    font-family: "Helvetica Neue", "Helvetica Neue Medium", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-stretch: normal; /* 强制使用常规宽度的字体变体，阻止浏览器自动选窄体 */
    font-weight: 500; /* 匹配Firefox渲染的Medium权重，可选，按需调整 */
}

/* 需要使用窄体时添加此类 */
.header.condensed {
    font-stretch: condensed;
}

<!-- 默认常规效果 -->
<div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

<!-- 窄体效果 -->
<div class="header condensed">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

原理说明 #

1. 字体族优先级调整：将非窄体的Helvetica Neue常规版、Medium版放在字体列表最前端，让浏览器优先选择这些变体，避免自动匹配窄体版本。
2. 强制常规宽度：font-stretch: normal明确告诉浏览器使用标准宽度的字体，覆盖Chrome/Edge默认的自动选择逻辑。
3. 统一字体权重：font-weight: 500对应HelveticaNeue-Medium的权重，确保不同浏览器下字体粗细一致。

该方案完全依赖系统预装的Helvetica Neue字体变体，无需引入外部字体文件。

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