代码之家 › 专栏 › 技术社区 › suchislife

谷歌字体系列。按类引用特定字体。怎么用?

css3 html5 css html

suchislife · 技术社区 · 7 年前

以下列字体为例:

根据这一页,它有许多字体可供选择。

我是这样导入的:

<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导入,我似乎无法在网上找到它们。

作为记录, 机器人单声道 类是唯一有效的。

2 回复 | 直到 7 年前

kyun 7 年前

*{
  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

suchislife 7 年前

最终修订

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

9 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

10 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

10 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

10 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

10 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

10 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

10 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

10 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

10 月前