为什么 Chrome 会以“超亮”渲染字体，而 Safari 却不会？

Question

我有一个奇怪的问题。使用字体 “Be Vietnam Pro” 我看到 Chrome 浏览器以 “Extra Light” 变体呈现它，而所有 Safari 浏览器（包括 iOS 上的 Safari）都以 “正常”呈现它 变体。

只有当我自己托管字体而不使用 Google Fonts 时，才会发生这种情况。当刚刚导入谷歌字体文件时，即使 Chrome 也使用“正常”字体。当使用我自己的 CDN 时，它会使用 ExtraLight 变体。

如何协调它以便所有浏览器都使用 ExtraLight 变体？

我的字体 SCSS 文件是：

/* be-vietnam-pro-100 - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  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'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  url('https://xxxxx.cloudfront.net/fonts/vietnampro/be-vietnam-pro-v11-latin_latin-ext_vietnamese-100.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* be-vietnam-pro-100italic - latin_latin-ext_vietnamese */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  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'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  url('https://xxxx.cloudfront.net/fonts/vietnampro/be-vietnam-pro-v11-latin_latin-ext_vietnamese-100italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
 // and so on

在CSS中，我应用字体如下：

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

然后我对 h 元素应用多个权重，如下所示：

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

根据浏览器控制台，所有浏览器都会加载正确的字体。

Safari 显示它在“正常”重量中使用“Vietnam Pro”：

Chrome 显示“Extra Light”-变体：

这就是差异：

更新：

我发现我必须在不应该呈现为“正常”的地方应用font-weight。遗憾的是，这仅适用于 MacOS 的 Safari。 iOS 上的 Safari 忽略字体粗细设置。

Answer 1

简而言之：不要依赖浏览器默认设置寻找合适的“权重/样式候选”。

换句话说，您可以利用

@font-face

与样式无关的概念 – 您可以将任何粗细或样式映射到任何样式或粗细，无论实际字体文件中定义的内在属性如何。

这是一个示例，将“light/thin/ultrathin”的字体文件映射到常规/400 粗细使用，并将超粗体/900 粗细映射到默认粗体。

/* latin light/100 mapped to regular/400*/
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/bevietnampro/v11/QdVNSTAyLFyeg_IDWvOJmVES_HRUNXgSYA.woff2) format('woff2');
}

/* latin  bold/700 mapped to intrinsic weight 900 */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/bevietnampro/v11/QdVMSTAyLFyeg_IDWvOJmVES_HS0Im81Rb0.woff2) format('woff2');
}


body {
  font-size: 5vmin;
  font-family: "Be Vietnam Pro";
}

<h1>The Metamorphosis</h1>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a <strong>horrible vermin.</strong></p>

如您所见，这种方法规避了许多特定于元素的重写规则。

参考您的评论：

我认为“粗体”是“600”、“700”、“800”等值的占位符 或以上

...有点。浏览器有一些措施来找到下一个最合适的候选者 - 不要忘记渲染本地安装的与定义的 CSS

font-family

名称相匹配的字体。如果没有更粗体的字体定义可用，您最终会遇到所谓的 “假粗体”（或假斜体）合成字体渲染 – 这是不标准化的。避免使用它们，因为它们会在浏览器引擎之间引入显着的渲染差异。

底线：避免这些风格模糊性，因为它们肯定会引入不可预测的渲染结果。

事实上，您也可以通过基于选择器的规则重新映射默认样式。

h1,
h2,
h3,
h4,
strong{
    font-weight: 100;
}

但它也会让你的 CSS 变得臃肿并且更难维护。

您还应该避免基于

*

星号选择器的 CSS 规则，因为当您为每个元素（包括所有子元素）指定某些字体属性时，它们会引入不必要的特异性 - 因此您会轰炸任何样式继承（有点像范式战争 -但坦白说我认为 CSS 级联概念有很多优点）。很可能您可能需要太多的覆盖规则或

!important

关键字来根据上下文更改样式。