Web 字体：如何在不更改字体系列的情况下指定粗细？

Question

不同权重的 Webfonts 在不同的文件中，因此通常显示为不同的 font-family:

@font-face {
 font-family: 'LatoWeb'; 
 src: url('/fonts/blog/Lato-Regular.eot');
 src: url('/fonts/blog/Lato-Regular.eot?#iefix') format('embedded-opentype'),
      url('/fonts/blog/Lato-Regular.woff2') format('woff2'),
      url('/fonts/blog/Lato-Regular.woff') format('woff'),
      url('/fonts/blog/Lato-Regular.ttf') format('truetype');
 font-style: normal;
 font-weight: normal;
 text-rendering: optimizeLegibility;
}


@font-face {
 font-family: 'LatoWebSemibold';
 src: url('/fonts/blog/Lato-SemiboldItalic.eot');
 src: url('/fonts/blog/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
      url('/fonts/blog/Lato-SemiboldItalic.woff2') format('woff2'),
      url('/fonts/blog/Lato-SemiboldItalic.woff') format('woff'),
      url('/fonts/blog/Lato-SemiboldItalic.ttf') format('truetype');
 font-style: italic;
 font-weight: normal;
 text-rendering: optimizeLegibility;
}

对于非网络字体，我可以指定 font-weight: 400 或 font-weight: 200 并使用较重或较轻的字体版本。

然而，对于网络字体，我似乎必须更改 font-family 以及 font-weight 才能更改字体的粗细。

我可以通过指定 font-weight 来使用同一个 font-family 的不同版本吗？

或者这是不可能的，使用网络字体的网站是否会在每次更改粗细时更改字体系列？

Answer 1

您不必更改字体系列。事实上，您保持字体系列不变，只是更改 font-style 和 font-weight 的值。请记住，应首先提及标准字体，因为这可以防止某些浏览器无法很好地识别您的定义：

@font-face {
 font-family: 'LatoWeb'; 
 src: url('/fonts/blog/Lato-Regular.eot');
 src: url('/fonts/blog/Lato-Regular.eot?#iefix') format('embedded-opentype'),
      url('/fonts/blog/Lato-Regular.woff2') format('woff2'),
      url('/fonts/blog/Lato-Regular.woff') format('woff'),
      url('/fonts/blog/Lato-Regular.ttf') format('truetype');
 text-rendering: optimizeLegibility;
}

@font-face {
 font-family: 'LatoWeb';
 src: url('/fonts/blog/Lato-SemiboldItalic.eot');
 src: url('/fonts/blog/Lato-SemiboldItalic.eot?#iefix') format('embedded-    opentype'),
      url('/fonts/blog/Lato-SemiboldItalic.woff2') format('woff2'),
      url('/fonts/blog/Lato-SemiboldItalic.woff') format('woff'),
      url('/fonts/blog/Lato-SemiboldItalic.ttf') format('truetype');
 font-style: italic;
 font-weight: normal; /* for a semibold typo, you might want to set a different value */
 text-rendering: optimizeLegibility;
}

所以你可以像这样引用字体：

.my-font-element {
  font-family: 'LatoWeb';
}
.my-font-element .italic {
  font-style: italic;
}

Answer 2

当您更改 font-family 时，您不需要也指定 font-weight 或 font-style。相反，您可以为您使用的每个字体变体声明类。

例如：

.lato-web {
  font-family: 'LatoWeb';
}

.lato-web-semibold {
  font-family: 'LatoWebSemibold';
}

此外，通过 font-weight 强制使用不同粗细的 Web 字体中的文本可能无法呈现为保留其原始粗细的文本。

Web 字体：如何在不更改字体系列的情况下指定粗细？

Web fonts: how can I specify weight without changing the font family?

css

typography

webfonts