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

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 3

这是问题所在：您无法指定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

请注意，所有9种粗细字体中很少有字体。

Answer 4

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

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

Answer 5

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

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

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

指定Google字体的样式和重量

5 个答案: