Question

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

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

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

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

Answer 1

有没有办法告诉CSS /浏览器哪些字体权重可用于给定的字体系列，用于打火机和更大胆？

没有。浏览器需要所有字体和权重。无论您想要/需要什么大胆的字体，字体，您需要加载您想要使用它的大胆的每个字体。

您可以尝试包含字体和权重，如下所示：

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

请点击此处了解详情：https://stackoverflow.com/a/7256119/2008111

Answer 2

＆＃34; 一个明显的解决方法是将webfont的轻型版本定义为400重量而不是300重量。但是，我不能这样做，因为我正在加载来自Google字体，为我提供@font-face规则。＆＃34;

如果没有选择，您已手动重新定义@font-face并希望Google不会更改链接：）。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

您要求重新定义lighter和bolder的间隔，以便它仍然可以在多个步骤中使用，但是您首先要说的是您只使用了两个字体权重。

如果您实际上并不需要多个步骤，但仅针对stronger标记为您提供粗体文字，则只需更改CSS中的内容即可：

strong { font-weight: bold; }

Answer 4

如何创建附加的 @ font-face 规则，指定AMT并使用font-weight: 400规则中的字体文件？

font-weight: 700

仅这一项附加的字体规则对我来说似乎足够干净，并且如果您是自托管字体文件，甚至是完全安全的。

如何指定给定字体系列可用的字体权重？

4 个答案: