html - 谷歌字体家族。按类引用特定字体。如何？

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>

......没有任何改变。我怀疑我在导入 URL 中缺少一个参数。如果我需要单独导入每一个或者只是将它们添加到 URL 导入中，我似乎无法在网上找到。

作为记录，Roboto Mono类是唯一有效的类。

标签： htmlcss

Answer 1

最终修订

/*
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;
}