<?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>網絡暴民 Jacky&#039;s Blog &#187; font</title>
	<atom:link href="http://jacky.seezone.net/tag/font/feed/" rel="self" type="application/rss+xml" />
	<link>http://jacky.seezone.net</link>
	<description></description>
	<lastBuildDate>Mon, 30 Jan 2012 17:45:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>「字大」派</title>
		<link>http://jacky.seezone.net/2007/03/13/1779/</link>
		<comments>http://jacky.seezone.net/2007/03/13/1779/#comments</comments>
		<pubDate>Mon, 12 Mar 2007 16:49:30 +0000</pubDate>
		<dc:creator>Jacky</dc:creator>
				<category><![CDATA[網絡]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[layout]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://jacky.seezone.net/2007/03/13/1779/</guid>
		<description><![CDATA[本站的 veryplaintext 模版大概是一年前轉用 WordPress 時安裝的。然而，我自己也做了不少調較，如字型、Margin、單篇排版等等。我是一個「字大」派，一段長文裏的字應該夠大和清晰，行高與文字間隔也應調整得宜，這樣讀者 (至少我) 才會看得舒服。 (一) 大小 (font-size) &#8211; 理論上，預設的瀏覽器文字大小應該是最適合的。但實際上，只談 Windows 的話，中文字在網頁上的大小，偏偏又只有某些數值 (如 9pt, 12pt 等等) 是比較合適，其他的會出現「爛字」情形 (IE 好一點)。而在這些字型比較美觀的數值裏，其實也只是大和小兩種。 (當然還有可作微調的 px 值，但在此省略) 。我現在的設定值是：瀏覽器預設值的 76% x 1.15 em ，很複雜吧，對於一般 windows 和 Firefox 來說大概是 12pt。 (二) 字距 (letter-spacing) &#8211; 有人認為設定成 1em，即如蘋果日報網站的字距。但事實上，蘋果的字距，是暴力地在每個字之間加入「全形空白」的字元，而非用 CSS 來設定。為甚麼呢？因為用 CSS 設定的話，就連英文字每串的字母字距也會拉長，很不好看。我自己則認為，預設一般瀏覽器所設的字距已經足夠了，所以我只是微調了 letter-space 值為 1px。 (三) 行高 (line-height) &#8211; 是可以很有效地減消文字之間的壓迫感的，看起來會比較有「呼吸」空間，跳行時也會舒服些。我的設定是 1.55em。 (四) [...]]]></description>
			<content:encoded><![CDATA[	<p>本站的 <a href="http://www.plaintxt.org/themes/veryplaintxt/">veryplaintext</a> 模版大概是一年前轉用 WordPress 時安裝的。然而，我自己也做了不少調較，如字型、Margin、單篇排版等等。我是一個「字大」派，一段長文裏的字應該夠大和清晰，行高與文字間隔也應調整得宜，這樣讀者 (至少我) 才會看得舒服。</p>

	<p><strong>(一) 大小 (font-size)</strong> &#8211; 理論上，預設的瀏覽器文字大小應該是最適合的。但實際上，只談 Windows 的話，中文字在網頁上的大小，偏偏又只有某些數值 (如 9pt, 12pt 等等) 是比較合適，其他的會出現「爛字」情形 (IE 好一點)。而在這些字型比較美觀的數值裏，其實也只是大和小兩種。 (當然還有可作微調的 px 值，但在此省略) 。我現在的設定值是：瀏覽器預設值的 76% x 1.15 em ，很複雜吧，對於一般 windows 和 Firefox 來說大概是 12pt。</p>

	<p><strong>(二) 字距 (letter-spacing)</strong> &#8211; 有人認為設定成 1em，即如蘋果日報網站的字距。但事實上，蘋果的字距，是暴力地在每個字之間加入「全形空白」的字元，而非用 <span class="caps">CSS</span> 來設定。為甚麼呢？因為用 <span class="caps">CSS</span> 設定的話，就連英文字每串的字母字距也會拉長，很不好看。我自己則認為，預設一般瀏覽器所設的字距已經足夠了，所以我只是微調了 letter-space 值為 1px。</p>

	<p><strong>(三) 行高 (line-height)</strong> &#8211; 是可以很有效地減消文字之間的壓迫感的，看起來會比較有「呼吸」空間，跳行時也會舒服些。我的設定是 1.55em。</p>

	<p><strong>(四) 段落間隔</strong> &#8211; 一般認為應用空行分段，也可以增加文字區塊間的「呼吸」空間。因為這裏使設了用 textile 為轉換器，所以段與段之間，不是 <code>br</code> ，而是正確地用 <code>p</code> 包圍著。亦因此，只要在 <span class="caps">CSS</span> 設定好 p 的 margin 值就可以了 (留意要計算 margin collapse 在內)。</p>

	<p>另外，最近看到一個叫 <a href="http://b-oo-k.net/blog/blog.php/2006/8">E2R</a> 的網站，所推的就是「簡單易讀」(並非指內容) 的文字排版。其提倡有五個要點，可以參考一下：</p>

	<ol>
		<li>長篇文章使用標準字型大小</li>
		<li>提供空白</li>
		<li>設定行高</li>
		<li>用清晰的顏色對比</li>
		<li>不用圖顯示文字</li>
	</ol>

	<p>當然，這不是甚麼金科玉律，但作為一個體貼讀者的 blogger，應該考慮讀者可以舒舒服服讀你的文章。無論你是選用「字大派」還是「字小派」，單單調較好行高已經令效果很不同了。</p>

	<p>還好的是，用 Firefox, Opera 等瀏覽器的話，你可以自由設定字體大小。不會像 IE6 般被 <span class="caps">CSS</span> 「騎劫」了字體大小。( IE7有無問題？)</p>

	<p>延伸閱讀：</p>

	<ul>
		<li><a href="http://b-oo-k.net/blog/blog.php/2006/8">老貓學出版：傳統編輯對部落格新手的寫作建議</a></li>
		<li><a href="http://www.informationarchitects.jp/100e2r">E2R</a></li>
	</ul>


	Tags:  <a href="http://jacky.seezone.net/tag/blog/" title="blog" rel="tag">blog</a>, <a href="http://jacky.seezone.net/tag/font/" title="font" rel="tag">font</a>, <a href="http://jacky.seezone.net/tag/layout/" title="layout" rel="tag">layout</a>, <a href="http://jacky.seezone.net/tag/usability/" title="usability" rel="tag">usability</a><br />
]]></content:encoded>
			<wfw:commentRss>http://jacky.seezone.net/2007/03/13/1779/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>sIFR RC4 推出</title>
		<link>http://jacky.seezone.net/2005/03/01/1131/</link>
		<comments>http://jacky.seezone.net/2005/03/01/1131/#comments</comments>
		<pubDate>Tue, 01 Mar 2005 06:15:16 +0000</pubDate>
		<dc:creator>Jacky</dc:creator>
				<category><![CDATA[網絡]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[sifr]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://jacky.seezone.net/?p=1131</guid>
		<description><![CDATA[sIFR RC4 出來了，這一次加強了對瀏覽器的支持，連 konqueror 也可以用 sIFR 了，而基本上所有的問題都解決了，加快了速度，以及可以用 cookies 來開啟是否用 sIFR。 sIFR 全寫是 Scalable Inman Flash Replacement ，用 Flash 和 Javascript 的方法，使網頁不只限於用者所擁有的字型，可以使用其他不同的字型。 如果用者的瀏覽器不支持 Javascript 或 Flash 也不緊要，顯示會自動降格為普通字體。 相關網址： Mike Davidson: sIFR 2.0 RC4 is Here Tags: flash, font, sifr, web]]></description>
			<content:encoded><![CDATA[	<p><a href="http://www.mikeindustries.com/blog/archive/2005/02/sifr-2.0-release-candidate-4">sIFR RC4</a> 出來了，這一次加強了對瀏覽器的支持，連 konqueror 也可以用 sIFR 了，而基本上所有的問題都解決了，加快了速度，以及可以用 cookies 來開啟是否用 sIFR。</p>

	<p>sIFR 全寫是  Scalable Inman Flash Replacement ，用 Flash 和 Javascript 的方法，使網頁不只限於用者所擁有的字型，可以使用其他不同的字型。 如果用者的瀏覽器不支持 Javascript 或 Flash 也不緊要，顯示會自動降格為普通字體。</p>

	<p>相關網址： <a href="http://www.mikeindustries.com/blog/archive/2005/02/sifr-2.0-release-candidate-4">Mike Davidson: sIFR 2.0 RC4 is Here</a></p>


	Tags:  <a href="http://jacky.seezone.net/tag/flash/" title="flash" rel="tag">flash</a>, <a href="http://jacky.seezone.net/tag/font/" title="font" rel="tag">font</a>, <a href="http://jacky.seezone.net/tag/sifr/" title="sifr" rel="tag">sifr</a>, <a href="http://jacky.seezone.net/tag/web/" title="web" rel="tag">web</a><br />
]]></content:encoded>
			<wfw:commentRss>http://jacky.seezone.net/2005/03/01/1131/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>網絡字型</title>
		<link>http://jacky.seezone.net/2005/02/15/1111/</link>
		<comments>http://jacky.seezone.net/2005/02/15/1111/#comments</comments>
		<pubDate>Tue, 15 Feb 2005 10:23:33 +0000</pubDate>
		<dc:creator>Jacky</dc:creator>
				<category><![CDATA[網絡]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[web-standard]]></category>

		<guid isPermaLink="false">http://jacky.seezone.net/?p=1111</guid>
		<description><![CDATA[最近在網上到了 王漢宗老師的自由字型 ，是一套開源的字型，大家可以免費下載使用。在此想到在電腦上可以用的中文字型其實少得可憐。這主要都是因為 Windows 本身沒有附帶太多的中文字型，英文的反倒很多，在設計網站時雖然選擇不多，但還是有，總好過中文萬變不離細明體，頂多再加上標楷體，而且好看的字體大小不外乎 8-12pt ，其他的大小看上去總覺得好醜。 可惜的是，因為大多數人都用 windows，所以選擇少之有少，大都用慣了細明體。反而是 linux 的一班用家，對於中文字型的發展更為關心，努力支持。首先，因為細明體是屬於微軟的，所以對於開源系統的 linux 來說，必須開發一套至少是近似於細明體，字形清晰中文字形，還好在各界的幫助之下， linux 至今可以使用的中文字型就比起 windows 本身預設的還多， 這裏 就詳列了不同可以下載免費使用的開源字型。 但是，寫網頁的人，為免用者沒有字型，選擇大都有兩個：用圖片和細明體。用圖的方法其實並不實際，頂多只能用在一些標題或 banner 之上，而且親和力不足，讀字器讀不到，管理上來也是很麻煩。所以大多數的人，都只好屈服用細明體，用一些 unicode 字型如 verdana，又或者索性不設定，由用戶系統決定。 MS 當年有 WEFT ，就是將字型物件 (font object) 放在網站上，再用stylesheet 連繫。點子不錯，但只是 ie only，發展好像不了了之，也不見有很多人在用。近期比較熱門的有 SIFR ，運用flash的技術，做出類似 WEFT 的功效，感覺不錯，而且browser degradable，有網站開始採用，不過就必須要倚靠 flash 和 javascript 才能成事，雖然在應用上作者已寫得盡量簡單，但也有一定的麻煩。(有人試過使用中文嗎？) 希望能夠有更好的方法，去支持網頁自設字型，在 w3c 的 css3 web fonts 就早有這項考慮，不知道今後的瀏覽器發展會如何去支持？大家真的看細明體看得悶了&#8230;&#8230; Tags: css, font, web, [...]]]></description>
			<content:encoded><![CDATA[	<p>最近在網上到了 <a href="http://www.ossacc.org/Download/misc/wangfont">王漢宗老師的自由字型</a> ，是一套開源的字型，大家可以免費下載使用。在此想到在電腦上可以用的中文字型其實少得可憐。這主要都是因為 Windows 本身沒有附帶太多的中文字型，英文的反倒很多，在設計網站時雖然選擇不多，但還是有，總好過中文萬變不離細明體，頂多再加上標楷體，而且好看的字體大小不外乎 8-12pt ，其他的大小看上去總覺得好醜。</p>

	<p>可惜的是，因為大多數人都用 windows，所以選擇少之有少，大都用慣了細明體。反而是 linux 的一班用家，對於中文字型的發展更為關心，努力支持。首先，因為細明體是屬於微軟的，所以對於開源系統的 linux 來說，必須開發一套至少是近似於細明體，字形清晰中文字形，還好在各界的幫助之下， linux 至今可以使用的中文字型就比起 windows 本身預設的還多， <a href="http://wiki.linux.org.hk/index.php/Where_can_I_find_fonts_for_GNU/Linux">這裏</a> 就詳列了不同可以下載免費使用的開源字型。</p>

	<p>

<span id="more-1111"></span><br />
但是，寫網頁的人，為免用者沒有字型，選擇大都有兩個：用圖片和細明體。用圖的方法其實並不實際，頂多只能用在一些標題或 banner 之上，而且親和力不足，讀字器讀不到，管理上來也是很麻煩。所以大多數的人，都只好屈服用細明體，用一些 unicode 字型如 verdana，又或者索性不設定，由用戶系統決定。</p>

	<p>MS 當年有 <a href="http://www.microsoft.com/typography/web/embedding/weft3/default.htm"><span class="caps">WEFT</span></a> ，就是將字型物件 (font object) 放在網站上，再用stylesheet 連繫。點子不錯，但只是 ie only，發展好像不了了之，也不見有很多人在用。近期比較熱門的有 <a href="http://www.mikeindustries.com/blog/archive/2004/08/sifr"><span class="caps">SIFR</span></a> ，運用flash的技術，做出類似 <a href="http://www.microsoft.com/typography/web/embedding/weft3/default.htm"><span class="caps">WEFT</span></a> 的功效，感覺不錯，而且browser degradable，有網站開始採用，不過就必須要倚靠 flash 和 javascript 才能成事，雖然在應用上作者已寫得盡量簡單，但也有一定的麻煩。(有人試過使用中文嗎？)</p>

	<p>希望能夠有更好的方法，去支持網頁自設字型，在 w3c 的 css3 <a href="http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/">web fonts</a> 就早有這項考慮，不知道今後的瀏覽器發展會如何去支持？大家真的看細明體看得悶了&#8230;&#8230;</p>


	Tags:  <a href="http://jacky.seezone.net/tag/css/" title="css" rel="tag">css</a>, <a href="http://jacky.seezone.net/tag/font/" title="font" rel="tag">font</a>, <a href="http://jacky.seezone.net/tag/web/" title="web" rel="tag">web</a>, <a href="http://jacky.seezone.net/tag/web-standard/" title="web-standard" rel="tag">web-standard</a><br />
]]></content:encoded>
			<wfw:commentRss>http://jacky.seezone.net/2005/02/15/1111/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

