星期四, 11月 09, 2006

在網頁上適合呈現的字體大小與行高

範例

本篇將自己私密的撇步,與各位分享:網路上適合閱讀的文字大小,與相對應行高。請注意,此篇的範例乃是在windows系統下觀賞網頁所得到的結論,可能在其他作業系統下得到的結論不同


文字 11 像素大 行高 22 像素
文字 12 像素大 行高 24 像素
文字 15 像素大 行高 30 像素
文字 18 像素大 行高 32 像素
文字 22 像素大 行高 44 像素

嚴格來說,字體大小沒有其規則可循,如果今天換算成字體高 (em) 的話, 12 像素的大小相對於 1字體高,請各位可以自行換算;而行高的定義的規則,則是用字體的兩倍,作為最適合閱讀的行高比例。

以上為自己做網站以來的經驗,歡迎各位不另指教與交流。^_^

附錄:簡單CSS設定字體大小與行高的技巧

首先必須先知道自己的分段習慣是使用什麼HTML標籤,一般來說都是P標籤做分段,我們就以P標籤為範例,做12像素大小與24像素行高:

<p style="font-size: 12px; line-height: 24px;>這是一個段落的文字<hr />然後強迫斷行來看其行高</p>
又,如果你會使用部落格或是網頁中的CSS設定區域,您也可以這樣指定CSS,即可省去每段都要加註的麻煩
p{ font-size: 12px; line-height: 26px; }

用Front Page幫您設定輕鬆設定行高

身為最得人心的FrontPage,當然也可以做到設定行高;你只需要再FrontPage中打好你的文件後,全選你的文件段落,然後到工具列選擇『格式→段落』即可看到左圖的介面,輕鬆設定行高。