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时，例如没有任何变化？所以我是以错误的方式实施它们还是我错过了什么？

注意第一个raleway font-face工作正常，但剩下的似乎没有对我的文字做任何更改

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';。

Answer 2

您需要在自己的@font-face规则中声明每个字体（此处为每个字体粗细）。您还应该使用不同的字体格式来覆盖所有浏览器。有关前一原则的简单示例，请参阅font-face weight，对于后者，请使用例如FontSquirrel generator。 {{3}}。

CSS自定义字体

2 个答案: