如何使用同名的字体家族？ [英] How to use font-family with same name?

问题描述

这里是css：一个是Regular，另一个是Bold，但是两者都有相同的字体系列名称。

Here is the css: one is Regular and other one is Bold but both has same font-family name.

如何在样式表中区分和使用它？

How to differentiate and use it in our stylesheet?

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Bold.eot');
    src: url('fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Montserrat-Bold.woff') format('woff'),
        url('fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Regular.eot');
    src: url('fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Montserrat-Regular.woff') format('woff'),
        url('fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

推荐答案

使用不同的权重。

给第一个赋予 200 ，第二个赋予 300 。然后，您可以使用以下两个：

Give the first one a weight of 200 and the second one a weight of 300. Then, you can use the two:

font-family: 'Montserrat', sans-serif;
font-weight: 200 /* for the first one */ 
/* or font-weight: 300; for the second one */

编辑：在OP指定权重之后

After the OP specified the weights

您可以将第二个（粗体）属性赋予以下属性：

You can give the following attributes to the second (bold) one:

font-weight: bold;
font-weight: 700; /* fallback */

，以下是第一个（常规）：

and the following to the first (regular) one:

font-weight: 300; 

现在，使用粗体：

font-family: 'Montserrat', sans-serif;
font-weight: bold; /* or 700 */

并使用普通的，请切换 font-weight ：

and to use the normal one, switch the font-weight:

font-weight: 300;

去吧！ ：）

Mr_Green，刚从Google的Font CSS中提取：

Mr_Green, fresh out of Google's Font CSS:

一个基本类比，描述 font-weight 规则的工作原理

用名称描述字体时，想象一下（在解释的最抽象的意义上）您创建了一个对象；但是，当您创建多个具有相同名称的字体规则时，请想象您创建了一个数组。现在，要访问和数组，必须使用其 index 。此处的索引是字体重量。因此，要使用不同的权重（从技术上来说是字体），请使用权重。继续上面的数组的类比，您必须手动
定义索引，它不会自动完成。

When you describe a font with a name, imagine (in the most abstract of the explanations) that you create an object; but, when you create multiple font-rules with the same name, imagine you create an array. Now, to access and array, you have to use its index. The index here is the font-weight. So, to access different weights (technically, fonts), you use the weight. Continuing the analogy of the array above, you have to manually define the index, it's not automatically done.

我认为使它更加清晰。

I think this makes it a little more clear.

这篇关于如何使用同名的字体家族？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！