Question

我学到的一个CSS规则是你应该使用相对“em”字体大小的单位而不是绝对的“pt”。一般的想法是将body标签中的font-size设置为例如“94％”，然后将所有其他元素设置为“em”大小。理由是：

然后，您可以通过一次修改正文的字体大小来更改网站上所有字体大小的相对大小
用户自己可以修改字体的大小，因为它们是在“em”

然而，当使用“em”而不是“pt”时，我经常遇到如下问题，其中具有font-size的元素嵌入到具有font-size的另一个元素中并因此变得很小（在下面的情况下）词汇单词是.8的.8，另一个是1.2的.8。

<html>
<head>
    <style type="text/css">
        body {
            font-size: 94%;
        }
        p {
            font-size: .8em;
        }
        li {
            font-size: 1.2em;
        }
        .vocabulary {
            font-size: .8em;
        }
    </style>
</head>
<body>
    <p>This is an <span class="vocabulary">egregious</span> test.</p>
    <ul>
        <li>This is in a <span class="vocabulary">superb</span> list.</li>
    </ul>
</body>
</html>

当然，在非常简单，直接的HTML网站中，这没有问题，但在现实世界中，您可能甚至没有制作导入的样式表，并且动态网站的控件嵌入在其他控件中，所有这些都输出HTML可能具有内嵌样式，我发现有“em”单位字体大小的网站有时无法维护，控制字体大小的方法就是将所有内容转换为硬“px”大小。

此外，我刚检查了四个主要浏览器，每个浏览器都有热键，可以增加和减少“pt”样式字体的大小。

所以这是我的问题：

为什么我应该使用“em”代替“pt”？
是否有使用“em”尺寸的技巧，以便我不会遇到上面的嵌入式字体大小问题？

Answer 1

根据您居住的国家/地区，您实际上最终可能会使用pt而不是em来违反法律，具体取决于您的立法机构要执行规则的难度。在英国，有一项残疾歧视法案，该法案已用于针对其网站以固定字体呈现的公司。这被视为歧视，因为它可能会增加浏览器字体大小以补偿部分位置，但您的网站仍然会按照您设置的大小呈现字体，而不是他们期望的大小。

是的，掌握相对字体大小和流畅的布局更难，但如果你想遵守法规，你必须花时间来掌握这个。

对于英国的地方政府工作，已设定目标以确保网站遵循Double A指南，其中一个指出“在标记语言属性值和样式表属性值中使用相对而非绝对单位”。请参阅here。

Answer 2

即使您以像素为单位对字体大小进行硬编码，您仍然可以使用em作为单位来指定边距，长度等...，类似于使用em quad缩进印刷机中的段落

编辑（海报从px更改为pt后）：如果你想成为“像素完美”，那么使用px而不是pt更安全，因为不同的操作系统有不同的dpi设置，用户更改dpi，特别是在Linux上。 PostScript点定义为1/72英寸。屏幕上的“英寸”可以是72像素之间的任何位置，无论你的船是什么漂浮。

Answer 3

根据我喜欢大文字的网络用户的经验：

为字体大小指定“pt”很好，只要您不在px / pt中指定元素大小即可。因为当你这样做，并且我增加了文本大小时，文本的一半溢出了元素，并且往往溢出被设置为隐藏。

这不需要扭曲你的布局 - 只留下空间让一切都向下增长。我可以更好地处理滚动页面，而不是看不到文本。

Answer 4

1）IE6仍然被广泛使用，无法调整px中定义的字体大小。 =＆GT;可用性问题。仅此一点就是禁忌。

2）例如，见CSS Units。

3）大多数作者同意说pt主要是印刷单元：最糟糕的是，在印刷样式表中使用它们，调整大小的问题就会消失......

Answer 5

另见http://www.killersites.com/mvnforum/mvnforum/viewthread?thread=4084

Answer 6

px：随屏幕分辨率和其他相关问题而变化

em：无论您的屏幕分辨率如何，它都适用于所有

Answer 7

我知道一些专业的CSS开发人员使用“px”在现代浏览器的主样式表中定义字体大小，然后为IE6使用单独的样式表，使用相对单位指定它们。这样他们就可以实现所有浏览器的可用性并允许字体放大，但不必在现代浏览器上妥协他们的设计。

（它们实际上比这更远：它们的IE6样式表关闭了大多数块格式化，只是使用通用的移动设备外观将所有内容都放在一边。这样，IE6用户可以看到简单的布局，其他人都可以看到专业的外观块实际上正确浮动。）

是否有任何实际的理由使用“em”而不是“pt”字体大小单位？

7 个答案: