当它们都被称为 Roboto 时，浏览器如何知道我想使用什么字体?

Question

这是一个菜鸟问题，但这里是...

从本地服务器加载字体时，我看到很多使用以下样式的示例：

@font-face {
font-family: "Roboto";
src: local(Roboto Thin),
url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
url("#{$roboto-font-path}Roboto-Thin.woff") format("woff");
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: "Roboto";
src: local(Roboto Medium),
url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"),
url("#{$roboto-font-path}Roboto-Light.woff") format("woff");
font-weight: 500;
font-style: normal;

请注意，这两个font-family都称为 Roboto。

如何在样式设置中让我的浏览器知道我想使用"瘦"或"中"字体？

在其他项目中，我在从外部页面加载字体时使用font-family: "Roboto Light"。

Answer 1

您可以通过定义@font-face中定义的font-weight在样式中调用它。

因此，当您要使用"Roboto Thin"设置font-weight: 100;和用于"Roboto Medium"设置font-weight: 500;时。

同样，如果要更改@font-face内的font-style，则可以将自定义字体设置为斜体和粗体。