如何指定给定字体系列可用的字体粗细？

Question

我使用的是网络字体，并且权重为300（浅）和700（粗体）。这些是网站使用的唯一权重，我在html元素中指定默认字体权重应为300。

当浏览器遇到<strong>标签时，将应用默认样式（不确定是浏览器的默认工作表还是normalize.css）font-weight: bolder。这对我来说很有意义：我想大胆地迈出一步。并说我有三个权重，我希望它可以从继承的权重转移到下一步。

然而，bolder在<strong>常规正文元素的地方颠簸从300重量多达400个，而浏览器与300相同重量的字体为周围的文字渲染这一点。显然，我希望它实现下一个可用的权重为700，并使用该权重。

为了lighter和的目的，是否有一种方法可以告诉CSS /浏览器哪些字体粗细可用于给定的字体系列bolder。

Answer 1

“ 一个明显的解决方法是将webfont的浅色版本定义为400粗细而不是300粗细。但是，鉴于我要从Google Fonts加载字体，因此我无法做到这一点@font-face。 ”

If there's no choice, you have manually re-define the @font-face and hope that google doesn't change the links :).

@import url('https://fonts.googleapis.com/css?family=Raleway:400,900');

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/raleway/v12/PKCRbVvRfd5n7BTjtGiFZAzyDMXhdD8sAj6OAJTFsBI.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+2212, U+2215;
}

p:nth-child(1) {
  font-family: Raleway;
  font-weight: 100;
}

p:nth-child(2) {
  font-family: Raleway;
  font-weight: 400;
}

p:nth-child(3) {
  font-family: Raleway;
  font-weight: 900;
}

<div class="wrapper">
  <p>This should be thin but is bold</p>
  <p>This is regular</p>
  <p>This is bold</p>
</div>

If there is really no other solution, you can just serve the fonts yourself.