css - 指定 Google 字体的样式和粗细

Question

我在我的一些页面中使用了 Google 字体，但在尝试使用字体变体时遇到了困难。示例:http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

我正在通过链接标签导入三个面孔，Normal、Bold、ExtraBold。正常的脸显示正确，但我不知道如何在我的 CSS 中使用字体的变体

我尝试了以下所有作为 font-family 的属性但没有骰子:

• '打开无粗体'
• '打开 Sans 700'
• '打开 Sans Bold 700'
• '打开 Sans:Bold'

谷歌文档本身并没有提供太多帮助。有人知道我应该如何编写我的 CSS 规则来显示这些变体吗？

Answer 1

他们使用常规 CSS。

只需像这样使用您的常规字体系列:

font-family: 'Open Sans', sans-serif;

现在您可以通过添加来决定字体应该具有的“粗细”

半粗体

font-weight:600;

粗体 (700)

font-weight:bold;

用于加粗 (800)

font-weight:800;

像这样它的后备证明，所以如果谷歌字体应该“失败”，你的备份字体 Arial/Helvetica(Sans-serif) 使用与谷歌字体相同的粗细。

非常聪明:-)

请注意，必须通过 header 中的链接标记 url(google 字体 url 的系列查询参数)专门导入不同的字体粗细。

例如，以下链接将包含权重 400 和 700:

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>

对于 CSS2

<link href='fonts.googleapis.com/css2?family=Comfortaa:wght@400;700'; rel='stylesheet' type='text/css'>