Question

这是css：一个是Regular，另一个是Bold，但两者都有相同的font-family名称。

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

@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;
}

Answer 1

使用不同的重量。

给第一个重量为200，第二个重量为300。然后，您可以使用这两个：

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

编辑：OP指定权重后

您可以将以下属性提供给第二个（粗体）：

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

以及第一个（常规）的以下内容：

font-weight: 300;

现在，使用粗体：

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

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

font-weight: 300;

你去吧！：）

Mr_Green，刚出谷歌的字体CSS：

描述font-weight规则如何运作的基本类比

当您描述具有名称的字体时，想象（在解释的最抽象中）您创建一个对象;但是，当您创建多个具有相同名称的字体规则时，可以想象您创建了一个数组。现在，要访问和数组，您必须使用其index。这里的index是font-weight。因此，要使用不同的权重（技术上，字体），您可以使用权重。继续上述数组的类比，你必须手动 定义索引，它不会自动完成。

我认为这让它更加清晰。

Answer 2

只需为粗体和常规字体使用不同的字体系列名称，然后像往常一样在CSS中引用。

@font-face {
   font-family: 'MontserratBold';
   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;
}

Answer 3

font-family值不必是唯一的：According to the w3 consortium，'字体家族定义了一组在宽度，宽度或斜度上不同的面。 CSS使用姓氏的组合[即font-family]和其他字体属性[src，font-style，font-weight和font-stretch]来选择单个面孔。也就是说，两个不同的@font-face规则可以具有相同的font-family值（例如“蒙特塞拉特”），但可以通过例如不同的font-weight值（例如，分别为粗体和普通）。这样可以选择不同的字体。

@nag指定的CSS样式对我来说不错。
如何区分它们？使用特定于选择器的CSS。主要由开发者设置。
但是，由于通常用户代理为标准html元素定义default CSS styles，因此大多数时候您不需要（为这些元素设置CSS）。例如。假设您已将font-family定义为蒙特塞拉特（例如body），并且默认CSS样式未被覆盖，则strong元素的内容如

<strong>I'm bold</strong>

“自动”呈现为粗体，因为其默认CSS样式通常为：

strong {
  font-weight: bold; /* this is the same as 700 b.t.w.*/
}

因此，将自动选择@font-face规则中带有font-weight: bold的字体。

也要知道：再次according to the w3 consortium，如果找不到请求的字体样式，则用户代理可以从最接近的相似样式中合成请求的样式。但是据我所知，italics和bold只是这种情况。

如何使用同名的font-family？

3 个答案: