[闲聊] 字体使用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