谷歌字体家族。按类引用特定字体。多么?

Question

以下面的字体为例：

罗博托·莫诺

根据页面，它有许多类型的面孔可供选择。

--我像这样导入它：

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700,900" rel="stylesheet">

我创建CSS类：

/*
Custom Class  : FONT-ROBOTO-MONO[-*]
Override      : N/A
Method        : N/A
Usage Example : <p class="font-roboto-mono-bold"></p>
*/

.font-roboto-mono { font-family: Roboto Mono, monospace; }

.font-roboto-mono-thin { font-family: Roboto Mono Thin, monospace; }
.font-roboto-mono-thin-italic { font-family: Roboto Mono Thin Italic, monospace; }
.font-roboto-mono-light { font-family: Roboto Mono Light, monospace; }
.font-roboto-mono-light-italic { font-family: Roboto Mono Light Italic, monospace; }
.font-roboto-mono-regular { font-family: Roboto Mono Regular, monospace; }
.font-roboto-mono-regular-italic { font-family: Roboto Mono Regular Italic, monospace; }
.font-roboto-mono-medium { font-family: Roboto Mono Medium, monospace; }
.font-roboto-mono-medium-italic { font-family: Roboto Mono Medium Italic, monospace; }
.font-roboto-mono-bold { font-family: Roboto Mono Bold, monospace; }
.font-roboto-mono-medium-bold { font-family: Roboto Mono Bold Italic, monospace; }

我用它是这样的：

<p class="font-roboto-mono-bold">Hello world!</p>

...and什么都没变。我怀疑我在导入URL中缺少一个参数。我似乎找不到在线，如果我需要导入每一个单独或只是将它们添加到URL导入。

作为记录，Roboto Mono类是唯一能工作的类。

Answer 1

​

*{
  font-family: 'Rotobo Mono';
  font-size: 20pt;
}

.thin{
  font-weight: 100;
}
.light{
  font-weight: 300;
}

.regular{
  font-weight: 400;
}
.medium{
  font-weight: 500;
}
.bold{
  font-weight: 700;
}

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,300,400,500,700,900" rel="stylesheet">

<p class="thin">Thin</p>
<p class="light">Light</p>
<p class="regular">Regular</p>
<p class="medium">Medium</p>
<p class="bold">Bold</p>

​

如果你想改变字体的样式，你应该使用font-weight

Answer 2

最终修订版

/*
Custom Class  : FONT-ROBOTO-MONO + FONT-WEIGHT-[-*]
Override      : N/A
Import        : <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
Usage Example : <p class="font-roboto-mono font-weight-thin"></p>
*/

/* Initialize */
.font-roboto-mono {
font-family: 'Roboto Mono', monospace;
}

/* Call */
.font-weight-thin {
  font-weight: 100;
  font-style: normal;
}

.font-weight-thin-italic {
  font-weight: 100;
  font-style: italic;
}

.font-weight-light {
  font-weight: 300;
  font-style: normal;
}

.font-weight-light-italic {
  font-weight: 300;
  font-style: italic;
}

.font-weight-regular {
  font-weight: 400;
}

.font-weight-regular-italic {
  font-weight: 400;
  font-style: italic;
}

.font-weight-medium {
  font-weight: 500;
}

.font-weight-medium-italic {
  font-weight: 500;
  font-style: italic;
}

.font-weight-bold {
  font-weight: 700;
}

.font-weight-bold-italic {
  font-weight: 700;
  font-style: italic;
}