文章/答案/技术大牛

发布

社区首页 >问答首页 >当只指定了regular时，浏览器如何生成粗体？

问当只指定了regular时，浏览器如何生成粗体？
EN

Stack Overflow用户

提问于 2021-01-02 23:43:14

回答 1查看 127关注 0票数 2

我在一些网站上使用Baloo 2字体。我只加载了字体的“常规”(即400)粗细，但在Chrome和火狐上，当使用font-weight: bold (或700)时，看起来略有不同。

可以说，Chrome版本的“粗体”字体看起来更好，但有趣的是，"Chrome粗体“在500到600之间，而”火狐粗体“只比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>

css

google-chrome

firefox

fonts

webfonts

回答 1

Stack Overflow用户

发布于 2021-01-09 09:49:04

查看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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65540954

复制

相似问题

问当只指定了regular时，浏览器如何生成粗体？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当只指定了regular时，浏览器如何生成粗体？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当只指定了regular时，浏览器如何生成粗体？
EN