Chrome渲染Be Vietnam Pro为Extra Light，Safari为常规？如何统一为Extra Light？

自行托管「Be Vietnam Pro」字体时遇到以下问题：

• Chrome浏览器会将字体渲染为Extra Light（100字重）变体
• 所有Safari浏览器（包括iOS端）则渲染为常规变体
• 使用Google Fonts导入时Chrome正常显示常规字重，切换到自有CDN托管后，Chrome就会用Extra Light变体

需求：实现所有浏览器统一使用Extra Light变体。

现有字体SCSS配置 #

/* be-vietnam-pro-100 - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 100;
  src: url('https://xxxx.cloudfront.net/fonts/vietnampro/be-vietnam-pro-v11-latin_latin-ext_vietnamese-100.woff2') format('woff2'),
  url('https://xxxxx.cloudfront.net/fonts/vietnampro/be-vietnam-pro-v11-latin_latin-ext_vietnamese-100.ttf') format('truetype');
}
/* be-vietnam-pro-100italic - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap;
  font-family: 'Be Vietnam Pro';
  font-style: italic;
  font-weight: 100;
  src: url('https://xxxx.cloudfront.net/fonts/vietnampro/be-vietnam-pro-v11-latin_latin-ext_vietnamese-100italic.woff2') format('woff2'),
  url('https://xxxx.cloudfront.net/fonts/vietnampro/be-vietnam-pro-v11-latin_latin-ext_vietnamese-100italic.ttf') format('truetype');
}
// 其他字重配置省略

字体应用CSS #

body,
html,
* {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 17px;
}

h1 {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.7rem;
  margin-top: 0.3rem;
  margin-bottom: 0.6rem;
}

浏览器表现补充 #

所有浏览器均已加载正确字体，但渲染结果不同：

• Safari（含iOS）：显示常规字重的字体
• Chrome：显示Extra Light变体
• 尝试在需要调整的元素上设置font-weight:100，仅MacOS版Safari生效，iOS版Safari完全忽略该设置

解决方案 #

1. 强制全局默认字重为100 #

修改全局样式，直接指定默认字重为100，覆盖浏览器的自动推断逻辑：

body,
html,
* {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 17px;
  font-weight: 100; /* 强制所有元素默认使用100字重 */
}

2. 检查并整理@font-face配置 #

• 如果不需要常规字重（400）的字体，直接删除对应的@font-face规则，避免浏览器 fallback 到常规字重
• 确保保留的每个@font-face规则中，font-weight值与字体文件的实际字重完全匹配，文件路径无误

3. 针对iOS Safari的特殊处理 #

iOS Safari对字体元数据的解析容易出问题，试试这几个方法：

• 对关键元素添加font-weight: 100 !important，强制生效（注意不要滥用，避免影响其他样式）
• 用FontForge这类工具检查字体文件的元数据，确认100字重的文件标记正确，没有被误识别为其他字重
• 确保WOFF2格式文件优先加载，iOS Safari对WOFF2支持良好，能减少元数据解析错误

4. 清除缓存再测试 #

跨浏览器测试前，务必清除所有浏览器的缓存，避免旧的字体文件或样式缓存干扰结果

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