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

【问题标题】：How do I specify which font weights are available for a given font family?如何指定给定字体系列可用的字体粗细？
【发布时间】：2018-06-02 12:30:01
【问题描述】：

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

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

但是，常规正文文本中某处的 <strong> 元素上的 bolder 将权重从 300 增加到 400，并且浏览器使用与周围文本相同的 300 权重字体来呈现它。显然，我希望它实现下一个可用的重量是 700，并使用它。

为了lighter 和bolder 的目的，有没有办法告诉CSS/浏览器哪些字体粗细可用于给定字体系列？

【问题讨论】：

一个明显的解决方法是将 webfont 的轻型版本定义为 400 粗细而不是 300。但是，鉴于我从 Google Fonts 加载字体，我不能这样做，它提供了@font-face 我的规则。
您是否尝试过导入所有 Google 字体和粗细？
@GoofBall101 这对于文件大小来说太重了，并且设计师不想在这个网站上使用这种字体的“正常”重量。
我试图解释 caramba 如何描述它@tremby
简而言之，不，你不能。根据drafts.csswg.org/css-fonts/#bolderlighter 的表格，这些步骤是固定的，但也许你可以解决它。例如，在选择字体系列的同一点错误地声明所需的正文字体粗细如何。如果您只有 300 和 700，则将所需的正文设置为 400（即正常）。由于 400 和 500 不存在，浏览器将使用 300 代替。然后，bolder 会将权重提高到 700，然后您将获得所需的步进

标签： css webfonts

【解决方案1】：

有没有办法告诉 CSS/浏览器字体粗细是什么可用于给定的字体系列，目的是为了更轻和更大胆？

没有。浏览器需要所有字体和粗细。意味着您想要/需要的任何粗体，字体，您需要以您想要使用的粗体加载每种字体。

您可以尝试像这样包含字体和粗细：

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>

更多详情请看这里：https://stackoverflow.com/a/7256119/2008111

【讨论】：

我不想包含更多的权重。我已经为这个字体加载了我想要的两个。

【解决方案2】：

"一个明显的解决方法是将 webfont 的轻量版定义为 400 粗细而不是 300。但是，鉴于我从 Google Fonts 加载字体，我不能这样做，它提供了 @ 987654322@ 我的规则。"

如果别无选择，你已经手动重新定义了@font-face，希望google不要更改链接:)。

@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>

如果实在没有其他解决方案，你可以自己提供字体。

【讨论】：

第一个听起来很危险——正如您所说，如果 Google 更改 URL，链接可能会意外中断。我会认为第二个（我自己提供字体）违反了谷歌的条款。但是稍微搜索一下，它似乎实际上不是，this site 让它变得非常容易。我想这就是我要做的。谢谢。

【解决方案3】：

您问的是重新定义 lighter 和 bolder 的间隔，以便它在多个步骤中仍然可用，但是您开始说您只使用了两个字体粗细。

如果您实际上不需要多个步骤，而只需要 stronger 标记为您提供粗体文本，您可以简单地更改它在 CSS 中的作用：

strong { font-weight: bold; }

【讨论】：

是的，这就是我现在正在做的事情。但是假设我有另一个具有多个权重的字体系列，我仍然希望更粗/更轻的步进行为在那里工作。

【解决方案4】：

如何创建一个额外的 @font-face 规则，指定 font-weight: 400，并使用来自 font-weight: 700 规则的字体文件？

/* Rules generated by Google Fonts */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Raleway Light'), local('Raleway-Light'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwIYqWqZPANqczVs.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;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqZPANqczVs.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;
}

/* Fix for `font-weight: bolder` of a `font-weight: 300` parent */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqZPANqczVs.woff2) format('woff2'); /* the same as for font-weight: 700 */
  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;
}

这只有一个额外的字体规则对我来说似乎足够干净，如果您是自托管字体文件，甚至是完全安全的。

【讨论】：