谷歌字体API使用教程
稿源：Wordpress.la
尽管互联网上新的技术和项目层出不穷，但是在过去的一段时间里我们却缺乏丰富而漂亮的互联网字体。虽然传统的字体选择也非常多，但是大多数电脑中安装并支持的却是一些非常固定的字体，随着互联网设计的发展，传统字体已经不能满足需求。
谷歌字体API的登陆
谷歌引入了谷歌字体目录和字体API，这是一个免费的web服务，它允许站长能够轻松、便捷、有效地使用各种个性化字体。作为字体服务（主要有TypeKit， Typotheque）行业的新生力量，相信大家都很想挖掘谷歌字体API的潜力吧？那么就通过这篇文章深入挖掘它的魅力。
谷歌字体API为何物？
大家都经常上网，你们是否有看到过一些网站或博客上使用的非标准字体呢？所谓非标准字体是指除了互联网安全字体，如Arial， Helvetica， Verdana， Georgia， Times New Roman之外的其他所有字体。
谷歌字体API就是一个支持高质量的开源字体文件的服务，你可以轻而易举地在自己的网站设计中使用这些字体。该字体库还会不断发展，将会有越来越多的字体类型可供你选折。
使用谷歌字体API的好处
可继续使用HTML文本
与使用图片或CSS背景图片不同，使用@font-face方案来美化web排版对 搜索引擎更加友好。
此外，它属于不冒犯性的解决方案，意味着说你不需要对现有的任何内容进行修改，只需要更新 CSS样式即可。
可通过互联网访问
由于你使用 HTML文本而不是一个图片或CSS背景，因此并不影响通过屏幕阅读的用户。
减轻你的服务器负担
使用@font-face字体，你可将服务器负担转到谷歌安全可靠的CDN设备中，减轻了你自己服务器的工作量，而通过谷歌服务器你完全可以不必担心这些字体文件的加载速度。
如何使用谷歌字体API
使用谷歌字体API非常简单，你无需成为一个互联网开发的代码高手。你只需在你的网页中从谷歌那里链接一个CSS式样文件并在自己的CSS定义中引用字体名即可。
下面是使用谷歌字体API的基本过程：
第一步： 添加所需字体的样式链接
你可以查看字体库来查看可用字体。在你的网站上加入某种字体的基本格式是这样的：
&link rel=&stylesheet& type=&text/css& href=&/css?family=Font+Name&&
第二步： 使用该字体给HTML元素定义式样
下面的例子，是通过使用 font-family CSS属性给《h1》元素分配一个叫做& Font Name& 的字体。
h1 { font-family: 'Font Name',& }
如果你只需使用该字体一次，你可以使用内联样式：
&p style=&font-family: 'Font Name', serif& &Six Revisions Is Beautiful&/p&
第三步： 始终有个备份方案
上面的代码你可能也发现了我使用了serif 来作为后备的字体，这样做是为了以防万一。 也就是说万一谷歌的服务器出现什么状况，浏览器将会使用默认的Serif字体。 建议在使用font-family 属性时，无论是否是 @font-face字体，都养成这样的习惯，这通常叫做字体的堆叠。
使用谷歌字体API的例子
接下来我们来介绍一个例子，请复制并粘贴下面的代码到一个HTML文件里并保存，然后通过浏览器打开它。我建议你在不同的浏览器上测试HTML文件可能会发现跨浏览器的差异。这里使用的字体是 Lobster typeface，你可以使用不同的字体来试验。
&html&& &head&& &link rel=&stylesheet& type=&text/css& href=&/css?family=Lobster&&& &style&&&& h1 {&&&&& font-family: 'Lobster',&&&&& font-size: 48&&& }& &/style&& &/head&& &body&&&& &h1&Six Revisions Is Beautiful!&/h1&& &/body&& &/html&
上图是谷歌Chrome 4.1浏览器查看的效果截图。
所生成的文本 （&Six Revisions Is Beautiful！&）是普通的 HTML文本，你可以给它添加更多式样元素，（例子中，只使用到 h1元素）。
有好的文章希望站长之家帮助分享推广，猛戳这里
本网页浏览已超过3分钟，点击关闭或灰色背景，即可回到网页在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
在写页面时，引用了第三方在线css，此css里有导入google字体。问：如何在继续在线引用此第三方css的情况下，把google字体的请求重定向至国内CDN字体库
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不知道你想用第三方 CSS 的初衷是什么？如果不是为了 CDN 的话，简单点的直接后台抓取第三方 CSS 然后处理掉 Google 的字体重新生成 CSS。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
为什么不直接更换为国内的反代，推荐使用中科大的，支持SSL。
//fonts.lug./
//ajax.lug./
//google-themes.lug./
//fonts-gstatic.lug./
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
能否把woff2文件下载到本地，然后本地url()，这样就不需要在线请求，能行得通吗？
该答案已被忽略，原因：不符合答题规范：内容不是答案，可用评论、投票替代
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：网页使用Google Font API（字体）的方法
字体：[ ] 类型：转载 时间：
本文介绍在网页中如何使用Google Font API（字体）的方法
在网页设计里，字体的显示是个问题。最普遍用的是宋体，但是宋体在 Win 7 下的表现真的很难看。雅黑端庄一些，但是随着字体大小，感觉汉字的大小也会有区别。小站现在用的字体是是宋体 + Arial/Georgia，因为习惯了也没多在意，其实对于英文字体有其它更好的选择。比如 Bitter 字体，用来做标题倒是不错： 代码如下:&div style="text-align: font-size:24 font-family:B"&Welcome To NowaMagic.net&/div&CSS 怎么调用 Bitter 字体？ 代码如下:@font-face {& font-family: 'Bitter';& font-style:& font-weight: 400;& src: local('Bitter-Regular'), url(/static/fonts/bitter/v4/s9gJB935qk_YG8d-lnTdvA.woff) format('woff');}@font-face {& font-family: 'Bitter';& font-style:& font-weight: 700;& src: local('Bitter-Bold'), url(/static/fonts/bitter/v4/JGVZEP92dXgoQBG1CnQcfD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}其实，这是 Google 推出的Google Font Directory和Google Font API两项服务，Google联合了众多的字体设计者为用户提供了多种漂亮的字体。具体可以参看以前写的一篇文章：《用Google Font API来丰富网页字体》。这里仅仅抛砖引玉，国内实在太少网站用 Google Font API 了。
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具zblog调用谷歌在线字体库的字体的方法 | 无忧主机
自始至终，以提供稳定、高性能的美国、香港免备案php虚拟主机产品为己任，以用户极高满意为生存价值，以产品的可靠性为生命线，以网络零中断为终身奋斗目标
当我们在使用建立网站后，为了让自己的网站看起来更加优秀并且富有创意，自然有很多需要修改和调试的地方，而在网站使用有个性的字体不失为一个很好的方法。所以今天无忧主机小编就来给大家介绍一下zblog使用谷歌在线字体库调用在线的字体的方法。
首先我们需要在“head”标签里加入一段引用代码：
&link href='/css?family=Lobster' rel='stylesheet' type='text/css'&
其中“Lobster”代表的意义是调用字体的名称，可以根据自己的需求经行更换。但是更换字体名称的时候需要注意几个细节，调用多个字体的时候需要用“|”符号隔开，字体名称中如果有空格符号的必须用“+”符号代替空格符号。
添加引用代码之后就可以在特定的位置上进行调用了，例如需要把“div”标签里的文字替换，那么只需要找到div的css样式表中的字体代码，按如下格式修改css代码就可以了：
.ziti{font-family: Lobster,}
无忧主机相关文章推荐阅读：
本文地址：/zblog/20965.html
喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^
无忧主机资质：（十三年旗舰品牌）
相关技术帮助文档
技术帮助文档分类使用 Google Fonts 为网页添加美观字体
前言文字是网页中很重要的组成部分。为文字选择一个合适的字体，能够更好的展现一个网站的个性，表达所要传递的信息，同时吸引用户来产生兴趣。说到字体，我们首先会想到 CSS 里面的 font，例如：&html&
p { font-family: Arial, Helvetica, sans- }
&p&some text&/p&
&/html&在这段 HTML 代码中为&p&标签定义了字体，当浏览器解析&p&some text&/p&标签时，首先会在系统中查找 Arial 这个字体，如果找不到，就找 Helvetica 字体，如果还是找不到，就会查找浏览器默认的 sans-serif(非衬线)字体，最后把文字渲染出来。什么是安全字体安全字体这个概念，也许很多人都不是很熟悉，我们先举个例子：font-family: Arial, Helvetica, sans-这个对字体（font-family）的定义就是一个安全字体。每种操作系统都有自己默认安装的字体，浏览器只能正常显示操作系统中安装了的字体。而不同的操作系统默认安装的字体不完全相同，有的甚至名称都不一样，在这种情况下，我们必须定义安全字体，使字体在所有的浏览器中都能够正常显示。在上面这个 font-family 的定义中，我们选择 Arial 作为首选字体（注：Arial 字体是最常用的 sans serif 字体，也是 Windows 的默认字体，当字体很小是不容易阅读），但是，苹果系统中没有这个字体，所以我们选择 Helvetica（和 Arial 很相似）作为第二备选字体，最后我们选择 sans-serif 作为第三备选字体，如果在一个既没有 Arial 也没有 Helvetica 的系统里，那么浏览器会使用默认的 sans-serif 字体来渲染文字。这样，我们很大程度上保证了使用不同操作系统的访问者都能看到相同（至少是类似）的页面文字。除了 Arial，常见的安全字体还有：Verdana 字体，它是微软公司的核心字体之一，专门为屏幕显示而开发的。它的应用广泛，宽度大而易于阅读，是显示器中最清晰的字体。CSS 写法：font-family: Verdana, Geneva, sans-
Times New Roman 字体，它是最常用的 serif 字体，是浏览器默认的字体。小号字的易读性也很差。CSS 写法：font-family: 'Times New Roman', Times,
有兴趣的读者可以通过这个链接来查阅常用的安全字体。在网页开发中，应该尽量使用安全字体，也就是高度通用的字体，这样，访问者才能流畅的阅读网页的所有内容。但是，网页设计师一定不会满足于使用这些安全字体，如何才能使用漂亮的字体，并能在普通用户的浏览器中被正确的渲染出来？答案是：使用@font-face 方案。@font-face 标签简介@font-face 被列为了 CSS3 的一项新特性，其实它并不是什么新鲜技术，它最早出现在 CSS2 的规范定义中，但是在 CSS2.1 中又被删除，现在被正式列入 CSS3。目前主流的浏览器（IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+）都能够支持这个属性，所以不用担心会有浏览器兼容性问题。@font-face 允许您在网页中使用电脑中没有安装的字体，完全摆脱安全字体的限制。只需将字体包安装在服务器上，当用户加载网页时，字体包会自动下载到用户机器上，保证字体能够正确渲染。随着@font-face 的不断流行，产生了许多新的字体格式图标集，称为网络字体。Google Fonts API 就是基于@font-face 的特性开发的一套优秀的网络字体库。网络字体的优点有很多：使用的是真正的文本，而不是图片，放大和缩小都不会影响渲染效果，用户体验好；可以被搜索引擎辨认；不像图片每次需要重新生成，添加删除更方便。如何使用 Google Fonts APIGoogle Fonts 提供了超过 600 种的高质量的字体，所有的浏览器都兼容，无需引入 JavaScript，简单易用，更重要的是，免费。（虽然，暂时不支持中文字体，因为中文字体库实在是太大了）。现在来看下，如何在网页中使用 Google Fonts。挑选字体登录。（图 1）图 1.Google Fonts 主页在主页中，您可以直接浏览所有的字体，可以按单个词语来查看，或者按句子段落来查看整体效果，还可以调整字体大小。如果您对字体分类比较熟悉，就可以使用左边的搜索条件对字体作筛选。找到您喜欢的字体之后，点击"Add to Collection"按钮，然后在网页下方的"Collection"中即可找到您添加的所有字体。使用选中的字体来测试您的文字在上一页面（图 1）的"Collection"中，点击"review"。在预览页面中（图 2），输入您的测试文字，来查看效果。另外在"review"页面上，您还可以调整其它的与字体相关的样式，比如字体大小，间隔，变换，等等。在图 2 中，我们选择测试的是"Condiment"字体图 2.Google Fonts 预览页面在您的网页中添加字体链接。如果确认使用该字体， 在网页下方的"Collection"中，点击"Use"按钮，在接下来的页面中，您将看到详细的说明，包括字体链接和如何将字体添加到您的网页中。有三种方式来添加字体链接： Standard 方式：
&link rel='stylesheet' type='text/css'
href='/css?family=Condiment'&@import 方式：
@import url(/css?family=Condiment);JavaScript 方式：
（通过添加动态脚本并执行来导入字体，代码省略）下一步定义在那个标签上使用该字体，例如：在&class="myheader"&标签上使用，.myheader {font-family: 'Condiment',}大功告成，您现在可以打开您的网页欣赏一下了(图 3)。图 3.测试页面效果清单 1.测试页面代码&html&
&link rel="stylesheet" type="text/css"
href='/css?family=Condiment'&
.myheader {
font-family: Condiment,
font-size: 48
text-align:
&div class="myheader"& Test my own text !&/div&
&/html&优化字体包加载如果您不是大范围的在网页中使用 Google 字体，只是在标题或 logo 里使用，那么可以在 url 里添加 text 参数，来限制加载的字体包的大小，最高能缩减 90%左右的大小，以此来节约下载流量。例如：/css?family= Condiment'&text=Hello这样，您只会下载 h，e，l，o 这四个字母的字体，大大缩小了字体包的大小。下载字体包您还可以把字体包下载并安装到本地，这样您就可以在本地使用这些字体，比如在 Notepad，Microsoft Office 里。方法为：在图 3 中，点击下载按钮， 选择"Download the font families in your Collection as a zip file"高级应用 APIGoogle Fonts 还开放了一些接口（称为 Developer API），用于获取字体库的信息数据。比如实时获取字体库实际可用的字体及其相关信息：这个请求的返回结果是一个 JSON 类型的数据，包括了每种字体的名称，样式种类（比如 regular，italic），版本，修改时间，包含的样式包的请求地址，等等。请注意，在 URL 里面有一个 key，这个 key 是和您的 web 应用工程相联系的，只有注册过的 web 应用才能成功调用 Developer API。我们必须要在 Google Cloud Console 注册之后，才能获取这个 key。关于这个 Developer API， 可以参阅这个。结束语Google Fonts 很强大，但是也碰到一些加载的问题，最好还是字体声明的时候，在最后添加一个安全字体，来保证万无一失。另外的一个建议是，在网页中要适量的使用花样的字体，让整个页面保持干净简洁。
相关主题Google Fonts W3School 网站上关于W3School 网站上关于W3School 网站上关于IBM 在线的：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。：这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。，这是有关 Web 2.0 相关信息的一站式中心，包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过
栏目，迅速了解 Web 2.0 的相关概念。查看 ，了解更多和 HTML5 相关的知识和动向。
添加或订阅评论，请先或。
有新评论时提醒我
static.content.url=/developerworks/js/artrating/SITE_ID=10Zone=Web developmentArticleID=971886ArticleTitle=使用 Google Fonts 为网页添加美观字体publish-date=}