相关疑难解决方法(0)

我正在查看@ font-face CSS规则的MDC页面,但我没有得到一件事.我有单独的文件粗体,斜体和粗体+斜体.如何将所有三个文件嵌入一个@font-face规则中？例如,如果我有:

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

浏览器将不知道哪个字体用于粗体(因为该文件是DejaVuSansBold.ttf),因此它将默认为我可能不想要的东西.如何告诉浏览器我对某种字体的所有不同变体？

我有以下字体文件：

Raleway-Bold.ttf
Raleway-ExtraBold.ttf
Raleway-ExtraLight.ttf
Raleway-Heavy.ttf
Raleway-Light.ttf
Raleway-Medium.ttf
Raleway-Regular.ttf
Raleway-SemiBold.ttf
Raleway-Thin.ttf

现在我已经在我的 css 中实现了它们，如下所示：

    @font-face {
    font-family: 'Raleway';
    src: url('/site/resources/fonts/Raleway-Regular.ttf');
}

.bold
{
    font-family: "Raleway-bold"; !important;
    src: url('/site/resources/fonts/Raleway-Bold.ttf');
}


.extraBold
{
    font-family: "Raleway"; !important;
    src: url('/site/resources/fonts/Raleway-ExtraBold.ttf');
}


.extraLight
{
    font-family: "Raleway"; !important;
    src: url('/site/resources/fonts/Raleway-ExtraLight.ttf');
}


.heavy
{
    font-family: "Raleway"; !important;
    src: url('/site/resources/fonts/Raleway-Heavy.ttf');
}


.light
{
    font-family: "Raleway"; !important;
    src: url('/site/resources/fonts/Raleway-Light.ttf');
}


.medium
{
    font-family: "Raleway"; !important;
    src: url('/site/resources/fonts/Raleway-Medium.ttf');
}



.thin
{
    font-family: "Raleway"; !important;
    src: url('/site/resources/fonts/Raleway-Thin.ttf');
}


.semi_bold
{
    font-family: "Raleway"; …