CSS 自定义字体

Question

我有以下字体文件：

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"; !important;
    src: url('/site/resources/fonts/Raleway-SemiBold.ttf');
}

但是，当我将课程更改为semi_bold例如没有任何变化时？那么我是否以错误的方式实施它们，或者我错过了什么？

请注意，第一个字体工作正常，但其余部分似乎没有对我的文本进行任何更改

Answer 1

您需要在块中定义所有自定义字体@font-face。只有这样你才能在正常样式中使用它们。在这里您只定义了Raleway，因此使用它的那些类（除 之外的所有类.bold）都将使用Raleway-Regular.ttf.

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

.normal {
    font-family: 'Raleway';
}
.bold {
    font-family: 'Raleway-bold';
}
...

请注意，您需要在普通文本应使用的地方定义font-family: 'Raleway';。