Question

不同权重的Web字体位于不同的文件中，因此通常显示为不同的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-family

，我可以使用相同font-weight的不同版本吗？

或者这是不可能的，使用网络字体的网站每次更改重量时都会更改字体系列吗？

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字体：如何在不更改字体系列的情况下指定权重？

2 个答案: