返回 登录
0

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

阅读20387

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

A quick example

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

http://img.my.csdn.net/uploads/201506/05/1433471109_9248.jpg

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

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

http://img.my.csdn.net/uploads/201506/05/1433471236_6383.jpg

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

http://img.my.csdn.net/uploads/201506/05/1433471409_2672.jpg

效果如下:

http://img.my.csdn.net/uploads/201506/05/1433471452_7317.jpg

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

Overview

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

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

http://img.my.csdn.net/uploads/201506/05/1433471851_6903.png

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

http://img.my.csdn.net/uploads/201506/05/1433471980_4296.jpg

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

http://img.my.csdn.net/uploads/201506/05/1433472102_3742.jpg

你可以使用的字体列表,请参见:Google Fonts

Specifying font families and styles in a stylesheet URL

确定下URL:

http://img.my.csdn.net/uploads/201506/05/1433472399_3150.jpg

然后,添加 family= 至URL。

例如请求Inconsolata字体:

http://img.my.csdn.net/uploads/201506/05/1433472465_1296.jpg

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

例如请求TangerineInconsolataDroid Sans字体:

http://img.my.csdn.net/uploads/201506/05/1433472895_2133.jpg

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

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

例如:

http://img.my.csdn.net/uploads/201506/05/1433472623_7977.jpg

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

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

http://img.my.csdn.net/uploads/201506/05/1433473140_3820.jpg

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

http://img.my.csdn.net/uploads/201506/05/1433473247_3520.jpg

Specifying script subsets

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

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

http://img.my.csdn.net/uploads/201506/05/1433473542_4947.jpg

Philosopher的Latin、Cyrillic的subset实现:

http://img.my.csdn.net/uploads/201506/05/1433473609_5566.jpg

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

Optimizing your font requests (Beta)

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

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

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

http://img.my.csdn.net/uploads/201506/05/1433474434_3193.jpg

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

http://img.my.csdn.net/uploads/201506/05/1433474670_3801.jpg

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

http://img.my.csdn.net/uploads/201506/05/1433474753_3726.jpg

Enabling font effects (Beta)

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

http://img.my.csdn.net/uploads/201506/05/1433476342_9387.jpg

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

http://img.my.csdn.net/uploads/201506/05/1433476555_6698.jpg

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

http://img.my.csdn.net/uploads/201506/05/1433476745_3569.jpg

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

http://img.my.csdn.net/uploads/201506/05/1433476827_6215.jpg

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

http://img.my.csdn.net/uploads/201506/05/1433477238_7740.jpg

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

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

相关阅读:

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

很多人关心的重点是:谷歌字体的艺术效果,参见HN的评论:https://news.ycombinator.com/item?id=9658405


极客头条正式开通了微信公众号,在微信搜索“csdn_geek”或扫描下方的二维码即可关注。

http://img.my.csdn.net/uploads/201504/14/1428999730_5047.jpg

评论