Css Web字体：如何在不更改字体系列的情况下指定权重？

不同权重的Webfonts位于不同的文件中，因此通常显示为不同的

字体系列

：

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

对于非web字体，我可以指定

font-weight:400

或

font-weight:200

，并使用较重或较轻的字体版本

然而，对于web字体，我似乎必须更改

字体系列

，以及

字体重量

，以更改字体的重量

我可以只通过指定

字体重量来使用同一
字体系列的不同版本吗？

或者这是不可能的，使用web字体的网站每次更改字体的重量时都会更改字体系列吗？
您不必更改字体系列。实际上，您保持字体系列不变，只需更改
字体样式
和
字体重量
的值。请记住，应该首先提到标准字体，因为这会防止某些浏览器无法很好地识别您的定义：

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

更改
字体系列
时，不需要也指定
字体重量
或
字体样式
。相反，您可以为正在使用的每个字体变体声明类

例如：

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

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

此外，通过
font-weight
强制转换为不同权重的web字体中的文本可能无法以其原始权重呈现文本。
请确保在@font-face中定义的样式与在字体使用中使用的样式相同。因此，如果您有一个使用“font-weight:600；font-style:normal；”的CSS类，那么您需要定义一个具有这些值的字体面。