谷歌在线字体(Google Font Directory)API使用详细教程

2010-06-04 11:51:16 作者：不详来源：WordPress啦!

请求使用谷歌字体API中的多种字体

我们假设你需要谷歌字体目录中的三种字体。请不要创建多个请求。创建多个请求会增加一个页面的HTML请求数量，大家应该都知道 HTTP请求的次数越少，页面响应时间就越少。

所以我们不使用多个样式链接标签，而是使用下面的格式。

下面的例子URL请求中，将会一次性加载三种字体（Vollkorn， Yanone和 Droid Sans）。

http://fonts.googleapis.com/css?family=Vollkorn|Yanone|Droid+Sans

这样你就可以在你的式样元素中使用这三种字体中的任何一种字体了。

注意事项

字体名称之间用 | 隔开，并且不留空格，还要注意Droid Sans字体的使用，对于字体名称中有空格的，需用 + 符号来代替空格，在我们的例子中，我们使用的字体名称是Droid Sans，因此在申请的链接里应该用“Droid+Sans”。

提示：在一次链接请求中使用过多的字体可能会让你页面响应时间加长，因此建议只加载必要的字体。虽然说使用这些字体都是免费的，但是也不是说你可以胡来。

谷歌 Font API字体的重量和式样

互联网字体有字体重量/式样（ font weight/style）变体，如需使用这些变体，只需在该字体的后面加上冒号（：）以及对应的weight/style即可。

下面的例子，我们请求使用 Vollkorn的粗体、粗斜体以及Inconsolata的斜体。

http://fonts.googleapis.com/css?family=Vollkorn:bold,bolditalic|Inconsolata:italic|Droid+Sans

每种字体的变体也有短代码（简码）可用，它们分别为：

下面就是使用简码的例子：

http://fonts.googleapis.com/css?family=Vollkorn:b,bi|Inconsolata:i|Droid+Sans

注意事项

字体后面的冒号与变体名称（如， bolditalic）或变体名称的简码（如，bi）之间不能有空格，如果需要使用到多种变体，请用（,）将它们隔开，并且也不留空格。

谷歌字体API让互联网设计更加漂亮

互联网设计行业是一个非常活跃的行业，但是却受限于一个多年的老问题，字样。现在终于有了解决方案，你开始使用 @font-face了吗？

教程排行榜: QQ、淘宝、MSN、Skype在线状态代码生成方法; 四个免费的在线LOGO和徽章生成工具; 分享三款免费的在线字体设计工具; 十五个免费在线制作网站标志的工具; IE调试工具：Microsoft SuperPreview for IE(附下载); 18款Wordpress最佳的免费幻灯片画廊插件推荐; 解决eWebEditor编辑器在IE8中不能正常使用的方法; 四款可以整合到网站的网页版即时通信IM插件系统; 21个可用于网站和博客的免费视频播放器插件; 国外五款主流的免费网站流量统计工具; 三款字体辨认、查找、生成的免费在线字体应...; 实用的网站Web表单(包括WordPress插件)在线创建工具; 利用google翻译器制作多语种网站; 十七款用于Chrome的网页设计开发工具扩展; 六款网址代推、收藏与分享按钮工具推荐; WEB开发之调试利器—Firebug应用全介绍

下载排行榜: jQuery图片特效代码带缩略图和文字标题简...; 仿淘宝商城天猫首页jQuery多格焦点幻灯图特...; 仿QQ商城焦点图jquery幻灯特效代码; 宽屏flash+xml焦点幻灯图特效代码; 效果媲美flash的jQuery幻灯代码支持多种切换效果; 3D立体效果的flash+xml照片墙相册展示代码; 带标题和数字导航的JS焦点幻灯特效代码; 31款简单实用的CSS+JS下拉菜单脚本; 漂亮的jquery+Lightbox灯箱效果图片展示特效代码; 基于mootools有7种效果的Gallery(画廊)幻灯相册代码; 超酷HTML5图片特效代码支持全屏显示; 漂亮的jquery画廊相册特效支持缩略图和键盘...; 可自动展开和折叠收起的QQ在线客服代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 基于jQuery的首页自动收缩全屏广告代码; 超酷3D摩天轮flash+xml幻灯相册特效源码