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-weight中定义的@font-face来在样式中调用它。

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

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

当浏览器全部被称为Roboto时，浏览器如何知道我想要使用哪种字体？

1 个答案: