多終端WEB頁面字型處理方法總結

2021-09-30 11:24:58 字數 1024 閱讀 2422

回想2年前剛開始接觸手機專案,接到psd稿後,發現視覺設計師們喜歡用微軟雅黑作為中文字型進行設計,於是我寫頁面的時候也定義 font-family 為微軟雅黑,後來發到線上後,細心的產品經理發現頁面的字型不是微軟雅黑,要求馬上修改,我就驚呆了,還跟產品爭執一番。

後來了解到的手機系統 ios、android 等是不支援微軟雅黑字型,為了滿足產品的需要,保證視覺稿的還原度,手機端是如何定義微軟雅黑字型呢?

@font-face
有關 @font-face 的使用,大漠的這篇《css3 @font-face

》有詳細的介紹。

雅黑字型問題雖然解決了,但也帶來了影響,一來消耗使用者的流量,二來對頁面的開啟速度造成了延遲。

總感覺不好,為了說服產品經理,找了三大手機系統的字型資料:

ios 系統

android 系統

winphone 系統

並做了個小測試,下圖為測試機 iphone 4s、三星 gt-n7000 android 2.3.6、htc windows phone 8.0 三種手機中的預設中文字型和英文本型展現:

我們可以看出三種不同的中文字型和微軟雅黑一樣是

無襯線字型

,有無襯線只是乙個小原因,而無論頁面中使用哪種字型,肉眼很難看出它們的差異,對產品的體驗幾乎沒有影響。

那麼,使用系統預設的字型所達到的視覺效果跟使用微軟雅黑字型沒有明顯的差別

,權衡利弊,最終

說服了產品經理放棄使用微軟雅黑的想法。

**:

/*

移動端定義字型的**

*/body

web的字型處理

2.對於字型的引用 2.1檔案的目錄截圖 2.2 html部分 雖然今天溫度很低,天氣很冷,但是還是有太陽的,比較開心!綠蘿會開花嗎 為什麼感覺字型不全呢,一些字並沒有被轉化的樣子,這樣顯示的好蹩腳啊。像個壞了的花瓶啊。綠蘿會開花嗎 zsdjfhiafgsdhfg 為什麼感覺字型不全呢,一些字並沒有...

Web頁面的字型介紹

一 網頁常用字型通常分為5類 serif 襯線 字型在字元筆畫末端有叫做襯線的小細節,這些細節在大寫字母中特別明顯。sans serif 無襯線 字型在字元筆畫末端沒有任何細節,與serif字型相比,他們的外形更簡單。fantasy 夢幻 cuisive 草體 字型在瀏覽器中不常用,在各個瀏覽器中有...

Web 單頁面和多頁面模式

前端部分的搭建,需要考慮使用哪種模式進行頁面之間的跳轉互動,而專案內的頁面互動,不可避免的需要相互之間的資料共享。這就引出了本篇部落格的目的,一起來談談 專案前端部分的構建方式以及資料共享方式。1 方便性 結合開發的時間需求和方便性選擇適合的前端模式 2 效能 在專案的體量比較大,或者某個頁面需要載...