指定Google字体的样式和重量

Question

我在我的一些页面中使用Google字体,并在尝试使用字体的变体时碰壁.示例:http://www.google.com/webfonts#QuickUsePlace : quickUse/ Family: Open+Sans

我通过链接标签导入三个面,Normal,Bold,ExtraBold.正常的面部显示正确,但我无法弄清楚如何在我的CSS中使用字体的变体

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

• 'Open Sans Bold'
• 'Open Sans 700'
• 'Open Sans Bold 700'
• 'Open 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)使用与谷歌字体相同的重量.

很聪明:-)

请注意,必须通过标题中的链接标记网址(Google字体网址的系列查询参数)专门导入不同的字体粗细.

例如,以下链接将包括权重400和700:

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

Answer 2

问题在于：您无法指定 Google 字体集中不存在的字体粗细。单击字体下方的 SEE SPECIMEN 链接，然后向下滚动到 STYLES 部分。在那里，您将看到可用于该特定字体的每种“样式”。遗憾的是，Google 没有列出每种样式的 CSS 字体权重。以下是名称映射到 CSS 字体粗细数字的方式：

Thin            100     
Extra Light     200
Light           300
Regular         400
Medium          500
Semi-Bold       600
Bold            700
Extra-Bold      800
Black           900

请注意，很少有字体具有全部 9 种权重。

Answer 3

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

对于光: font-weight : 100; 或 font-weight : lighter;

正常: font-weight : 500; 或 font-weight : normal;

大胆: font-weight : 700; 或者 font-weight : bold;

更大胆: font-weight : 900; 或者 font-weight : bolder;

Answer 4

API 已更新，现在您必须使用“:wght@700”导入所需的字体粗细

例如：“https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap”

来源： https: //developers.google.com/fonts/docs/css2