2008年6月30日 星期一

網頁字體

(以下截圖全在我的蘋果筆電上操作。不同電腦的顯示結果可能有異。)

我的網誌有許多缺陷,其中之一就是中文字體。姑且讓我稱呼本網誌的圓潤字體為「Sans-serif」,而如細明體般邊角有突起的字體為「Serif」。

下面是我網誌在 Safari 上的截圖,Sans-serif 看起來正常順眼。其中文腳加有一串 Serif 的文字(「映林隙流光……」)。

(Safari)


同段文字在 FireFox 上看,卻變成下圖。Sans-serif 的「你」、「疤」、「辦」、「碰」、「摔」都變成了粗體;Serif 外型則如常。然而,所有字體都嚴重縮小,原五行字可縮擠成四行。

(FireFox)


Sans-serif 只有特定字會變成粗體。「映林隙流光……」那段並非幸運不含任何嫌疑字才能保持完好,因為它在 Google 上以 Sans-serif 呈現時,FireFox 將「黃」字變成了粗體。

(FireFox)


所以,目前看來只有 Serif 能兩面討好,整段文字無論在哪個瀏覽器都維持均勻粗細。然而不少網頁有變換字體的徵兆,如劉謙的網誌,在 Safari 上看是 Sans-serif

(Safari)


在 FireFox 上看則變成 Serif(如下圖),成功維持整段文字同粗細。

(FireFox)


另外有一則美例是 zonble 的網誌,Safari 上是 Sans-serif

(Safari)


FireFox 上仍維持 Sans-serif,卻全體變粗,沒有忽粗忽細的現象:

(FireFox)


zonble 的網誌是我見過最完好的網頁之一,無論在哪台電腦(再破舊陽春的電腦都行)、哪個作業系統、哪種瀏覽器,都沒有缺陷。至於本網誌,我想求好的地方除了字體,還有:更動發表日期的文章會消失於首頁底部標頁翻閱系統、「繼續閱讀」摘要系統無法避免全文載入、鼠標在瀏覽器左上角散步時偶爾在無連結處出現手型、側欄最新回應系統無法辨識回應裡的語法……。在此記下,將來若有能力或獲得指導,再來一一擊破。

--
*7/3/08:
將 font-size 預設的 100% 改成 12pt,能固定不同瀏覽器上的字體大小(至少在我的筆電上)。但改成其他 pt 值仍會造成些微大小差異。

(Safari 11pt)

(FireFox 11pt)


另外發現,無論採用百分比或 pt 值,在 FireFox 上都偶有文字溢出邊框的 bug。

(FireFox 12pt)

3 則留言:

  1. 使用 pt 和 px 為單位,原理上不同,所以 pt 有時會因電腦環境不同而造成差異。

    另外圓潤的字體有時要看 browser 的設定,另外還有 Clear Type 的因素,也會造成差別。

    還有通常 css 指定字型如 font-family: Verdana, Arial, sans-serif,瀏覽器在解析上是依序找尋電腦內是否含有該字型,如果有 Verdana 就用 Verdana,沒有就找 Arial 看看,依此類推。但是這幾個英文字型根本沒有中文字體,所以一般 browser 會內定一種中文字型來顯示,通常是新細明體或細明體。

    簡單來說,Clear type 要看使用者環境妳管不了,如果想要網頁看來比較一致,可用 px 並且記得中英字型都指定,而且最好是一般電腦內大家都會有的字型。(比方說妳指定華康字型,但別人的電腦沒有,一樣會顯示內定的新細明或細明)

    回覆刪除
  2. 原來是 px。不過我目前仍會保留百分比,因為 px 在部份瀏覽器下不允許使用者更改字體大小。

    在我的眾 Mac 電腦上,Sans-serif 能夠辨識中文字並圓潤它。Windows 電腦不行嗎?

    回覆刪除
  3. 我終於知道截圖裡的字型如何依我 Mac 內定的各種語言 fallback。而 FireFox 裡的怪異字型緣由是:順位僅次於英文的日文所被指定的字型無法辨識中文字。感謝 PTT 網友指教。

    回覆刪除