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

看板Web_Design作者 (無)時間7年前 (2018/02/04 22:40), 編輯推噓6(603)
留言9則, 7人參與, 7年前最新討論串1/1
前面推文有人在問,之前跟公司同事討論過這個問題,跟大家分享一下 黃字的部分,最下方有對應完整的原始文章可以參考 根據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 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 175.181.253.96 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1517755215.A.A96.html

02/04 22:45, 7年前 , 1F
em 繼承親元素會變很麻煩的問題;而 px 在現代瀏覽器中已
02/04 22:45, 1F

02/04 22:45, 7年前 , 2F
能正常縮放。更現代做法是用 rem 搭配 media query 做 res
02/04 22:45, 2F

02/04 22:45, 7年前 , 3F
ponsive 的文字排版。
02/04 22:45, 3F

02/04 22:46, 7年前 , 4F
同意,我也覺得現在的話rem更好用
02/04 22:46, 4F

02/05 01:13, 7年前 , 5F
rem +1
02/05 01:13, 5F

02/05 10:16, 7年前 , 6F
謝謝 文件摘錄,受教
02/05 10:16, 6F

02/05 10:30, 7年前 , 7F
手機上的話 建議可以用vw當單位 隨著螢幕變大變小
02/05 10:30, 7F

02/05 12:01, 7年前 , 8F
02/05 12:01, 8F

02/06 13:25, 7年前 , 9F
覺得vw不錯用
02/06 13:25, 9F
文章代碼(AID): #1QTnjFgM (Web_Design)
文章代碼(AID): #1QTnjFgM (Web_Design)