<?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>样式之美 &#187; Safari</title>
	<atom:link href="http://www.aoao.org.cn/blog/tag/safari/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.aoao.org.cn</link>
	<description>没落的角落</description>
	<lastBuildDate>Fri, 16 Apr 2010 02:38:52 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Safari显示网页字体为超级无敌难看的宋体的原因</title>
		<link>http://www.aoao.org.cn/blog/2008/04/safari-font/</link>
		<comments>http://www.aoao.org.cn/blog/2008/04/safari-font/#comments</comments>
		<pubDate>Sat, 19 Apr 2008 11:58:17 +0000</pubDate>
		<dc:creator>aoao</dc:creator>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[Safari]]></category>
		<category><![CDATA[浏览器]]></category>

		<guid isPermaLink="false">http://www.aoao.org.cn/?p=104</guid>
		<description><![CDATA[这两天终于忍不住的去实验了一下，为什么网页的字体有时会显示成超级无敌难看的宋体呢？其实宋体不难看，难看的只是把它放在Leopard下，没有点阵的效果，12px的宋体真的让人受不了。 Safar for mac中文版显示网页字体为宋体的原因：“Serif”字族，当下面几种情况都出导致出现神奇的宋体（自己改过浏览器的默认字体的同学不算） 样式没定义到font-family（浏...]]></description>
			<content:encoded><![CDATA[<p>这两天终于忍不住的去实验了一下，为什么网页的字体有时会显示成超级无敌难看的宋体呢？其实宋体不难看，难看的只是把它放在Leopard下，没有点阵的效果，12px的宋体真的让人受不了。<br />
Safar for mac中文版显示网页字体为宋体的原因：“<strong>Serif</strong>”字族，当下面几种情况都出导致出现神奇的宋体（自己改过浏览器的默认字体的同学不算）</p>
<ul>
<li>样式没定义到font-family（浏览器默认是Times，属于Serif）</li>
<li>定义的字体系统没有，而用Serif标明字族 -_-b </li>
<li>第一个中文字体是宋体()-_-b</li>
</ul>
<p>更神奇的地方是当定义到的英文字体不属于Serif的话，也会用华文细黑。<br />
原因找出来了，解决的办法自己就有了，</p>
<ol>
<li>写邮件跟XX网站的管理员教他们修改，见一次写一次，希望下次打开时可以不用看到宋体，这样可以造福苹果教徒。（怎听起来那样不靠谱呢！挖哈哈）</li>
<li>打开Safari偏好设置 » 外观 » 标准字体 重新选一个自己喜欢的。</li>
</ol>
<p>顺便介绍一下网页上常见的字体族科：</p>
<ul>
<li>Serif（如Times、Georgia、New Century Schoolbook等）：不等宽，边角和笔画结尾处有衬线修饰；</li>
<li>Sans-serif（如Helvetica、Geneva、Verdana、 Arial、Univers等）：不等宽，边角和笔画结尾没有修饰；</li>
<li>Monospace（如Courier、Courier New、Andale Mono等）：等宽字体，可以有修饰也可以没有；</li>
<li>Cursive（如Zapf Chancery、Author、Comic Sans等）：花体字；</li>
<li>Fantasy（如Western、Woodblock、Klingon等）：其他类</li>
</ul>
<hr />
<p>推荐本书：<a href="http://www.aoao.org.cn/book/web-standards-design/" title="《Web标准设计》的专题页面">《Web标准设计》</a></p>]]></content:encoded>
			<wfw:commentRss>http://www.aoao.org.cn/blog/2008/04/safari-font/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>类型为search的input及相关属性</title>
		<link>http://www.aoao.org.cn/blog/2008/04/input-type-search/</link>
		<comments>http://www.aoao.org.cn/blog/2008/04/input-type-search/#comments</comments>
		<pubDate>Sat, 05 Apr 2008 09:34:21 +0000</pubDate>
		<dc:creator>aoao</dc:creator>
				<category><![CDATA[Web开发]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[input]]></category>
		<category><![CDATA[Safari]]></category>
		<category><![CDATA[浏览器]]></category>

		<guid isPermaLink="false">http://www.aoao.org.cn/?p=102</guid>
		<description><![CDATA[其实在很久很久之前就发现search类型的input，该属性值是WebKit私有，不过一直没去查相关的属性，介于XXX原因，我找出其属性，回头考虑在其他浏览器上也实现这样的效果。表扬一下Yupoo，他们上次改版就使用上介个。 如果你使用的是Safari(iphone上的不一样，不过会Go按钮会变成Search)或者是其他WebKit引擎的浏览器的话，你就可以看出下面这个input与其他的不同了。...]]></description>
			<content:encoded><![CDATA[<p>其实在很久很久之前就发现search类型的input，该属性值是<a title="The WebKit Open Source Project" href="http://webkit.org/">WebKit</a>私有，不过一直没去查相关的属性，介于XXX原因，我找出其属性，回头考虑在其他浏览器上也实现这样的效果。表扬一下<a href="http://www.yupoo.com">Yupoo</a>，他们上次改版就使用上介个。</p>
<p>如果你使用的是Safari(iphone上的不一样，不过会Go按钮会变成Search)或者是其他WebKit引擎的浏览器的话，你就可以看出下面这个input与其他的不同了。</p>
<form action="http://www.aoao.org.cn/" method="get">
<input name="s" type="search" /> </form>
<p>看不到的朋友可以看一下图片：<br />
<img class="alignnone size-full wp-image-103" title="safari上类型为search的input的各种表现" src="http://www.aoao.org.cn/wp-content/uploads/2008/04/safari-input-type-search.jpg" alt="safari-input-type-search" width="248" height="234" /></p>
<p>看一下相关的代码：</p>
<pre><code>&lt;input type="search" placeholder="测试搜索" autosave="aoao.org.cn" results="8" &gt;</code></pre>
<p><a href="http://weblogs.mozillazine.org/hyatt/archives/2004_07.html#005890">相关的说明</a>，就几个属性的介绍，比较简单，没有译了中文，大家看看就是，其实不用看也要以猜得出。</p>
<blockquote><p>The <code>incremental</code> attribute can be used to control whether or not the search is performed as you type.</p>
<p>The <code>placeholder</code> attribute can be used to set the greyed placeholder text in the control.</p>
<p>The <code>autosave</code> attribute allows you to specify an autosave name for your search results in the dropdown. What&#8217;s cool about the autosave is that it&#8217;s global, which means that two Web sites could put up a search field with an autosave name of google and then they would share the search results. (Since the actual result values are not accessible to the page there is no privacy violation.)</p>
<p>The <code>results</code> attribute allows you to specify how many results should be displayed in the dropdown.</p>
<p>The <code>search</code> DOM event fires at the precise time the search should be performed and obeys the heuristic for the control, so you don&#8217;t have to trap key and click events at all. You can use the onsearch attribute on the control to respond when the search happens.</p></blockquote>
<p>BTW：<a href="http://naked.dustindiaz.com/">CSS Naked Day</a>差不多到了，今年改在9号，有兴趣的朋友凑凑热闹。 </p>
<hr />
<p>推荐本书：<a href="http://www.aoao.org.cn/book/web-standards-design/" title="《Web标准设计》的专题页面">《Web标准设计》</a></p>]]></content:encoded>
			<wfw:commentRss>http://www.aoao.org.cn/blog/2008/04/input-type-search/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic Page Served (once) in 2.725 seconds -->
