移动端Mango Grotesque可变字体显示过粗问题求助

我使用的Mango Grotesque可变压缩字体在桌面端及浏览器响应式预览中显示正常，但在iOS设备的Chrome和Safari浏览器中访问网站时，字体font-weight显示过粗，和桌面端预览效果不一致，两款iOS浏览器均存在此问题。

相关CSS代码如下：

@font-face {
  font-family: "Hubot Sans";
  src: url("../fonts/HubotSans[slnt\,wdth\,wght].woff2") format("woff2");
}

@font-face {
  font-family: "Mango-Grotesque";
  src: url('../fonts/Mango Grotesque-VF.woff2') format('woff2');
}

body {
  font-family: "Hubot Sans", Arial, Helvetica, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin-top: 0;
}

p,
ul,
code,
ol {
  max-width: 40rem;
  line-height: 1.5;
  margin-bottom: var(--sp-3xl);
}

.large-title {
  font-size: 6.25rem;
}

.title-1 {
  font-size: 4.9375rem;
  font-weight: 600;
}

.title-2 {
  font-size: 3.8125rem;
  margin-bottom: var(--sp-lg);
  font-weight: 600;
}

.title-3 {
  font-size: 2.875rem;
  font-weight: 600;
}

.title-4 {
  font-size: 2.125rem;
  font-weight: 600;
}

.headline {
  font-size: 1.175rem;
  margin-bottom: var(--sp-sm);
  font-weight: 500;
}

p {
  line-height: 140%;
  max-width: 32rem;
}

p:not(p:last-of-type) {
  margin-bottom: var(--sp-sm);
}

p.label.orange {
  color: var(--primary-500);
}

small {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  line-height: 1.0625rem;
  margin-bottom: var(--sp-base);
}

.hubot-sans {
  font-family: "Hubot Sans", Arial, Helvetica, sans-serif;
}

.hubot-sans-condensed {
  font-family: "Hubot Sans", Arial, Helvetica, sans-serif;
  font-stretch: condensed;
}

.mango-grotesque {
  font-family: "Mango-Grotesque", Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  text-rendering: optimizeLegibility;
}

em {
  font-style: italic;
  font-weight: bold;
}

.text-lg {
  font-size: 1.125rem;
}

.text-base {
  font-size: 1rem;
}

.text-sm {
  font-size: 0.9rem;
}

code {
  display: block;
  padding: var(--sp-sm);
  background-color: var(--zinc-900);
  border: 1px solid var(--zinc-700);
  margin-bottom: var(--sp-xl);
}

.large-title,
.title-1,
.title-2,
.title-3,
.title-4 {
  font-family: "Mango-Grotesque", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  margin-bottom: var(--sp-xs);
  line-height: 90%;
  text-rendering: optimizeLegibility;
}

.headline,
label,
subtitle,
.caption-text {
  font-family: "Hubot Sans", Arial, Helvetica, sans-serif;
}

.subtitle {
  font-size: 1.125rem;
  margin-bottom: var(--sp-xs);
  font-weight: 600;
}

.callout {
  font-family: "Hubot Sans", Arial, Helvetica, sans-serif;
  font-stretch: condensed;
  font-size: 1.125rem;
  line-height: 0.9375rem;
  margin-bottom: var(--sp-sm);
  font-weight: 600;
  letter-spacing: 0.0125rem;
  text-transform: uppercase;
}

strong {
  font-weight: 600;
}

.strikethrough {
  text-decoration: line-through;
}

.caption-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

.text-orange {
  color: var(--primary-500);
}

我曾尝试使用媒体查询调整移动端字体粗细，但认为这并非理想解决方案，且桌面端审查元素的响应式预览中字体显示正常。

解决方案 #

1. 完善@font-face的可变字体轴声明

iOS浏览器对可变字体的轴信息识别依赖明确声明，未指定的话可能会 fallback 到默认粗度计算。修改Mango-Grotesque的@font-face规则，补充字体支持的轴范围：

@font-face {
  font-family: "Mango-Grotesque";
  src: url('../fonts/Mango Grotesque-VF.woff2') format('woff2');
  /* 根据字体实际支持的weight范围调整，比如100-900 */
  font-weight: 100 900;
  /* 如果字体包含宽度轴，添加此声明 */
  font-stretch: 75% 125%;
  /* 如果支持倾斜轴，添加 */
  font-style: normal italic;
}

2. 微调font-weight数值

部分可变字体在标准整数值（如600）上的iOS渲染存在偏差，尝试使用接近的非标准数值测试：

.title-1, .title-2, .title-3, .title-4 {
  font-weight: 590; /* 替代600，根据字体实际轴范围调整 */
}

3. 禁用iOS的自动字体加粗优化

iOS浏览器默认会对字体做加粗优化，添加以下CSS抵消此效果：

.large-title,
.title-1,
.title-2,
.title-3,
.title-4 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 透明描边抵消自动加粗 */
  -webkit-text-stroke: 0.2px transparent;
}

4. 检查字体文件完整性

确认你的Mango Grotesque-VF.woff2文件是否完整导出了可变轴信息，部分字体在导出时可能缺失weight轴的完整范围。可以使用字体工具（如FontForge）检查，或重新导出符合WOFF2可变字体标准的文件。

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