@font-face只加载最后一个自定义字体

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网络控制台中，我可以看到它始终只加载一种字体。

- Giovani Barcelos

---

当您将字体分配给HTML元素时，是否指定了font-weight: value属性？因此，如果您希望所有<h1>标签都是中等的，则为font-weight: medium？ - Chris Haugen

它并不会改变任何东西，因为Chrome网络控制台只显示我下载的最后一个字体文件。但是默认应该是font-weight:normal。 - Giovani Barcelos

@GiovaniBarcelos 这里声明的一些字体权重（medium，thin，extrathin）不存在。所以首先要解决这个问题。在整个字体集中使用相同的字体系列名称是可以的。为每个字体分配一个数字权重，medium > 500; text > normal 或 400; thin > 300 或 200; extrathin > 200 或 100。然后按从最轻到最粗的顺序排序。并包括“font-style:normal”属性。然后当您想要使用您的字体时，它应该像这样简单：h1 {font:500 21px/1.2 'Myriad Set Pro', sans-serif;} p {font: 400 14px/1.2 'Myriad Set Pro', sans-serif;}, 等等... - partypete25

Answer 1

我在本地测试过，从我的结果可以说，这绝对是由于您为每个 "font-weight" 属性分配的值。 这些不存在：

- medium - thin - extrathin

将它们更改为适当的重量，它就会正常工作。唯一看起来正确的是设置为“normal”的那个，所以有趣的是浏览器（我在Chrome中测试过）总是加载最后一个声明的... http://www.w3schools.com/cssref/pr_font_weight.asp

- partypete25

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属性。Font-weight只会选择相同字体文件中指定的字重。

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

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

- Scott

---

你确定这是唯一的方法吗？我从苹果官网上获取了这些文件，他们只使用了一个全局字体声明“Myriad Set Pro”，尽管使用了不同的文件。 - Giovani Barcelos

再看看苹果公司，他们实际上声明了两个不同的名称和相同的名称。我无法反驳苹果公司的用法，但我怀疑他们声明了两个名称，因为在他们控制的设备浏览器上使用相同的名称可能只能起作用。而且他们同时使用eot和woff格式。但是现实情况并非如此。我不是100％确定。我知道分开命名肯定可以起作用。 - Scott