素说设计工作室

» Google在线字体服务启动

Turing | 团队博客
2010/05/20 | 1评论 | 分享到：Google Reader | Twitter | 收藏到：百度 | QQ

web设计师要高兴鸟——这是一项完全免费的字体托管服务——包括其所使用的字体，也是在开源协议的许可下自由传播的。

下边是Google对这项计划的描述：

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers.

View font details to get the code needed to embed the font on your web site. Please also visit our quick start guide and FAQ page. For more help and suggestions, use our moderator page

下边以一个作者亲自使用的例子介绍如何使用GF

1.选择字体

首先在Google font 首页点击选择想要嵌入页面的字体类型。比如，我们选择Reenie Beanie，这是一种手写字体，适合显示页面中的作者签名或者其他个性化的内容。

在字体的专页我们可以发现字体的相应信息，比如这个字体的信息是：

• Designer:James Grieshaber
• Font API parameter name:Reenie+Beanie
• License:SIL Open Font License, 1.1
• Download Size:29kb compressed

分别给出了相应作者，字体名称，遵守的开源协议以及下载包的大小。

2.预览字体

字体专页给出了相应字体的预览，包括36px至12px大小字体的预览，标点符号预览以及字体的简介，嵌入前可以先看看每种字体不同的效果。

3.嵌入编码

非常之简单。

在需要嵌入的网页head部分加上：

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>

相应的，在需要使用到的元素的样式表中，加入（这个例子是h1）

h1 { font-family: 'Reenie Beanie', arial, serif; }

4.嵌入技巧

动态嵌入：

使用过typekit的同学可能知道存在一个叫做WebFont Loader的JS库，用作动态引用云字体文件。

其官方的介绍是这样的： The WebFont Loader is a JavaScript library that gives you more control over font loading than the Google Font API provides. The WebFont Loader also lets you use multiple web-font providers. It was co-developed by Google and TypeKit.

这里是使用方法，就不详细介绍了

@import方法：

将Google fonts的样式表通过@import方法加载在主样式表文件中，是一种比较灵活，不要改动html文件的方法，使用方法也和普通写法相同：
@import url(http://fonts.googleapis.com/css?family=Reenie+Beanie);

5.云中文字体的未来？

好吧，在中文字体文件极大的情况下，我们只能希望链接云的速度足够快才行。恐怕云中文字体的出现还要等上一阵。

共有1篇评论