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

2022-03-14 03:08:26 字數 824 閱讀 4610

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

拿字型來說,各個瀏覽器預設的字型種類、字型大小和字型行高都不一樣,比如ie8的中文版在windows xp下顯示網頁時預設字型是宋體,而英文版肯定不會如此。所以我們需要統一設定預設的字型樣式,以便實現一致的顯示效果來保證設計的一致性和提高開發效率。

通常使用者看到的頁面的樣式會受到三層控制:

和css一樣,後面的優先順序 高於前面的,也就是說網頁定義樣式可以覆蓋瀏覽器的預設樣式,而使用者自定義樣式優先順序最高。不過,當有 !important 時,網頁樣式可以覆蓋使用者自定義樣式。使用者!important > 網頁!important > 使用者 > 網頁 > 瀏覽器預設

使用英文本型作為第一預設字型會導致的問題之一就是中英文以及符號混排時的對齊問題、通過設定行高和haslayout能解決絕大部分情況,但是都不會很完美,如果把字型改成「宋體」能徹底的解決問題。很明顯,這個問題只出現在ie上。所以,如果你的**很少使用英文、數字和英文符號,那麼直接設定也是很合理的選擇。

雖然很早就有了@font-face,但是瀏覽器的支援、網速和商業問題,導致它很少被應用。最近關於字型的好訊息是firefox3.6將支援web open font forma。關於web字型未來的相關資訊可以看web 字型的未來、關於 web 字型:現狀與未來和再談 web 字型的現狀與未來。

有興趣的朋友還可以看一下另一篇針對該文進行補充的《再談 web 預設字型》

網頁設計中的預設字型

打算將 的預設字型調整為 font 12px 1.5 tahoma,helvetica,arial,sans serif 測試頁面 default fonts test.html 理由如下 font size採用px,不採用em.理由是em帶來的可用性提公升很有限,同時基於em很難保證視覺設計的精確...

網頁的預設樣式

html,address,blockquote,body,dd,div,dl,dt,fieldset,form,frame,frameset,h1,h2,h3,h4,h5,h6,noframes,ol,p,ul,center,dir,hr,menu,pre li head table tr thea...

網頁設計的字型

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