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

Posted 2023-03-06

【中文标题】仅指定常规时，浏览器如何生成粗体字体？

【英文标题】：How do browsers generate bold fonts when only regular is specified?

【发布时间】：2021-04-08 23:07:53

【问题描述】：

我在某个网站上使用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>

【问题讨论】：

我不确定你的问题是什么。 b 元素告诉它它是粗体的。在调试工具中，chrome 说 a b 元素的重量为 700。

@LarryBud 没有通过@font-face 指定粗体字体，但文本看起来是粗体。 “字体的粗体变体”不知从何而来。

这不是凭空出现的，您将第二句话包裹在 元素中。浏览器不需要特定的粗体字体来加粗。

@LarryBud 要使文本看起来更粗体，除了指定font-weight 之外，还需要字体 的“粗体变体”。这不是关于font-weight 项目的问题，而是显示的字体（字形集）。您能否支持您的说法，即浏览器不需要特定的粗体字？

大量关于“人造粗体”主题的文章：google.com/…

【参考方案1】：

见this article 但基本上，你需要两件事。将 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>