不同 瀏覽器Browsers, 平台(作業系統), 螢幕解析度 顯示相同的字型大小

在國外那些推廣Web Standards網路標準的人, 早就想到要讓不同 瀏覽器Browsers與 平台(作業系統)顯示相同的字型大小, 為了解決平台差異的問題 ,Netscape、Mozilla 早在 1999年底妥協採用 Windows的標準 預設字型大小為 16px/96ppi , 只要設計人員 採用em 或 百分比 或CSS的預設字:xx-small, x-small, …….x-large,xx-large就能在不同 瀏覽器Browsers顯示 相同的字型大小。

可是在國內 總有一大堆人在問 要怎麼作 才能顯示相同的字型大小?(I was one of them)
我曾接受錯誤教導: 採用pt 就能固定字型大小。

一個pt(points)印刷單位 長度為 1/72 inch 但pt走進螢幕世界 就如陌生人, 如同px走進印刷世界, 列印軟體會嘗試去猜, 讓電腦玩 猜猜看遊戲 通常電腦會猜得很笨。

em的出現似乎解決了問題, 請看 此頁或上一頁 無論在I E6.0解析度1024X768或1280X960或I E5.0 解析度800X600 都顯示相同的字型大小,

以圖作背景除外 因為採用px 固定字型大小, 這是不讓 使用者 更改字型大小,以免超出背景 如圖示:

<h2 class="browns">One document serves all</h2>

h2.browns {
background-image: url(image/bar2033s.jpg);
position: relative;
left: -10px;
font-size: 24px;
}
不同 瀏覽器Browsers, 平台(作業系統), 螢幕解析度, 顯示相同的字型大小,固定字型大小


為了那些有閱讀小字困難的人, 就應該避免使用px像素
自訂字型大小如圖示:不同 瀏覽器Browsers, 平台(作業系統), 螢幕解析度 顯示相同的字型大小,固定字型大小

若使用em 或 百分比 可以讓使用者 自訂字型大小*1

這對那些困難讀小字的人是體貼的設計, 但對設計人員卻不是, 因為改變了原本的排版, 產生不同的外觀, 對那些推廣Web Standards網路標準 創造em的人 也是頭痛問題。

先不去管那些頭痛, 回到更重要的事: 我曾接受錯誤教導採用pt ,後來發現不對又全部改成px, 後來又發現px在不同的螢幕解析度 字型大小不同, 800X600顯示字型較大,1280X960顯示字型較小, 但此時我全部文章已都採用px 。

wah ! 問題又來了 ?

Dreamweaver 尋找和取代不同 瀏覽器Browsers, 平台(作業系統), 螢幕解析度 顯示相同的字型大小,固定字型大小

幸運的是 我使用CSS排版 只要更改一個指令

.blu {
font-size: 18px;
.
.
.
font-family: Arial, "細明體", "新細明體";
.
.
}

更改成 font-size: 1em;

和利用 Dreamweaver 尋找和取代 全部文章都改成em,

*1 : 為了那些有閱讀小字困難的人, 就應該避免使用px像素, 這是指使用 I E 瀏覽器, Netscape, Firefox 在px像素下仍能讓使用者 自訂字型大小, 像 Mozilla 和 Opera 這樣的瀏覽器Browsers不管你字體用什麼單位, 都允許你改變字體大小。 允許用戶改變文字大小 親和的設計並不只指關於盲人和視力障礙者, 人都會變老, 也是為了未來的你     (not me)。

這就是seed100教學網站 推廣Web Standards網路標準(網站設計標準化)的目的:突破不同 瀏覽器與 平台(作業系統), 不同螢幕解析度的限制, 用CSS排版CSS放入幕後,給予網頁設計師更多的能力來控制網頁, 若使用table, font排版, 要更改一個大型網站, 可能要耗費幾星期,有了CSS一天就完成。

real_vine@hotmail.com

previous page next page
press then return to home page