Fold All / Expand All

2011年3月27日 星期日

小心使用 -webkit-text-size-adjust: none;

2013年10月23日更新
no more -webkit-text-size-adjust: none; after Chrome 27
Chrome 不吃這個屬性了

話說我們家的UI字型是用11px,而Google Chrome預設minimum font size是12px,所以很多設計師在Firefox上調整好的樣式,在Google Chrome會因為字比較大,而造成排版上的問題。在開發初期也沒有找到什麼解決方案,所以只能記得要在Google Chrome上測試,注意有沒有字被切掉的問題。

後來有天設計師跑來告訴我們,在網路上看到有人說解決Chrome minimum font size的方法,也就是標題的「-webkit-text-size-adjust: none;」,當下一試,果然有效!讓Chrome也乖乖的以11px顯示字型。

不過再搜尋一下相關主題,發現使用這個CSS屬性會造成一個問題,Google Chrome會依照網頁所指定的字型大小,不受最小字型設定限制,但是當使用者縮放網頁,也就是zoom in/out,字型的大小仍然不會改變!

如果今天使用者放大網頁,想看清楚字,在套用了「-webkit-text-size-adjust: none;」的情況下,字型大小是不會變的,而使用者就無法透過縮放網頁來達成放大字型。就accessibility的觀點,這是很糟糕的。所以最後我們沒有套用這個屬性,測試UI時,還是記得要用Chrome檢查。這也是平面設計和網頁設計的差異,網頁設計上需要處理到各個平台造成的差異,當然可以有一個平台是能夠呈現出最符合設計的結果,其他平台有些不同,不需要精確到各個平台都看起來一模一樣,但是最基本的"功能可操作"是必須要有的。

相關連結:
Adjusting the Text Size@Safari Developer Library

沒有留言: