探秘Google Font API:你会立刻爱上它

原创
开发 前端
Web字体设计的发展可以说是突飞猛进,Google在不久前推出了自己的Google Font API服务,一种能够简单的自定义Web字体的解决方案。

【51CTO译文】Web字体设计的发展可以说是突飞猛进,除了目前主流的SiFR、Cufon、Typekit、@font-face等技术外,Google在不久前也推出了自己的Google Font API服务,下面让我们来看看什么是Google Font API,以及我们如何将它应用到Web设计中。

如何用它来工作?只需一步即可

我们充分利用Google Font API的优势,在不到15秒的时间内,就能引用到我们想要的个性化字体,你会立刻发现:你已经爱上它了。举个例子:

  1. view plaincopy to clipboardprint?  
  2. <!DOCTYPE html>    
  3.     
  4. <html lang="en">    
  5. <head>    
  6.     <meta charset="utf-8">    
  7.     <title>untitled</title>    
  8. <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>    
  9.     <style>    
  10.     body { font-family: 'Yanone Kaffeesatz', serif; font-size: 100px; }     
  11.     </style>    
  12. </head>    
  13. <body>    
  14.      Hello World     
  15. </body>    
  16. </html>  

通过上面的例子,我们看到Google Font API有着灵活、快捷的特性,同时我们也可以借助CSS 3中@font-face。当您在网站上插入一段Google代码时,Fonts API会在您选择的字体中,返回一个带有@font-face规则的样式表。举个例子:

  1. @font-face {  
  2.   font-family: 'Reenie Beanie';  
  3.   font-style: normal;  
  4.   font-weight: normal;  
  5.   src: local('Reenie Beanie'),   
  6.   url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0')  
  7.   format('truetype');  

我是如何使用Google Fonts API

Goggle字体库

在浏览器中打开Goggle字体库,如上图所示。选择你需要的字体,我这里选择的是IM Fell DW Pica SC。

选择你需要的字体

点击后你会得到下面的代码,以及相关的CSS样式表:

  1. <title>Custom Fonts using Google Fonts API</title> 
  2. <link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC' rel='stylesheet' type='text/css'> 
  3. </head> 

将这些代码粘贴到“head”中:

  1. h2 {  
  2.  font-family: "IM Fell DW Pica SC", Georgia, Serif;  

***,在你的CSS样式表里,添加相关字体的名称。

#p#

Google Font API的优势

Google Font API是一种能够简单的自定义Web字体的解决方案,只需要一段代码,你就可以Google字体库里导入你所需的Web字体。Google Font API能够在绝对大多数的浏览器中使用,在Google字体库里也有很多时尚和个性化的字体供你选择,并且由于是开源字库,所以不管是商业或者个人,Google Font API都适用。

Google Font API并不依赖于JavaScript,因此即使用户禁用了JavaScript,Google字体依然可以显示。Google字体在CSS 3中的表现同样出色,任何额外的样式都可以被添加,比如CSS 3中的text-shadow属性。

Google Font API的局限性

◆尽管在Google字体库里有一些字体是不错的选择,但这种选择有相当有限的。

◆绝大多数浏览器在字体渲染前,就会加载剩余的页面,这可能会留下一个空白。

◆Google Font API并不支持移动浏览器,例如在iPhone、iPad或者Android里并不适用。

【编辑推荐】

  1. 详谈关于Web字体:现状与未来
  2. Google发布***Feed API 实时网络时代来临
  3. Google推出HTML 5练兵场 提供详尽代码示例 
责任编辑:王晓东 来源: 51CTO
相关推荐

2013-04-17 10:06:55

Google GlasMirror API

2015-02-09 09:52:41

GoogleGlass

2009-06-10 09:21:45

Google Wave架构

2012-06-01 14:33:59

Google Dood

2009-04-13 09:47:41

Google数据中心图片

2014-09-05 11:07:10

Win9微软

2009-11-06 16:10:54

ClosureJavaScript开Google

2013-05-16 09:10:15

诺基亚微软

2018-10-30 11:19:33

智能破解安全

2009-11-20 10:03:21

Chrome OS桌面应用

2010-07-04 21:53:45

2010-08-09 08:48:46

File APIWeb

2021-01-04 13:40:59

Git开源工具

2010-07-02 10:08:12

BigtableGoogle

2009-01-04 09:16:11

google Read开发APIGoogle API

2015-03-18 10:58:27

Google Now API

2009-04-22 17:16:50

Analytics AGoogle测试

2009-02-09 09:30:20

Google APIAJAX SearchGoogle News

2017-10-19 12:45:07

PHP

2020-05-21 11:23:08

微软LinuxWindows
点赞
收藏

51CTO技术栈公众号