Writing

Google Fonts API使用教程

fonts, 翻译


原文链接： https://developers.google.com/fonts/docs/getting_started

第一次翻译： 2015/12/17 18:30
2016-09-18 更新：360公共库停止服务

开始

这篇文章教你如何使用Google Fonts API来给你的网站添加字体。你不用做任何编码工作，唯一需要做的只是把一条特殊的样式表链接添加至你的HTML文档中，然后再CSS中指定这个字体即可。

注意： 如果你想在国内网站中使用Google Fonts API，请使用360的代理。使用方法：把下文中的fonts.googleapis.com全部更换为fonts.useso.com即可。

目录

  1. 一个简单的例子
  2. 概况
  3. 在样式链接中指定字体的样式
  4. 指定字体子集（Scripts）
  5. 优化字体请求（Beta）
  6. 启用字体特效（Beta）
  7. 继续阅读

一个简单的例子

这是一个简单里例子。复制粘贴下面的代码到HTML文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
        <div>Making the Web Beautiful!</div>
    </body>
</html>

然后再一个现代浏览器中打开这个文件，你会看到一行Tangerine字体的字：

Making the Web Beautiful


这句话是普通的文本，所以你可以通过改变CSS来改变它的样子。试着给它加上点阴影：

 body {
    font-family: 'Tangerine', serif;
    font-size: 48px;
    text-shadow: 4px 4px 4px #aaa;
}
你会看见一些阴影在这行字下面：

Making the Web Beautiful

这仅仅是你能使用Google Fonts API做到的事中的很小一部分。

概况

仅仅两步你就可以开始使用Google Fonts API了： 1. 把你想要的字体的样式链接加入到HTML文件中： 
1
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
2. 在CSS文件中使用字体： 
CSS selector {
      font-family: 'Font Name', serif;
}
或者内嵌使用： 
 <div style="font-family: 'Font Name', serif;">Your text</div>

注意： 每次指定字体样式时，至少加上一个Web安全字体再最后来防止发生未定义的行为。特别地，加入一个CSS通用的字体名称如：serif或者sans-serif在font-family的最后，这样浏览器在必要的情况下会使用这些通用字体。

字体列表可以在 Google Fonts里找到。（需翻墙）

在样式链接中指定字体的样式


要决定样式链接，得从Google Fonts API根URL开始：

1
https://fonts.googleapis.com/css


然后在后面增加family=URL的参数，URL可以为一个或多个字体的名字。
比如，要使用Inconsolata字体：

1
http://fonts.googleapis.com/css?family=Inconsolata


> 注意： 字体名字里的空格都用+号代替。

使用多个字体，用|符号来分隔字体。
比如，要使用Tangerine,Inconsolata和Droid Sans：

1
http://fonts.google.com/css?family=Tangerine|Inconsolata|Droid+Sans


这个请求允许你可以在页面中同时使用所有字体。（但是不要一次请求太多字体，大多数页面不需要这么多的字体，而且一次性请求多个字体会使页面加载变得很慢。）
Google Fonts API默认提供所请求字体的普通样式。需要指定请求字体的样式的话，要在字体后加:符号并且不同样式以,符号分隔表明。
比如：

1
http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans


想知道请求的字体提供哪些样式供选择，可以在Google Fonts页面查询。
对于每个请求的样式，既可以使用全名也可以使用简称。对于weight来说，你也可以用一个数值来指定：

| Style | Specifiers |
| — | — |
| italic | italic或者i |
| bold | bold或者b或者一个数值：700 |
| bold italic | bolditalic或者bi |

比如： 要请求Cantarell italic和Droid Serif bold字体，你可以使用下面任意一个样式链接：

1
2
3
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


指定字体子集（Scripts）


一些Google Font目录中字体支持多种格式(比如：Latin, Cyrillic和Greek)。为了指定使用哪一个子集，需要添加一个subset参数。
比如：请求Roboto Mono的Cyrllic子集，需要使用如下URL：

1
http://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic


若请求Roboto Mono的Greek子集，需要使用如下URL：

1
http://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek


若请求Roboto Mono的Greek和Cyrillic子集，需要使用如下URL：

1
http://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic


如果Latin子集存在的话，那么它总是会被默认包含在请求中，所以没有必要特意在URL中指定。请注意客户端浏览器是否支持子集的unicode范围，浏览器会在字体的子集中选择自己支持的来渲染。
完整的子集列表，请在Google Fonts页面中查询。

优化字体请求（Beta）


大多数情况下，当你想在你的网站或者应用中使用其它字体时，你之前就知道你会使用哪些字母。这通常发生在，你想在Logo或者标题中使用其它字体的时候。
这种情况下，你可以考虑使用text=value参数。这允许Google给你返回一个优化后的字体文件。在一些情况中，这可以减少字体文件约90%的大小。
使用这个beta特性，只要简单地在URL请求中加入text=参数即可。比如：你只需要在博客标题中使用Inconsolata字体，你可以把标题本身当作参数text=的值加入URL中。如果你的标题是Hello:

1
http://fonts.googleapis.com/css?family=Inconsolata&text=Hello


向通常的URL链接一下，你需要URL编码这个值：

1
http://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World


这个特性也可以使用在其它语言的字体中，允许制定UTF-8字符。比如，¡Hola!编码为：

1
http://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!


> 注意： 当用了text=参数的时候，就没有必要使用subset=参数了，因为它已经允许你指定字体当中的任意字符了。

启用字体特效（Beta）


当写标题或者展示一些文字的时候，你经常会想要有一些花哨的字体特效。为了简化你的工作，Google提供了一系列的字体特效来让你轻易地实现你要的效果。比如：
This is a font effect!


要使用这个beta特性，只要在样式链接中加入effect=参数，然后再对应的HTML元素中指定class为对应名称即可。在我们上面的例子中，我们使用了shadow-multiple字体特效，所以请求链接会向这样：

1
http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple


要使用这个特效，在相应的HTML元素上把class制定为font-effect-shadow-multiple（前缀为font-effect-）：

1
<div class="font-effect-shadow-multiple">This is a font effect!<div>


你可以请求多个特效，使用|符号来分隔。

1
http://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float


下面是我们提供特效的完整列表：










































































































































































效果 API名称 Class名称 支持
Anaglyph anaglyph font-effect-anaglyph Chrome, Firefox, Opera, Safari
Brick Sign brick-sign font-effect-brick-sign Chrome, Safari
Canvas Print canvas-print font-effect-canvas-print Chrome, Safari
Crackle crackle font-effect-crackle Chrome, Safari
Decaying decaying font-effect-decaying Chrome, Safari
Destruction destruction font-effect-destruction Chrome, Safari
Distressed distressed font-effect-distressed Chrome, Safari
Distressed Wood distressed-wood font-effect-distressed-wood Chrome, Safari
Emboss emboss font-effect-emboss Chrome, Firefox, Opera, Safari
Fire fire font-effect-fire Chrome, Firefox, Opera, Safari
Fire Animation fire-animation font-effect-fire-animation Chrome, Firefox, Opera, Safari
Fragile fragile font-effect-fragile Chrome, Safari
Grass grass font-effect-grass Chrome, Safari
Ice ice font-effect-ice Chrome, Safari
Mitosis mitosis font-effect-mitosis Chrome, Safari
Neon neon font-effect-neon Chrome, Firefox, Opera, Safari
Outline outline font-effect-outline Chrome, Firefox, Opera, Safari
Putting Green putting-green font-effect-putting-green Chrome, Safari
Scuffed Steel scuffed-steel font-effect-scuffed-steel Chrome, Safari
Shadow Multiple shadow-multiple font-effect-shadow-multiple Chrome, Firefox, Opera, Safari
Splintered splintered font-effect-splintered Chrome, Safari
Static static font-effect-static Chrome, Safari
Stonewash stonewash font-effect-stonewash Chrome, Safari
Three Dimensional 3d font-effect-3d Chrome, Firefox, Opera, Safari
Three Dimensional Float 3d-float font-effect-3d-float Chrome, Firefox, Opera, Safari
Vintage vintage font-effect-vintage Chrome, Safari
Wallpaper wallpaper font-effect-wallpaper Chrome, Safari


> 注意： 有些字体特效（比如： 3d）对字体大小支持并不是很好，越大的字体看起来效果越好。另外，你可能希望加入更多的特效，比如改变字体颜色来适应页面。

还有很多其它的办法来改变字体样式，很多利用CSS的办法。我们只是提供一些简单的想法来告诉你如何开始。想要更多的样式，请Goolge搜索“css text effects”来查看网络上的其它想法。

继续阅读