带有@字体的自定义字体仅在最后加载

Question

在我的project.less文件中，我加载了以下字体：

@font-face {
    font-family: 'Myriad Set Pro';
    src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_medium.woff) format('woff');
    //font-style: normal;
    font-weight: medium;
}
@font-face {
    font-family: 'Myriad Set Pro';
    src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_text.woff) format('woff');
    //font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'Myriad Set Pro';
    src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_thin.woff) format('woff');
    //font-style: normal;
    font-weight: thin;
}
@font-face {
    font-family: 'Myriad Set Pro';
    src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_extrathin.woff) format('woff');
    //font-style: normal;
    font-weight: extrathin;
}

但是它总是只加载一种字体，这是我写的最后一种字体。在这种情况下，我的应用程序上的每一个字体都是非常薄的，即使它们的重量也是正常的。如果我最后写介质，每一种字体都是中等的。

在chrome网络控制台中，我可以看到它总是只加载一种字体。

Answer 1

我已经在本地测试过这一点，从我的结果可以说，这肯定是因为您分配了每个“字体权重”属性的值。

这些问题并不存在：

• 5~6成熟
• 瘦的
• 超薄

将它们更改为适当的权重，它将正确工作。

weight.asp

唯一看起来正确的是设置为“normal”，所以有趣的是浏览器(我用chrome测试过)总是在最后一个声明中加载.

Answer 2

他们都有相同的名字。所以，正如级联样式表那样.最后一个声明是优先声明。

所以..。更改并调整字体名称.

@font-face {
    font-family: 'Myriad Set Pro Medium';
    src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_medium.woff) format('woff');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'Myriad Set Pro Normal';
    src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_text.woff) format('woff');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'Myriad Set Pro Thin';
    src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_thin.woff) format('woff');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'Myriad Set Pro Extra Thin';
    src: url(/assets/fonts/Myriad-Apple-Text/myriad-set-pro_extrathin.woff) format('woff');
    font-style: normal;
    font-weight: normal;
}

如果您需要为每个面板调用不同的字体文件(瘦、普通、超薄等)，那么您需要指定实际的字体名称，而不是依赖font-weight属性。字体权重只会在同一字体文件中选择指定的权重。

因此，在CSS中，您将更改font-weight，而不是调整font-family。

.p { font-family: 'Myriad Set Pro Normal'; }
h1 { font-family: 'Myriad Set Pro Medium'; }
.caption { font-family: 'Myriad Set Pro Thin'; }