本指南介绍了如何使用 Google Fonts API 向网页添加字体。您无需进行任何编程;您只需向 HTML 文档添加一个特殊的样式表链接,然后以 CSS 样式引用该字体即可。
简单示例
下面是一个示例。将以下 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>
如需查看您可以使用的字体的列表,请参阅 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!
启用字体效果(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 |
设置字体样式的方式还有很多,而且通过 CSS 可以实现很多操作。我们只是提供了一些提示,以帮助您上手。如需更多创意,请尝试在 Google 中搜索“css 文本效果”,并浏览网络上现有的许多创意!
深入阅读
- 如需查看 Google Fonts API 提供的字体系列的完整列表,请访问 Google Fonts。
- 了解如何使用网页字体加载器更好地控制字体加载。
- 如需详细了解 Google Fonts API 的工作原理,请参阅技术注意事项页面。