Google Fonts 指南：绚丽的艺术字实现

分享到

作者钱曙光来源：CSDN 火龙果软件发布于 2015-06-09

上月底，一则帖子「谷歌开源Android上Roboto无衬线字体家族」，获得了很高的点击量，可以看出大家也很关注这个话题，今天给你们带来一个Google Fonts指南，告诉你如何使用Google Fonts API来添加字体到你的网页。而且，你不需要有任何形式的编程，你所做的仅仅是添加一个特定样式的链接至你的HTML文件。

A quick example

下面是一个例子，复制和粘贴以下HTML至一个文件：

「关于代码获取，文末有链接。」

接着，在一个现代化的网页浏览器里打开这个文件。你应该看到如下图所示的Tangerine字体：

这是一个常规的文本，你可以使用CSS来改变外观。例如，尝试在前一个例子上加一个影子：

效果如下：

这时，你使用Fonts API和CSS仅仅才是个开始。

Overview

使用Google Fonts API只需要短短的两个步骤：

添加一个网页字体的样式链接请求：

设计所请求的网页字体元素：

或者使用元素本身的内嵌样式：

你可以使用的字体列表，请参见：Google Fonts。

Specifying font families and styles in a stylesheet URL

确定下URL：

然后，添加 family= 至URL。

例如请求Inconsolata字体：

请求多个字体的话可以使用分隔符（丨）。

例如请求Tangerine、Inconsolata和Droid Sans字体：

这就是在你页面使用多种字体的方法。（但请别做得太过，大多数的网页并不需要很多的字体，而且使用太多的字体会影响你的网页的加载速度。）

Google Fonts API默认提供常规的字体，若是需要其他的样式或者大小，请给字体加冒号（:），接着的样式和大小用逗号（,）。

例如：

已经有的样式和大小请参见Google Fonts

有些字体也是有缩写的，或可以指定某个值：

例如Cantarell斜体和Droid Serif加粗，可以使用下面的URLs：

Specifying script subsets

在Google Font Directory里的一些字体支持多种脚本（以Latin和Cyrillic为例），为了特殊要求需要将相应的subset附加到URL。

例如，为了请求Philosopher字体的Cyrillic subset，这个URL应该是：

Philosopher的Latin、Cyrillic的subset实现：

对于可用的字体和字体subsets请参见Google Fonts。

Optimizing your font requests (Beta)

通常情况下，当你在网站或者引用里使用一个Web字体时，你应该先知道你需要哪一个字母，尤其是你将一个Web字体用于一个logo和标题时。

在这种情况下，你要在你请求的URL中使用指定的一个text=值。这会让谷歌返回一个字体文件从而优化你的请求。在一些情况下，这可以减少90%的字体文件。

想要使用这个测试版功能，只需要在你的Google Fonts API请求中加入text=。比如，如果你仅使用Inconsolata用于博客的标题，你可以将标题本身作为text=值。如下：

正如所有的查询字符串，你应该编码URL值：

此功能也适用于国际的字体，允许你指定UTF-8字符。例如，?Hola!，如下：

Enabling font effects (Beta)

当你给你的网站做头文字或者展示文本时，需要别样风格化的装饰。为了简化你的工作，谷歌已经提供了一个字体效果集合，实现过程也非常简单和轻便，如下：

为了使用这个测试版功能，简单地在Google Fonts API请求中加入effect=就好，以及添加你想要效果的HTML元素的相应类别。在上面的例子中，我们使用了多重阴影的字体效果，所以该请求如下：

为了实现上面的效果，还需要其他的一些元素：font-effect-和shadow-multiple，可结合为font-effect-shadow-multiple：

也可以使用分隔符（|）实现多重效果。

下面是谷歌提供的字体效果的完整列表：

「注：由于截图无法呈现出动态效果的字体，感兴趣的话可以点击文末的链接。」

有些字体效果（3D）的扩展具有局限性，特别是小字体时，所以请在使用时面向较大的字体。还有些其他的风格请使用谷歌搜索关键词“css text effects”来获得更多的教程。

相关阅读：

完整的字体家族列表的Google Fonts API请参见Google Fonts；

学习Web Font Loader是如何控制加载字体的；

Google Fonts API的工作原理请参见Technical Considerations页。

原文地址：https://developers.google.com/fonts/docs/getting_started

分享到