[閒聊] 字體使用em取代px

作者: nottt (無)   2018-02-04 22:40:10
前面推文有人在問,之前跟公司同事討論過這個問題,跟大家分享一下
黃字的部分,最下方有對應完整的原始文章可以參考
根據W3C的建議
USE EM OR PX FOR FONT SIZES
But for font sizes it is even better to use em.
使用em或px作為font-size的屬性,除非你很清楚裝置在不同的dpi應該如何呈現,
直接用em會參照body的尺寸,整體來說相對安全。
根據mozilla的建議
Defining font sizes in px is not accessible,
because the user cannot change the font size from the browser.
字體使用px比較沒有網頁親和性,因為使用者沒辦法從瀏覽器切換字體尺寸。
根據無障礙網頁設計規範的建議
3.5:H203004 要使用相對尺寸(如%)而非絕對尺寸(如像素)
對於文字標籤FONT、表格TABLE、頁框 FRAME以及樣式表Style Sheet等設計都應該採用相
對尺寸的設計。
3. 儘量將 px及pt 改成 % 或em
在行動和平版裝置中,px和pt可能並不等於桌機上的一個點dot,造成設計上缺陷和困擾。
大概是這樣
不知道大家是不是曾經都跟我一樣迷惘該用什麼尺寸,整理這些資料推薦給大家。
以下是參考文獻
USE EM OR PX FOR FONT SIZES
But for font sizes it is even better to use em.
https://www.w3.org/Style/Examples/007/units.en.html
Defining font sizes in px is not accessible
https://developer.mozilla.org/zh-TW/docs/Web/CSS/font-size
3.5:H203004 要使用相對尺寸(如%)而非絕對尺寸(如像素)
https://www.handicap-free.nat.gov.tw/Download/Detail/106?Category=39
2016 網頁設計的8項觀念
3. 儘量將 px及pt 改成 % 或em
http://n.sfs.tw/content/index/10474
作者: jmlntw (吉米林)   2018-02-04 22:45:00
em 繼承親元素會變很麻煩的問題;而 px 在現代瀏覽器中已能正常縮放。更現代做法是用 rem 搭配 media query 做 responsive 的文字排版。
作者: nottt (無)   2018-02-04 22:46:00
同意,我也覺得現在的話rem更好用
作者: altecjc (嘉誠)   2018-02-05 01:13:00
rem +1
作者: peanut97 (丁丁)   2018-02-05 10:16:00
謝謝 文件摘錄,受教
作者: Ken52039 (Ken Huang)   2018-02-05 10:30:00
手機上的話 建議可以用vw當單位 隨著螢幕變大變小
作者: Kenqr (function(){})()   2018-02-05 12:01:00
作者: wuzixu (胥)   2018-02-06 13:25:00
覺得vw不錯用

Links booklink

Contact Us: admin [ a t ] ucptt.com