本指南介绍了如何使用 Google Fonts API 向网页添加字体。您无需进行任何编程；您只需向 HTML 文档添加一个特殊的样式表链接，然后以 CSS 样式引用该字体即可。https://www.octfgroup.com/
简单示例
下面是一个示例。将以下 HTML 复制并粘贴到文件中：
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
然后在新型网络浏览器中打开该文件。您应该会看到一个页面，其中以 Tangerine 字体显示以下内容：
打造美丽网络！
该语句是普通文本，因此您可以使用 CSS 更改其外观。尝试为上一个示例中的样式添加阴影：
body {
font-family: 'Tangerine', serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
现在，您应该会在文本下方看到一个阴影：
打造美丽网络！
这只是使用 Fonts API 和 CSS 的开始。
概览
只需两步，您就可以开始使用 Google Fonts API：
添加样式表链接，以请求所需的网页字体：
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Font+Name">
在样式表中，使用请求的网页字体为元素设置样式：
.css-selector {
font-family: 'Font Name', serif;
}
也可以在元素本身上设置内嵌样式：
<div style="font-family: 'Font Name', serif;">Your text</div>
注意 ：在 CSS 样式中指定网页字体时，请始终列出至少一种后备网页安全字体，以避免意外行为。尤其需要注意的是，应在列表末尾添加 CSS 通用字体名称（例如 serif 或 sans-serif），以便浏览器在需要时回退到默认字体。
如需查看您可以使用的字体的列表，请参阅 Google Fonts。
在样式表网址中指定字体系列和样式
如需确定要在样式表链接中使用的网址，请先使用 Google Fonts API 基准网址：
https://fonts.googleapis.com/css
然后，添加 family= 网址参数，以及一个或多个字体系列名称和样式。
例如，要请求 Inconsolata 字体，请使用以下代码：
https://fonts.googleapis.com/css?family=Inconsolata
注意： 请将字体系列名称中的所有空格替换为加号 (+)。
如需请求多个字体系列，请使用竖线字符 (|) 分隔名称。
例如，如需请求字体 Tangerine、Inconsolata 和 Droid Sans，请运行以下命令：
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
请求多种字体可让您在网页中使用这些字体。（但不要过度使用；大多数网页都不需要很多字体，并且请求大量字体可能会使网页加载速度变慢。）
默认情况下，Google Fonts API 会提供所请求字体的常规版本。如需请求其他样式或粗细，请在字体名称后面附加英文冒号 (:)，后跟用英文逗号分隔的样式或粗细列表 (,)。
例如：
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
如需了解给定字体可用的样式和粗细，请参阅 Google Fonts 中的字体列表。
对于您请求的每个样式，您可以提供全名或缩写；对于权重，您也可以指定数值权重：
风格 说明符
斜体 italic 或 i
粗体 bold、b 或数值权重（例如 700）
粗斜体 bolditalic 或 bi
例如，如需请求 Cantarell 斜体和 Droid Serif 粗体内容，您可以使用以下任一网址：
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
使用 font-display
font-display 可用于控制字体不可用时发生的情况。通常，您应指定默认 auto 以外的值。
在查询字符串 display 参数中传递所需的值：
https://fonts.googleapis.com/css?family=Roboto&display=swap
指定脚本子集
Google 字体目录中的一些字体支持多种文字（例如拉丁语、西里尔语和希腊语）。为了指定应下载哪些子集，应将子集参数附加到网址。
例如，要请求 Roboto Mono 字体的西里尔字母子集，网址为：
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
要请求 Roboto Mono 字体的希腊语子集，网址将如下所示：
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
要请求 Roboto Mono 字体的希腊语和西里尔语子集，网址为：
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
如果有拉丁语子集，则始终包含该子集，且无需指定。请注意，如果客户端浏览器支持 unicode-range (http://caniuse.com/#feat=font-unicode-range)，则会忽略该子集参数；浏览器将会从字体支持的子集中进行选择，以获取渲染文本所需的内容。
如需查看可用字体和字体子集的完整列表，请参阅 Google Fonts。
优化字体请求
很多时候，如果您想在网站或应用中使用网页字体，就会事先知道需要使用哪些字母。当您在徽标或标题中使用网络字体时，通常就会发生这种情况。
在这些情况下，您应考虑在字体请求网址中指定 text= 值。这样，Google 就可以返回针对您的请求优化的字体文件。在某些情况下，这可以将字体文件的大小缩小多达 90%。
如需使用此功能，只需在 Google Fonts API 请求中添加 text= 即可。例如，如果您只使用 Inconsolata 作为博客标题，则可以将标题本身设为 text= 的值。请求如下所示：
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
与所有查询字符串一样，您应该对值进行网址编码：
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
此功能也适用于国际字体，允许您指定 UTF-8 字符。例如，“你好！”表示为：
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
注意： 使用 text= 时无需指定 subset= 参数，因为它允许您引用原始字体中的任何字符。
启用字体效果（Beta 版）
在网站上设置标题或显示文本时，您通常需要采用装饰性的方式设置文本的样式。为了简化您的工作，Google 提供了一系列字体效果，以便您轻松生成精美的显示文本。例如：
这是一种字体效果！
若要使用此 Beta 版功能，只需将 effect= 添加到 Google Fonts API 请求，并将相应的类名称添加到您希望影响的 HTML 元素中即可。在上面的示例中，我们使用了 shadow-multiple 字体效果，因此请求如下所示：
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
要使用该效果，请将相应的类名称添加到您的 HTML 元素中。相应的类名称始终是前缀为 font-effect- 的效应名称，因此 shadow-multiple 的类名称将为 font-effect-shadow-multiple：
<div class="font-effect-shadow-multiple">This is a font effect!</div>
您可以请求多种效果，只需用竖线字符 (|) 分隔效果名称即可。
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
以下是我们提供的所有字体效果的完整列表：
影响 API 名称 课程名称 支持
立体图像 anaglyph font-effect-anaglyph Chrome、Firefox、Opera、Safari
砖块标牌 brick-sign font-effect-brick-sign Chrome、Safari
画布照片 canvas-print font-effect-canvas-print Chrome、Safari
碎裂 crackle font-effect-crackle Chrome、Safari
衰减 decaying font-effect-decaying Chrome、Safari
销毁 destruction font-effect-destruction Chrome、Safari
焦虑 distressed font-effect-distressed Chrome、Safari
抗压木 distressed-wood font-effect-distressed-wood Chrome、Safari
表情符号 emboss font-effect-emboss Chrome、Firefox、Opera、Safari
消防 fire font-effect-fire Chrome、Firefox、Opera、Safari
Fire 动画 fire-animation font-effect-fire-animation Chrome、Firefox、Opera、Safari
脆弱 fragile font-effect-fragile Chrome、Safari
草 grass font-effect-grass Chrome、Safari
冰 ice font-effect-ice Chrome、Safari
有丝分裂 mitosis font-effect-mitosis Chrome、Safari
霓虹灯 neon font-effect-neon Chrome、Firefox、Opera、Safari
Outline outline font-effect-outline Chrome、Firefox、Opera、Safari
推杆绿 putting-green font-effect-putting-green Chrome、Safari
磨砂钢 scuffed-steel font-effect-scuffed-steel Chrome、Safari
阴影多个 shadow-multiple font-effect-shadow-multiple Chrome、Firefox、Opera、Safari
碎裂 splintered font-effect-splintered Chrome、Safari
静态 static font-effect-static Chrome、Safari
洗石 stonewash font-effect-stonewash Chrome、Safari
三维 3d font-effect-3d Chrome、Firefox、Opera、Safari
三维浮点数 3d-float font-effect-3d-float Chrome、Firefox、Opera、Safari
复古 vintage font-effect-vintage Chrome、Safari
壁纸 wallpaper font-effect-wallpaper Chrome、Safari
注意 ：某些字体效果（例如 3D）的缩放效果欠佳，与较大字体一起使用时往往效果最佳。此外，您可能希望进一步设置字体样式，例如更改文本颜色，使其与您的页面相称。
设置字体样式的方式还有很多，而且通过 CSS 可以实现很多操作。我们只是提供了一些提示，以帮助您上手。如需更多创意，请尝试在 Google 中搜索“css 文本效果”，并浏览网络上现有的许多创意！
深入阅读
如需查看 Google Fonts API 提供的字体系列的完整列表，请访问 Google Fonts。
了解如何使用网页字体加载器更好地控制字体加载。
如需详细了解 Google Fonts API 的工作原理，请参阅技术注意事项页面。
如未另行说明，那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可，并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情，请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。