CSS 字体大小 : Does it matter what kind of unit you use?

标签 css font-size

<分区>

显然,点 (pt) 不应该在网络上使用,只能在打印媒体上使用。如果您想要以像素级完美呈现您的网站,则应使用像素 (px)。百分比 (%) 和 ems (em) 的作用几乎相同,如果您希望您的站点在缩放等时可缩放,则应该使用它们。

五分钟前,我写了这几行代码,并在 Chrome、Firefox、Safari、IE 和 iPhone 5 中进行了测试。

<html>
<p style="font-size:16px;">Dette er en test</p>
<p style="font-size:100%;">Dette er en test</p>
<p style="font-size:1em;">Dette er en test</p>
<p style="font-size:12pt;">Dette er en test</p>
</html>

发生的事情是,当我放大和缩小时,所有段落的大小都保持不变。那么,您使用哪种单位真的很重要吗?

最佳答案

好吧,我找到了一篇关于此的很棒的文章:http://alistapart.com/article/howtosizetextincss

他的结论:

Our task was to find a way to size text that allows designers to retain accurate control of typography, without sacrificing the user’s ability to adjust his or her reading environment. We tested various units across common browsers. Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.

Ems can be tricky to work with, especially when nesting elements deeply, as it can be hard to keep track of the maths. However, commenting your style sheets well and styling elements from the body inwards can keep things easier to follow. This more complex example and its accompanying style sheet demonstrate how to size nested elements using the body as the starting point.

希望对您有所帮助。

关于CSS 字体大小 : Does it matter what kind of unit you use?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14602229/

相关文章:

javascript - 动态获取 raphaeljs 元素的 x & y 值,即使它移动

javascript - 将内容添加到 div 会导致它移动?

javascript - 如何获取父节点

javascript - React Native - 在 Flatlist 中单选

JavaScript/jQuery : is it possible to change font-size to fill a set width?

css - font-style 作为基本样式也适用于使用 % 或 em 的子元素

html - 不要在指定的 div 中应用 CSS - CSS 的法拉第案例

font-size - 更改 Power BI 中的默认字体大小?

html - css:如何水平对齐不同大小的字体

qt - 如何从点大小计算qfont像素大小