CSS 中字体大小的最佳单位
有什么优点和优点?各自的缺点? em
、px
、%
和 pt
?
我当前的选择是百分比,唯一的原因是因为我可以全局更改所有元素的字体大小,只需修改根元素(主体)上的字体大小即可
What are the advantages & disadvantages of each? em
, px
, %
and pt
?
My current choice are percentages, the only reason is because I can globally change the font-size of all elements, just by modifying the font size on the root element (body)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
我会推荐 EM — 仅仅是因为我使用 Baseline CSS 来设置基本的表单、布局和最重要的类型。
强烈推荐:http://baselinecss.com/
I would recommend EM — simply because I use Baseline CSS for my basic set up of forms, layout and most importantly type.
Can't recommend it enough : http://baselinecss.com/
我最初的设计培训表明,只要有可能,就可以。
我认为一个主要原因是不同的浏览器和设备有不同的分辨率,这再次成为一个大问题。
我认为使用 em 和 % 通常更好,因为它们是抽象层,特别是与像素相比。两者在某些方面相似,如“100%”=“1em”。
像素单元的另一个问题是它无法为视障读者向上缩放。
如今,出于移动设备、平板电脑等方面的考虑,通常最好为每一种设备制定特定的样式表/规则。
另外,对于打印问题,em 效果很好。
我在网络上看到 em 单位被称为字体大小标准,但百分比单位通常会提供更一致且易于访问的显示。当用户设置更改时,文本百分比会很好地保持可读性、可访问性和视觉设计。
My original design training said em's where possible.
I believe a main reason was that different browsers and devices have different resolutions, which is once again becoming a big issue.
I think it's frequently better to use em's and %'s as they are an abstraction layer particularly when compared to pixels. Both are similar in some respects as "100%" = "1em".
Another problem with the pixel unit is that it does not scale upward for visually-impaired readers.
Today, for mobile, pad, etc. consideration it's often better to have specific stylesheets / rules for each one.
Also, for print concerns, em works well.
I have seen em unit called a standard for font sizes on the web, but the percent unit often gives a more consistent and accessible display. When user settings are changed, percent text scales well preserving readability, accessibility, and visual design.
这是我最喜欢的一篇文章的链接,内容是来自 AListApart 的关于使用 css 正确调整文本大小的文章:
http://www .alistapart.com/articles/howtosizetextincss
从语义上讲,
em
是首选,但我总是发现它有问题,因为它会影响每个子元素。如果您的设计嵌套 4 或 5 个 div,并且每个 div 的宽度为 0.75 em,那么当您到达最后一个子 div 时,您的文本几乎无法阅读。我更喜欢 pt,因为它适用于各种操作系统(允许系统本身决定 pt 是什么),而不是使用 px,因为 px 确实会根据分辨率影响网站的可读性。 em被认为是css的“标准”,但它的问题和其他的一样多,但它确实具有全局级联的优势。
Here is a link to one of my favorite articles on proper sizing of text with css from AListApart:
http://www.alistapart.com/articles/howtosizetextincss
Semantically,
em
is preferred, but I've always found it problematic because it impacts each child element inclusively. If your design nests 4 or 5 divs and each is at .75 em, by the time you get to the last child div your text is almost unreadable.My preference is pt because it works with various operating systems (allowing the system itself to decide what a pt is) rather than using px which can really put a pinch on the readability of a site depending on resolution. Em is considered the "standard" for css, but it has just as many problems as the others, but it does have the advantage of cascading globally.
我一直用ems。使用 % 有点相同,但在 padding 或 margin 语句中使用 % 时,它们意味着其他含义(padding:1em 0; 与 padding:100% 0; 不同)。因此,只需使用 em,我的意思是相对于当前字体大小,并避免任何混淆。
使用 ems 的额外好处是,您可以使用媒体查询和
body{font-size: 120%}
为移动用户提供稍大的字体大小。I always use ems. Using % is kind of the same, but they mean something else when using them in a padding or margin statement (padding:1em 0; is not the same as padding:100% 0;). So just use ems I you mean relative to the current font size, and avoid any confusion.
Added benefit or using ems is you could e.g. use a media query and
body{font-size: 120%}
to give mobile users a slightly bigger fontsize.好问题!
我使用像素是因为我喜欢一切都修复后的样子。
但请查看这篇文章:
http:// /kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
可以帮助您做出选择。
我认为这一切都是非常个人化的。或者我想这取决于你在做什么
Nice question !
Me i'm using pixel because I like it when everything is fixed.
But checkout this article :
http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
could help you make a choice.
I think all this is very personal. Or it depend of what you are doing I suppose