logo标签列表

如何指定一个字体系列可用的字重？（涉及IT技术）

csswebfonts
3
我正在使用网络字体，并包含300（轻）和700（粗）两种字重。这些是网站使用的唯一字重，我在html元素上指定了默认字重应为300。
当浏览器遇到<strong>标签时，默认应用的样式（不确定是浏览器的默认样式表还是normalize.css）是font-weight: bolder。这对我来说很有道理：我想要更加粗细一步。假设我有三种字重，我只想它从继承的字重中向前移动一步。
然而，在常规正文中的<strong>元素上使用会将字重从300提高到400，并且浏览器使用与周围文本相同的300字重字体来呈现它。显然，我希望它能意识到下一个可用的字重是700，并使用它。
有没有办法告诉CSS /浏览器针对特定的字体系列可用哪些字重，以便于lighter和bolder的使用？
一个明显的解决办法是将轻版本的网页字体定义为400权重而不是300。然而，由于我是从Google Fonts加载字体，它为我提供了@font-face规则，所以我无法这样做。 - undefined
你尝试过导入所有的Google字体和字重吗？ - undefined
@GoofBall101这样的话文件大小会太大，设计师也不想在该网站上使用这种字体的“正常”字重。 - undefined
我试图解释一下，就像caramba在@tremby中描述的那样。 - undefined
2
简而言之，不行。步骤是固定的，根据https://drafts.csswg.org/css-fonts/#bolderlighter中的表格进行操作。 但也许你可以绕过这个问题。例如，在选择字体系列的同时，错误声明所需的正文字体粗细。如果你只有300和700两种选项，那么将所需的正文文本设置为400（即正常）。由于400和500不存在，浏览器会使用300代替。bolder将增加字重至700，从而实现你想要的步进效果。 - undefined
@Alohci，是的，我在评论中提出了这个解决方法。感谢你指出那个表格——它解释了当前的行为（尽管没有解释为什么）。我认为你的贡献在技术上是最正确的，所以如果你把它作为答案发布，我会接受它。 - undefined
4个回答
4

有没有办法告诉CSS/浏览器，对于轻和重的字体，哪些字体家族可用？

没有。浏览器需要所有字体和字重。这意味着无论您需要多么粗细的字体，您都需要加载每个具有所需粗细的字体。

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

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

更多详情请查看：https://dev59.com/N2w05IYBdhLWcg3waRKz#7256119

（注：该链接为英文内容，需要自行翻译）
1
我不想再加入更多字重。我已经加载了我要用于这种字体的两个字重。 - undefined
3
"一个明显的解决方法是将轻字体版本定义为400权重而不是300。但是，由于我正在从Google Fonts加载字体，它为我提供了@font-face规则，因此我无法这样做。如果没有选择，您需要手动重新定义@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>

如果真的没有其他解决方案，您可以自己提供字体服务。
第一个听起来肯定是危险的 - 就像你说的那样，如果谷歌改变了URL，链接可能会意外中断。我本以为第二个（自己提供字体）违反了谷歌的条款。但是稍微搜索了一下，似乎实际上并不违反，并且这个网站使得这变得非常容易。我想这就是我要做的。谢谢。 - undefined
1
你在询问如何重新定义 lighter 和 bolder 的间隔，以便在多个步骤中仍然可用，但是你一开始就说你只使用了字体的两种字重。如果你实际上不需要多个步骤，只需要标签为你提供粗体文本，你可以简单地更改CSS中它的行为：

strong { font-weight: bold; }
是的，这就是我现在正在做的。但是假设我有另一种字体系列，它有多个字重，而且我仍然希望在那里使用更粗/更轻的步进行为。 - undefined
1
创建一个额外的@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;
}

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接