都叫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。

如何在我的样式中让我的浏览器知道我想使用 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，您可以将自定义字体设置为斜体和粗体。

都叫Roboto，浏览器怎么知道我要用什么字体？

How does the browser know what font I want to use when they are all called Roboto?

css

font-face