﻿





<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>INN823.com &#187; 字体</title>
	<atom:link href="http://www.inn823.com/tag/font/feed" rel="self" type="application/rss+xml" />
	<link>http://www.inn823.com</link>
	<description>发现可能！</description>
	<lastBuildDate>Tue, 27 Jul 2010 11:14:57 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>zh</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>谷歌字体API使用教程</title>
		<link>http://www.inn823.com/2010/06/468</link>
		<comments>http://www.inn823.com/2010/06/468#comments</comments>
		<pubDate>Tue, 15 Jun 2010 08:08:32 +0000</pubDate>
		<dc:creator>weweloo</dc:creator>
				<category><![CDATA[探讨]]></category>
		<category><![CDATA[API]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[字体]]></category>
		<category><![CDATA[教程]]></category>

		<guid isPermaLink="false">http://www.inn823.com/?p=468</guid>
		<description><![CDATA[尽管互联网上新的技术和项目层出不穷，但是在过去的一段时间里我们却缺乏丰富而漂亮的互联网字体。虽然传统的字体选择也非常多，但是大多数电脑中安装并支持的却是一些非常固定的字体，随着互联网设计的发展，传统字体已经不能满足需求。]]></description>
			<content:encoded><![CDATA[<p>尽管互联网上新的技术和项目层出不穷，但是在过去的一段时间里我们却缺乏丰富而漂亮的互联网字体。虽然传统的字体选择也非常多，但是大多数电脑中安装并支持的却是一些非常固定的字体，随着互联网设计的发展，传统字体已经不能满足需求。不过遗憾的是，这个产品好像暂时还不支持中文字体。</p>
<p>谷歌引入了<a title="谷歌字体目录" href="http://code.google.com/webfonts" target="_self">谷歌字体目录</a>和<a title="字体API" href="http://code.google.com/intl/zh-CN/apis/webfonts/" target="_self">字体API</a>，这是一个免费的web服务，它允许站长能够轻松、便捷、有效地使用各种个性化字体。作为<a title="The Font-as-Service" href="http://ilovetypography.com/2009/08/07/the-font-as-service/" target="_self">字体服务</a>（主要有TypeKit, Typotheque）行业的新生力量，相信大家都很想挖掘谷歌字体API的潜力吧？那么就通过这篇文章深入挖掘它的魅力。</p>
<p><span id="more-468"></span></p>
<h3>谷歌字体API为何物？</h3>
<p>大家都经常上网，你们是否有看到过一些网站或博客上使用的非标准字体呢？所谓非标准字体是指除了互联网安全字体，如 Arial, Helvetica, Verdana, Georgia, Times New Roman之外的其他所有字体。</p>
<p>谷歌字体API就是一个支持高质量的开源字体文件的服务，你可以轻而易举地在自己的网站设计中使用这些字体。该字体库还会不断发展，将会有越来越多的字体类型可供你选择。</p>
<h3>使用谷歌字体API的好处</h3>
<p><strong>1、可继续使用HTML文本</strong></p>
<p>与使用图片或CSS背景图片不同，使用@font-face方案来美化web排版对 搜索引擎更加友好。</p>
<p>此外，它属于不冒犯性的解决方案，意味着说你不需要对现有的任何内容进行修改，只需要更新 CSS样式即可。<br />
<strong>2、可通过互联网访问</strong></p>
<p>由于你使用 HTML文本而不是一个图片或CSS背景，因此并不影响通过屏幕阅读的用户。<br />
<strong>3、减轻你的服务器负担</strong></p>
<p>使用@font-face字体，你可将服务器负担转到谷歌安全可靠的CDN设备中，减轻了你自己服务器的工作量，而通过谷歌服务器你完全可以不必担心这些字体文件的加载速度。</p>
<h3>如何使用谷歌字体API</h3>
<p>使用谷歌字体API非常简单，你无需成为一个互联网开发的代码高手。你只需在你的网页中从谷歌那里链接一个CSS式样文件并在自己的CSS定义中引用字体名即可。</p>
<p>下面是使用谷歌字体API的基本过程:</p>
<p><strong>第一步: 添加所需字体的样式链接</strong></p>
<p>你可以查看字体库来查看可用字体。在你的网站上加入某种字体的基本格式是这样的:</p>
<blockquote><p>&lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;http://fonts.googleapis.com/css?family=Font+Name&#8221;&gt;</p></blockquote>
<p><strong>第二步: 使用该字体给HTML元素定义式样</strong></p>
<p>下面的例子，是通过使用 font-family CSS属性给&lt;h1&gt;元素分配一个叫做“ Font Name” 的字体。</p>
<blockquote><p>h1 {font-family: &#8216;Font Name&#8217;, serif;}</p></blockquote>
<p>如果你只需使用该字体一次，你可以使用内联样式：</p>
<blockquote><p>&lt;p style=&#8221;font-family: &#8216;Font Name&#8217;, serif&#8221; &gt;Six Revisions Is Beautiful&lt;/p&gt;</p></blockquote>
<p><strong>第三步: 始终有个备份方案</strong></p>
<p>上面的代码你可能也发现了我使用了serif 来作为后备的字体，这样做是为了以防万一。 也就是说万一谷歌的服务器出现什么状况，浏览器将会使用默认的Serif字体。 建议在使用font-family 属性时，无论是否是 @font-face字体，都养成这样的习惯，这通常叫做字体的堆叠。</p>
<h3>请求使用谷歌字体API中的多种字体</h3>
<p>我们假设你需要谷歌字体目录中的三种字体。请不要创建多个请求。创建多个请求会增加一个页面的HTML请求数量，大家应该都知道 HTTP请求的次数越少，页面响应时间就越少。</p>
<p>所以我们不使用多个样式链接标签，而是使用下面的格式。</p>
<p>下面的例子URL请求中，将会一次性加载三种字体(Vollkorn, Yanone和 Droid Sans)。</p>
<blockquote><p>http://fonts.googleapis.com/css?family=Vollkorn|Yanone|Droid+Sans</p></blockquote>
<p>这样你就可以在你的式样元素中使用这三种字体中的任何一种字体了。<br />
<strong>注意事项</strong></p>
<p>字体名称之间用 | 隔开，并且不留空格，还要注意Droid Sans字体的使用，对于字体名称中有空格的，需用 + 符号来代替空格，在我们的例子中，我们使用的字体名称是Droid Sans，因此在申请的链接里应该用“Droid+Sans”。</p>
<p><strong>提示:</strong>在一次链接请求中使用过多的字体可能会让你页面响应时间加长，因此建议只加载必要的字体。虽然说使用这些字体都是免费的，但是也不是说你可以胡来。<br />
谷歌 Font API字体的重量和式样</p>
<p>互联网字体有字体重量/式样（ font weight/style）变体，如需使用这些变体，只需在该字体的后面加上冒号(:)以及对应的weight/style即可。</p>
<p>下面的例子，我们请求使用 Vollkorn的粗体、粗斜体以及Inconsolata的斜体。</p>
<p><strong>http://fonts.googleapis.com/css?family=Vollkorn:bold,bolditalic|Inconsolata:italic|Droid+Sans</strong></p>
<p>每种字体的变体也有短代码（简码）可用，它们分别为:</p>
<ul>
<li>粗体: b</li>
<li>斜体: i</li>
<li>粗斜体: bi</li>
</ul>
<p>下面就是使用简码的例子：</p>
<blockquote><p>http://fonts.googleapis.com/css?family=Vollkorn:b,bi|Inconsolata:i|Droid+Sans</p></blockquote>
<p><strong>注意事项</strong></p>
<p>字体后面的冒号与变体名称（如， bolditalic）或变体名称的简码（如，bi）之间不能有空格，如果需要使用到多种变体，请用(,) 将它们隔开，并且也不留空格。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.inn823.com/2010/06/468/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>设计师钟爱的21个英文字体</title>
		<link>http://www.inn823.com/2010/02/249</link>
		<comments>http://www.inn823.com/2010/02/249#comments</comments>
		<pubDate>Sun, 07 Feb 2010 13:15:06 +0000</pubDate>
		<dc:creator>weweloo</dc:creator>
				<category><![CDATA[探讨]]></category>
		<category><![CDATA[字体]]></category>

		<guid isPermaLink="false">http://www.inn823.com/?p=249</guid>
		<description><![CDATA[The fonts are one of the most important parts of every web Project. All though there have been many other selective collection font posts around which most of the time leads to big confusions Like which typefaces is really useful for your project or how to choose your font from the list of hundred fonts.]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-large wp-image-273" title="myfbpd-01" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-01-575x273.jpg" alt="" width="575" height="273" /></p>
<p>01 &#8211; Helvetica</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-02" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-02-575x273.jpg" alt="" width="575" height="273" /></p>
<p>02 &#8211; Frutiger</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-03" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-03-575x273.jpg" alt="" width="575" height="273" /></p>
<p>03 &#8211; Myriad</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-04" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-04-575x273.jpg" alt="" width="575" height="273" /></p>
<p>04 &#8211; Avenir</p>
<p><img class="alignnone size-large wp-image-257" title="myfbpd-05" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-05-575x200.jpg" alt="" width="575" height="200" /></p>
<p>05 &#8211; Trajan</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-06" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-06-575x273.jpg" alt="" width="575" height="273" /></p>
<p>06 &#8211; Optima</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-07" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-07-575x273.jpg" alt="" width="575" height="273" /></p>
<p>07 &#8211; Franklin</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-08" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-08-575x273.jpg" alt="" width="575" height="273" /></p>
<p>08 &#8211; Futura</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-09" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-09-575x273.jpg" alt="" width="575" height="273" /></p>
<p>09 &#8211; Bickham</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-10" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-10-575x273.jpg" alt="" width="575" height="273" /></p>
<p>10 &#8211; Univers</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-11" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-11-575x273.jpg" alt="" width="575" height="273" /></p>
<p>11 &#8211; Eurostile</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-12" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-12-575x273.jpg" alt="" width="575" height="273" /></p>
<p>12 &#8211; Interstate</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-13" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-13-575x273.jpg" alt="" width="575" height="273" /></p>
<p>13 &#8211; Trade</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-14" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-14-575x273.jpg" alt="" width="575" height="273" /></p>
<p>14 &#8211; Gill Sans</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-15" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-15-575x273.jpg" alt="" width="575" height="273" /></p>
<p>15 &#8211; Warnock</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-16" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-16-575x273.jpg" alt="" width="575" height="273" /></p>
<p>16 &#8211; Kepler</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-17" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-17-575x273.jpg" alt="" width="575" height="273" /></p>
<p>17 &#8211; Bodoni</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-18" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-18-575x273.jpg" alt="" width="575" height="273" /></p>
<p>18 &#8211; Bembo</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-19" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-19-575x273.jpg" alt="" width="575" height="273" /></p>
<p>19 &#8211; Rockwell</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-20" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-20-575x273.jpg" alt="" width="575" height="273" /></p>
<p>20 &#8211; Meta</p>
<p><img class="alignnone size-large wp-image-273" title="myfbpd-21" src="http://www.inn823.com/wp-content/uploads/2010/02/myfbpd-21-575x273.jpg" alt="" width="575" height="273" /></p>
<p>21 &#8211; Gotham</p>
]]></content:encoded>
			<wfw:commentRss>http://www.inn823.com/2010/02/249/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

