網頁設計中的預設字型

2021-04-29 16:31:45 字數 1495 閱讀 7138

打算將**的預設字型調整為:

font: 12px/1.5 tahoma, helvetica, arial, sans-serif;
測試頁面:default_fonts_test.html

理由如下:

font-size採用px, 不採用em. 理由是em帶來的可用性提公升很有限,同時基於em很難保證視覺設計的精確性,並且現在主流瀏覽器都支援「全頁面縮放(full page zoom)」功能,是時候不用考慮基於字型大小(em)的設計了

line-height採用1.5, 也就是18px. 這是**視覺規範中定義的行高,對於12px字型,這個行高看起來很舒服。

font-family預設採用tahoma. tahoma是英文windows作業系統的預設字型,這個字型比較均衡,顯示中英文混排很不錯,是經久耐看的一款字型。

tahoma是matthew carter為微軟公司設計的一款字型,從mac os x 10.5開始,預設也**了這款字型。但在mac os x 10.4及其之前的系統中,沒有tahoma字型,但有一款看起來比tahoma更典雅的系統預設字型:helvetica. 不信你玩玩這款遊戲:helvetica vs. arial

. 個人情感上,我甚至想把helvetica放在首位,但考慮到非mac系統的helvetica字型都是rip版,以及大部分**使用者用的是windows作業系統,因此只能委屈helvetica, 放在第二位。

arial是早期windows英文系統的預設字型,xp和vista上都是tahoma了。arial幾乎在所有作業系統中都有,因此放在最後,作為一道屏障。

最後的sans-serif是針對強悍的linux diy族。linux預設只有kernel, 字型完全由使用者自定義,針對這部分使用者,sans-serif可能能派上用場。

最後,無論在xp還是vista下,不指定網頁的中文字型時,預設就是宋體。因此font-family裡的'宋體'是多餘的,可以省去。(opera和safari不認識simsun, 用到宋體的地方,還是用'宋體'更保險)(待測試驗證:不指定中文字型時,網頁的預設中文字型是什麼?linux是自己配的,mac os x呢?還有vista中文系統。這些環境下,哪位朋友幫忙測試下網頁的預設中文字型?)

用tahoma字型,在中英文混排時,也有個不好的地方:

兩個數字30所佔的寬度,大於乙個宋體漢字,導致上圖中對不齊。但這僅是設計上的小不妥。調整為以冒號為基線,都向右對齊就可以避免了。

參考資料

談談網頁設計中的字型應用

(很好的一系列文章,學到了很多知識)

是時候不用考慮基於字型大小(em)的設計了

(擁有自己的思考和判斷非常重要,秦歌做到了)

(從10.5開始,預設**了tahoma)

tahoma on wiki

「helvetica, arial」, not 「arial, helvetica」

網頁設計中的預設字型樣式詳解

瀏覽器預設的樣式往往在不同的瀏覽器 不同的語言版本甚至不同的系統版本都有不同的設定,這就導致如 果直接利用預設樣式的頁面在各個瀏覽器下顯示非常不一致,於是就有了類似yui的reset之類用來盡量重寫瀏覽器的預設設定保證各個瀏覽器樣式一致性的做法。拿字型來說,各個瀏覽器預設的字型種類 字型大小和字型行...

網頁設計的字型

字型的處理在網頁設計中無論怎麼強調也不為過,畢竟網頁使用來傳遞資訊的,而最經典最直接的資訊傳遞方式就是文字,所以,了解一點字型的基本知識對於設計來說還是非常重要的。中文和英文的最大區別就是中文是方塊字,英文是拼音文字,這對字型的處理的影響是巨大的。看看下面的圖示就會發現,英文本型裡的那些變化在中文字...

PHP 網頁設計 字型屬性

font size 字型大小 chrome最小12px 谷歌預設的最小值 font weight 字型粗細 bold加粗 bolder更粗 lighter更細 400等同於normal 700相當於bold font style 斜體 normal正常 italic斜體 oblique傾斜 這兩個斜...