隨著移動端的大力普及,移動端網站也正日益發揮著越來越大的作用。由于設備尺寸、分辨率、顯示效果等方面的差異,移動端網站在設計方面同PC端網站也有著不同。這里我們以字體為例,來看看移動端網站通常采用什么樣的字體。
移動端網站通常選用什么字體呢?我們知道,盡管安卓的市場份額很大,但是安卓機是一個開放的底層系統,不易統一。所以設計師通常會選擇以蘋果手機iPhone上的顯示效果為準。那么,在模擬iPhone瀏覽器默認的文字時設計師就拿不準應該選用什么字體了。在Windows平臺下設計iOS產品是一個很嚴重的問題。那就是Windows下暫時無方法完整渲染出蘋果系統的效果。在上圖中我們可以看到,在Mac機上模擬iOS默認字體時可以直接使用蘋果原生的字體:黑體-簡(HEITI-SC )。渲染模式選為蘋果渲染模式即可。如果是PC機需要模擬iOS默認字體,那么用黑體簡會有比較大的出入,反而使用華文細黑-渾厚模式比較接近默認字體。
首先需要說明的是,由于我們設計圖像時的屏幕并不是Retina的屏幕,所以我們需要設計看起來是12像素大小的文字時,我們需要在PS里建立一個24像素的文本框。這就讓我們無法直接看到真實手機上顯示的效果了。所以我們需要不斷地存成圖片然后導入到真機里測試效果。那么如果我們需要設計的移動網站里有很多文字文本,那么多大尺寸的文字才是適合閱讀的呢?雖然不同的人有著不同的觀點,但是總結說來,一般小于22PX的文字基本上是難以閱讀的,在進行移動端網站文字調整的時候需要注意。