浏览器在全部被称为Roboto时如何知道我想使用的字体？

Question

这是这样一个noob问题，但在这里不用...

我加载从本地服务器字体时使用下面的造型看到了很多例子：

@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。

如何在我的造型中让我的浏览器知道我想要使用Thin还是Medium字体？

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

Answer 1

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

所以当你想分别使用"Roboto Thin"设置font-weight: 100;和"Roboto Medium"设置font-weight: 500;。

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