Question

在this article之后，我宣布我的各种字体表面名称相同，但font-weight值不同（100,400,600和700）。为此，我使用Font Squirrel字体生成器生成的代码，只需为所有font-family实例设置相同的值。

出于某种原因，100和400显示相同的东西（显然是常规的），600和700也显示相同的东西（可能是粗体）。知道为什么会这样吗？

@font-face {
    font-family: 'proximanova';
    src: url('proximanova-bold.eot');
    src: url('proximanova-bold.eot?#iefix') format('embedded-opentype'),
         url('proximanova-bold.woff2') format('woff2'),
         url('proximanova-bold.woff') format('woff'),
         url('proximanova-bold.ttf') format('truetype'),
         url('proximanova-bold.svg#proxima_nova_rgbold') format('svg');
    font-weight: 700 !important;
    font-style: normal;
}
@font-face {
    font-family: 'proximanova';
    src: url('proximanova-light.eot');
    src: url('proximanova-light.eot?#iefix') format('embedded-opentype'),
         url('proximanova-light.woff2') format('woff2'),
         url('proximanova-light.woff') format('woff'),
         url('proximanova-light.ttf') format('truetype'),
         url('proximanova-light.svg#proxima_novalight') format('svg');
    font-weight: 100 !important;
    font-style: normal;
}
@font-face {
    font-family: 'proximanova';
    src: url('proximanova-semibolditalic.eot');
    src: url('proximanova-semibolditalic.eot?#iefix') format('embedded-opentype'),
         url('proximanova-semibolditalic.woff2') format('woff2'),
         url('proximanova-semibolditalic.woff') format('woff'),
         url('proximanova-semibolditalic.ttf') format('truetype'),
         url('proximanova-semibolditalic.svg#proxima_novasemibold_italic') format('svg');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'proximanova';
    src: url('proximanova-regularitalic.eot');
    src: url('proximanova-regularitalic.eot?#iefix') format('embedded-opentype'),
         url('proximanova-regularitalic.woff2') format('woff2'),
         url('proximanova-regularitalic.woff') format('woff'),
         url('proximanova-regularitalic.ttf') format('truetype'),
         url('proximanova-regularitalic.svg#proxima_novaregular_italic') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'proximanova';
    src: url('proximanova-semibold.eot');
    src: url('proximanova-semibold.eot?#iefix') format('embedded-opentype'),
         url('proximanova-semibold.woff2') format('woff2'),
         url('proximanova-semibold.woff') format('woff'),
         url('proximanova-semibold.ttf') format('truetype'),
         url('proximanova-semibold.svg#proxima_novasemibold') format('svg');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'proximanova';
    src: url('proximanova-regular.eot');
    src: url('proximanova-regular.eot?#iefix') format('embedded-opentype'),
         url('proximanova-regular.woff2') format('woff2'),
         url('proximanova-regular.woff') format('woff'),
         url('proximanova-regular.ttf') format('truetype'),
         url('proximanova-regular.svg#proxima_nova_rgregular') format('svg');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'proximanova';
    src: url('proximanova-lightitalic.eot');
    src: url('proximanova-lightitalic.eot?#iefix') format('embedded-opentype'),
         url('proximanova-lightitalic.woff2') format('woff2'),
         url('proximanova-lightitalic.woff') format('woff'),
         url('proximanova-lightitalic.ttf') format('truetype'),
         url('proximanova-lightitalic.svg#proxima_novalight_italic') format('svg');
    font-weight: 100;
    font-style: italic;
}

Answer 1

尝试使用描述性值设置权重时，首先尝试使用相同的字体系列名称（normal - bold - bolder - lighter）。

否则请考虑默认的 @ font-face 功能（导入字体，为其指定字体系列名称），

因此，首先要区分font-family:描述符（例如proximanova-bold，proximanova-semi等）

扩展此选项，如果在已使用这些属性设置样式的特定字体上设置字体样式和重量，则可能会导致双重样式。
然后你应该设置所有字体权重＆amp;样式为正常，只需选择目标font-family:

 @font-face {
    font-family: 'proximanova-bold';
    src: url('proximanova-bold.eot');
    src: url('proximanova-bold.eot?#iefix') format('embedded-opentype'),
         url('proximanova-bold.woff2') format('woff2'),
         url('proximanova-bold.woff') format('woff'),
         url('proximanova-bold.ttf') format('truetype'),
         url('proximanova-bold.svg#proxima_nova_rgbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 2

Proxima Nova字体的作者偶尔不会将其分成许多文件。它们中的每一个都只支持一组属性，如压缩，重量等。即使您将font-weight声明替换为!important，!very important也无法更改它。）

仔细阅读这篇关于Proxima Nova的文章，你可以发现它支持七种重量：瘦（100），轻（300），普通（400），半钢（600），粗体（700），Extrabold（ 800）和黑色（900）。您也可以验证它here。

在您的代码中，您尝试，例如，在灯光字体上设置重量100，但其重量固定为300（看起来几乎像常规，但实际上是不同的）。采取＆＃39; Thin＆＃39;而不是字体，你将获得100。

Answer 3

我建议将Firebug与Firefox浏览器一起用作解决此CSS字体大小问题的工具。 Firebug将显示哪些CSS属性优先，以指定网页元素的特定样式特征。来自Firebug的反馈经常揭示CSS相关问题的解决方案。

（由于声誉点不足而删除了图片的Firebug示例。）

一旦你知道一个特定元素如何获得它的字体大小值，你就可以改变它来显示它想要的样子。

BT，Chrome有一个类似的工具，可以提供类似的反馈。

Answer 4

有时字体只支持某些字体粗细。我建议查看它们以查看支持哪些权重。

具有相同字体名称但具有不同字体权重值的不同字体文件的多个字体声明

4 个答案: