一種字型適配多個瀏覽器
今天聊一下網頁基礎問題,字型的運用,不管是資深設計還是小白設計,這些問題你都逃不過去~
大家好,好久不見,忙於事務,很久沒更新教程了。今天我們聊一個簡單且不簡單的問題: 網頁設計中的字型!
網頁設計其實是要適配多個瀏覽器的,比如一個網站做好了,準備上線了,這個時候開始做測試了。很多人都注重功能和頁面呈現是否正常,卻很少測試人員會注意字型的變化。
設計師: 字型變了你發現了嗎?
程式員: 沒有啊,不都是這個字型嗎?你看。
設計師: 不對啊,我設計稿裡是黑體,你這怎麼是宋體了啊!
程式設計師: 有區別嗎?呵呵~
這是我碰到過的對話內容,網頁裡呈現的字型和設計稿的不一致,很多初級設計,不知道那裡出了問題,很容易就被開發給忽悠過去,不更改問題。今天看了這個,你可以懟他了,理直氣壯的懟~哈哈哈哈
一般蘋果系統自帶瀏覽器的字型是 平方 ,windows系統的主流瀏覽器都是 宋體 ,有個別瀏覽器是 微軟雅黑 。正常情況,測試認為這不會是個BUG
但是在設計師層面來說,這是個問題呢~。
先看下幾種字型的對比: (不好意思,用了自己的名字做栗子哈哈哈...)
同樣是24PX的字型,但是在視覺上有很大的不同。
平方自然是完美的!微軟雅黑也是windows裡很美好的字型,算是比較貼合平方的了。宋體其實是一款非常優雅的字型,可是隨著網路的發展和裝置的創新,設計者發現宋體不能適應小屏裝置顯示器了。
手機螢幕的出現就註定了宋體是隻能出現在PC端的小眾字型了,這種襯線字型,筆畫粗細變化過大,在手機螢幕顯示就顯得很弱,看不清,不好辨別,其實他們的大小是一致的,但是宋體看起來就顯得弱,薄。
所以網頁設計的時候,使用什麼字型是很重要的,藝術類的網站,可以考慮宋體,網際網路類的,電商之類的,還是黑體比較合適,字型清晰,易於辨別。 切記黑體不要隨意加粗~會難看到死。
那會有人說了,那就設定字型不就好了,對啊!在前端開發的時候制定好規範,說明字型要求,就可以了。嗯,這是對的,但是你卻忽視了一個問題, 瀏覽器可以設定字型(這個就是每個人的習慣問題)
我們拋開設定字型的情況,就是初始狀態,網頁的字型在任何顯示器都應該是統一的(把系統分開來說 )
如何做到在一個系統裡的瀏覽器顯示的網頁字型一致呢?
其實很簡單:在頁面設定的時候,設定一個狀態,就是瀏覽器預設首選是哪種字型、其次是哪種字型。
這樣有什麼好處呢?
好處就是瀏覽器會首選你設定的預設字型,不管那個瀏覽器都會統一字型樣式。而不是顯示瀏覽器自己的字型。
字號
網頁設計裡字型的大小基本是:12 、14、16、18、20、24PX再大就屬於裝飾性的了,不是內容型的了。
文章內容基本是14-16,標題可以是16加粗、18、20、這些是有別於介面設計裡的字型大小的。不可同日而語!
10號字型切記不可用,因為瀏覽器不相容!前端開發也不會給你寫10號字型的哈哈哈
藝術字
網頁裡不缺乏一些藝術字體,很炫酷好看。其實它們都是以圖片或是背景的形式存在的。例如:
今天就說到這,有機會再聊一下字型再網頁設計中的排版。