仅指定常规时浏览器如何生成粗体字体？

Question

我在某些网站上使用字体 Baloo 2。我只加载了字体的“常规”（即 400）粗细变体，但在 Chrome 和 Firefox 上，使用

font-weight: bold

（或 700）时，它看起来略有不同。

可以说，Chrome 版本的“粗体”字体看起来更好，但有趣的是“Chrome 粗体”介于 500 到 600 之间，而“Firefox 粗体”仅比 400 稍微粗一点。

我很好奇这些“粗体”变体从何而来，以及如何在不同浏览器中获得一致的外观。

---

请检查以下示例：

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  src: url(https://gstatic.loli.net/s/baloo2/v1/wXKrE3kTposypRyd51jcAA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

b {
  /* Not important, just to be absolutely sure */
  font-weight: bold !important;
}

.example {
  font-family: 'Baloo 2';
  font-style: normal;
}

<div class="example">
  <p>The quick brown fox jumps over the lazy dog.</p>
  <p><b>The quick brown fox jumps over the lazy dog.</b></p>
</div>

Answer 1

请参阅这篇文章，但基本上，您需要两件事。将 h 标签设置为全部使用特定的字体粗细，将字体粗细修改为 -100。

如果需要，您可以使用类将其设为粗体

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  src: url(https://gstatic.loli.net/s/baloo2/v1/wXKrE3kTposypRyd51jcAA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

b { // insure adding bold won't jack you up!
  font-family: 'Baloo 2';
  font-weight: 200 !important;
}

.bold {
  font-family: 'Baloo 2';
  font-weight: 700 !important;
}

h1, h2, h3, h4, h5 {
   font-family: 'Baloo 2';
   font-weight: 400; /* Be specific */
}

.example {
  font-family: 'Baloo 2';
  font-style: normal;
}

<div class="example">
  <p>The quick brown fox jumps over the lazy dog.  <- P tag</p>
  <p><b>The quick brown fox jumps over the lazy dog.<- Bold</b></p>
  <h4>The quick brown fox jumps over the lazy dog. <- H4</h4>
  <h4><b>The quick brown fox jumps over the lazy dog. <- H4 Bold</b></h4>
</div>
 <p class="bold">The quick brown fox jumps over the lazy dog.  <- Class bold</p>

Answer 2

看起来浏览器自己生成它。检查

font-synthesis

css 属性： https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis