CSS 指定 Google 字体的样式和粗细

Specifying Style and Weight for Google Fonts

提问by Steven Garcia

I am using Google fonts in a few of my pages and hit a wall when trying to use variations of a font. Example: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

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

I am importing three faces, Normal, Bold, ExtraBold via the link tag. The normal face displays correctly, but I cannot figure out how to use the variants of the font in my CSS

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

I tried all of the following as attributes for font-family but no dice:

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

• 'Open Sans Bold'
• 'Open Sans 700'
• 'Open Sans Bold 700'
• 'Open Sans:Bold'

• '打开 Sans Bold'
• '打开 Sans 700'
• '打开 Sans Bold 700'
• 'Open Sans:Bold'

The google docs themselves do not offer much help. Anyone have an idea of how I should write my CSS rules to display these variants?

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

回答by Marco Johannesen

They use regular CSS.

他们使用常规 CSS。

Just use your regular font family like this:

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

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

Now you decide what "weight" the font should have by adding

现在，您可以通过添加来决定字体应具有的“权重”

for semi-bold

对于半粗体

font-weight:600;

for bold (700)

粗体 (700)

font-weight:bold;

for extra bold (800)

加粗 (800)

font-weight:800;

Like this its fallback proof, so if the google font should "fail" your backup font Arial/Helvetica(Sans-serif) use the same weight as the google font.

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

Pretty smart :-)

很聪明:-)

Note that the different font weights have to be specifically imported via the link tag url (family query param of the google font url) in the header.

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

For example the following link will include both weights 400 and 700:

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

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

回答by Steven Garcia

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

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

For light: font-weight : 100;Or font-weight : lighter;

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

For normal: font-weight : 500;Or font-weight : normal;

对于正常： font-weight : 500;或 font-weight : normal;

For bold: font-weight : 700;Or font-weight : bold;

对于粗体： font-weight : 700;或 font-weight : bold;

For more bolder: font-weight : 900;Or font-weight : bolder;

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

回答by NetFool

Here's the issue: You can't specify font weights that don't exist in the font set from Google. Click on the SEE SPECIMEN link below the font, then scroll down to the STYLES section. There you'll see each of the "styles" available for that particular font. Sadly Google doesn't list the CSS font weights for each style. Here's how the names map to CSS font weight numbers:

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

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

Note that very few fonts come in all 9 weights.

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

回答by Ritam Das

you can use the weight value specified in the Google Fonts.

您可以使用 Google Fonts 中指定的权重值。

body{
 font-family: 'Heebo', sans-serif;
 font-weight: 100;
}