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

我已经在本地对此进行了测试，根据我的结果，我可以说这肯定是因为您已经为每个＆＃34; font-weight＆＃34;分配了价值。属性。

这些不存在：

介质
薄
extrathin

将它们更改为适当的重量，它将正常工作。
http://www.w3schools.com/cssref/pr_font_weight.asp

唯一看起来正确的是设置为＆＃39; normal＆＃39;所以有趣的是，浏览器（我在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'; }

@ font-face的自定义字体仅加载

2 个答案: