入门
本指南介绍了如何使用 Google Font API 来添加 Web 字体到您的网页。你不需要做任何编程,只需添加一个特殊的样式表到您的 HTML 文档,然后在 CSS 样式中指定字体。
一个简单的例子
下面是一个示例,请将以下代码复制并另存为 HTML 文件:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”>
<style>
body {
font-family: ‘Tangerine’, serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>
然后在浏览器中打开该文件。你应该看到一个如下显示的页面,其中的字体称为 Tangerine:
这仅仅是普通的文本,因此你可以通过使用 CSS 改变它的样式。试着为上述例子增加一个阴影效果:
body {
font-family: ‘Tangerine’, serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
你现在可以看到文字投影效果:
而这仅仅是对 Font API 和 CSS 的基本使用。
概览
只需两步即可开始使用 Google Font API:
1、添加样式表链接以获得期望的网页字体:
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Font+Name“>
2、在元素对应的样式中使用该字体:
CSS selector {
font-family: ‘Font Name‘, serif;
}
或者对元素本身使用行内样式:
<div style=”font-family: ‘Font Name‘, serif;”>Your text</div>
你可以查看 Google Font Directory 获得字体支持列表。
在样式表 URL 中指定字体和样式:
要确定在样式表链接中使用哪个 URL,你可以从 Google Font API 的基准 URL 开始:
然后添加字体 URL 参数,使用一个或多个字体名称及样式。例如获取 Inconsolata 字体:
为获得多个字体,可以使用竖线 (|
) 分割字体名称。
例如,同时请求 Tangerine, Inconsolata 和 Droid Sans 三种字体:
http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
请求多种字体允许你在网页中使用多个字体。(但不要一个加载过多字体,否则容易造成页面载入缓慢的情况)
Font API 默认提供正规的字体版本。想要指定其他样式或字体粗细,需为字体名称追加一个冒号 (:
),然后跟随 样式列表或用逗号(,
)分隔的字体粗细属性 。
例如:
http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
查看 Google Font Directory 获知样式及字体粗细的支持情况。
每个样式请求,可以使用全称或者缩写形式;对于字体粗细,可以直接指定数值:
样式 | 说明符号 |
---|---|
italic | italic 或者 i |
bold | bold 或者 b 或者数值,如 700 |
bold italic | bolditalic 或者 bi |
例如,请求加载 Cantarell 斜体和 Droid Serif 粗体,你可以使用下列任意 URL 格式:
http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
英文原文:Getting Started – Google Font API | Google Code