为 Google 字体指定样式和粗细

Posted 2023-02-22

技术标签:

【中文标题】为 Google 字体指定样式和粗细【英文标题】：Specifying Style and Weight for Google Fonts 【发布时间】：2011-11-07 12:52:19 【问题描述】：

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

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

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

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

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

【问题讨论】：

【参考方案1】：

他们使用常规的 CSS。

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

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

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

半粗体

font-weight:600;

用于粗体 (700)

font-weight:bold;

用于加粗 (800)

font-weight:800;

就像它的后备证明一样，所以如果 google 字体“失败”，您的备用字体 Arial/Helvetica(Sans-serif) 使用与 google 字体相同的权重。

很聪明:-)

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

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

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

【讨论】：

这是部分事实，因为如果你不评估链接 css 的权重，谷歌不会下载正确的“粗体”格式来实现这一点，你必须声明“链接 href”如下：有什么办法可以让浏览器使用 600 的权重来代替我旧的“粗体”规则？我认为 700 太厚了，我的网站上的任何地方都不想要它。什么意思？我猜你应该把粗体改成600？。您的意思是改变<strong> 和<b> 上的“粗体”行为吗？我正在使用@import url(fonts.googleapis.com/css?family=Open+Sans:400,300);因为我无法访问 html，并且当我尝试使用以下内容时... font-family: 'Open Sans', sans-serif;字体粗细：300；它不会改变字体粗细。想法？那么，如果我可以为此使用普通的 CSS，为什么 Google 让我决定要使用哪个权重？【参考方案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;

【讨论】：

太棒了。但是字体可以比 font-weight : 100 轻吗？否，最小值仅为 100，最大值为 900。这是不正确的，需要考虑以下值：light: font-weight: 300;normal: font-weight: 400;semi-bold: font-weight: 600;bold: font-weight: 700;extra bold: font-weight: 800;【参考方案3】：

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

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

【讨论】：

【参考方案4】：

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

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

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

【讨论】：

【参考方案5】：

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

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

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

【讨论】：

【参考方案6】：

如果有人正在寻找具有多种字体系列 + 粗细的最新格式，请参见下文（例如，使用 Open Sans + Roboto）

https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,800&family=Roboto:wght@500&display=swap

请注意，最新版本的谷歌字体网络界面在显示代码示例方面的用户体验不佳。有一个“选定的系列”面板显示然后消失，它与字体变体“添加”按钮（加号/减号）重叠，这些按钮也位于右侧。不直观的解决方案是重新加载页面。

【讨论】：