GoogleFontAPI



以往的网页设计师在设计网页的时候,时常会遇到一个问题便是可使用字体的不足。在以往的浏览器中,即便我们设定了特定的字体,但若是使用者的电脑中没有该字体则无法显示。而 Google Font API 的出现便是替广大网页设计师、开发者们解决这个问题!

以往的状况

诚如序文所提到的,以往在网页上,我们能使用的字体大多侷限于使用者端所安装的字体,也就是,即便网页设计者使用了多炫的字体,若是使用者没有安装同样的字体,则仍然无法显示。

GoogleFontAPI
因此在以往,网页设计者往往会如下图一般将字体作成图片,并且搭配 CSS 的一些技巧来将文字替换为文字:

这样作有不少缺点,除了缺乏弹性之外,使用者也没有办法複製图片上的文字。

@font-face

为了解决这个问题,CSS2就有提供一个@font-face 属性可以让 CSS 设计者加入自己喜欢的字体。但问题是,各家浏览器对于@font-face 的支援进度缓慢,一直到去年大多数的浏览器才开始正式支援@font-face,而问题并未结束,每个浏览器所支援的字型格式又有不同,对于大说数网页设计者而言仍然不易上手。

除此之外,@font-face 必须将字体上传到网路上、让读取页面的使用者浏览器可以下载、并且显示,而这又带来两个问题:首先、字体档案一般而言档案都相当的大,若是将档案存放在自己的主机上必然会对流量造成一定的负担。另外一个问题则牵涉到字体的授权问题,由于一般我们所购买的字体授权都仅能提供个人使用,而@font-face 实际上如同于将字体放在网路上提供给大家下载,会有一些侵权的疑虑。

Typekit & WebFonts
GoogleFontAPI


而 Typekit 及 WebFonts 这两间云端字体服务便是替大家解决上述的两个问题,除了提供各种没有授权问题的字体外、我们也不需要担心字体存放、流量的问题,这部份统统都交给服务商的云端主机管理。

然而,这些服务当然并非免费,以 Typekit 而言最基本的收费是$24.99 美金起跳,如下图:

GoogleFontAPI

虽然如此,但许多网页设计师们仍然趋之若骛,毕竟这些服务的确解决了长久以来的字体问题。

Google Font API
GoogleFontAPI

Google Font API 是在今年刚落幕的 Google I/O 开发者大会中所公布的新服务,提供了一个简单的介面让网页开发者、设计师能够嵌入漂亮的字体到自己的网页当中。如 Google 新闻稿中所说,这项服务是 Google 与上述所提到的 Typekit 一同合作打造出来的,且是完全免费的。
GoogleFontAPI
在 Google Font Directory 中可以看到 Google 在公布 API 的同时也开放了如下图十八种不同的字体:

除此之外,Google Font API 对于各浏览器的支援也相当不错,如下:

使用方法

在使用上,我们只需要在 HTML 文件中加入以下 CSS 档:

然后针对需要修改字体的段落加入 CSS 片段、如:

h1 { font-family: 'Yanone Kaffeesatz', arial, serif; }

这样就可以顺利使用这些漂亮的字体了!

参考资源



上一篇: 下一篇:



  • 热门文章
编辑推荐