Question

在调整字体大小时使用 em 的人会知道在处理嵌套元素时他们会很头疼，并且必须制作 px - ＆gt; em 计算（以确保您的设计解释正确@ 100％）消耗额外的时间。

考虑到这些（当然是次要的）问题，并考虑到主要浏览器最近取得的进展，如本地处理页面缩放/缩放等可访问性问题，正在使用 em 来调整字体大小认为值得吗？ *

*排除旧版浏览器（IE6）支持。

Answer 1

不要为屏幕样式表指定绝对长度单位的字体大小。它们在不同平台上呈现不一致，并且不能由用户代理（例如浏览器）调整大小。在具有固定和已知物理属性的介质（例如打印）上保留此类单元的样式用于样式

如果您将使用此方法，则无需计算

您可以将正文的字体大小设置为62.5％（即默认值为16px的62.5％），相当于10px或0.625EMs。现在，您可以使用易于记忆的转换在EM中设置字体大小，将px除以10。

* 12px = 1.2EMs
* 13px = 1.3EMs
* 16px = 1.6EMs
* 8px = 0.8EMs
* etc…

这使得SUPER易于记忆，无需转换表。当然，如果你没有在CSS中具体，那么在使用EM时你仍然需要为嵌套元素使用转换表，这是一个完全独立的问题。

但76％要好得多，你可以用它来计算http://pxtoem.com/

是的仍然相关：

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

和

实际上，IE 7和8不会调整使用像素大小的文本大小。他们确实有页面缩放，但有些人更喜欢只增加文字大小。

这里总结了字体大小的优缺点。

Font size in css http://easycaptures.com/fs/uploaded/213/2470522253.png

我个人喜欢ems。其他人，比如Chris Coyier在CSS-Tricks.com上喜欢像素。（Chris has an excellent article on the different font units）。

这真的取决于个人偏好。

关于SO的几乎相似或相关的问题

Should we still use em and % for defining the font-size of the website elements?

Is there really any point to using relative font sizing in CSS?

Why em instead of px?

Font size in CSS - % or em?

CSS font size: relative vs. absolute values. Which to use?

EM问题

Using relative instead of fixed size in CSS

px to em的有用在线工具

http://pxtoem.com/

http://riddle.pl/emcalc/

http://convert-to.com/pixels-px-to-em-conversion.html

将整个网站从px转换为em（此工具仍在开发中）

http://converter.elementagency.com/

EM计算器AIR应用程序（适用于所有操作系统）

http://jameswhittaker.com/journal/em-based-layouts-vertical-rhythm-calculator/

http://jameswhittaker.com/projects/apps/em-calculator-air-application/

Windows应用

http://www.thebrightlines.com/2009/11/16/pixem-pixel-to-em-converter/

http://www.storkas.com/Projects.aspx(go在底部）

用于CSS的Ems转换表的像素

http://jontangerine.com/silo/css/pixels-to-ems/

http://reeddesign.co.uk/test/points-pixels.html

<强> emchart

http://aloestudios.com/tools/emchart/

http://aloestudios.com/code/emchart/

关于此问题的更多文章

http://www.d.umn.edu/itss/support/Training/Online/webdesign/type.html

Answer 2

我过去已经构建了完整的em可缩放网站。事实上，我公司网站（http://kingdesk.com）中的每个维度都是基于em的。在我最近的所有工作中，我放弃了这种做法有四个原因：

EM维护是一个b * tch。在初始设计期间对嵌套元素进行数学计算是一回事，但是在一段时间之后重新定位自己是一件很麻烦的事情 - 仅仅是以固定单位为代价而牺牲了缩放效果。
在过去的两年里，浏览器已经走过了漫长的道路。每个主要浏览器的当前版本都支持本地页面缩放。
IE6中的视觉障碍用户确实不太容易访问这些网站，但是有足够的免费工具可以解决这个问题。如果没有合理的选择，我有道义上的义务来促进他们的需要。如果我的前门有4个ADA可进入的斜坡，我不会演示步骤并用第5个替换它们。
我觉得它在我的设计时间里节省了20％。

我现在只在固定单位设计，从未遇到任何问题或抱怨。

哦，如果你想知道，我不再试图让网站在IE6中看起来像素完美。他们仍然可以导航，看起来很体面。但随着时间的推移，9岁的浏览器会得到应有的关注。

Answer 3

这篇文章发表在Richard Rutter的“A List Apart”中仍然具有相关性，

如何在CSS中调整文本大小 http://www.alistapart.com/articles/howtosizetextincss/

如果你看一下迭代，你会看到，

文字大小（以像素为单位） - 迭代1

结果是Safari和Firefox 仍然调整文本大小，而IE6和 IE7没有。文本可以调整大小 Opera和IE7通过使用页面缩放工具，放大页面布局，文本和图像。

ems中的文本大小 - 迭代2

结果显示，所有人浏览器，中等浏览器的文本设置与...相同文本以像素为单位。它也是演示文本大小的ems 可以在所有浏览器中调整大小。但IE6和IE7令人无法接受夸大小而大已调整大小的文本。

正文大小为百分比 - 迭代3

结果显示出差异更大和更小的浏览器之间 IE6和IE7中的设置现在更少了发音，意思是我们现在拥有所有浏览器渲染文本中等大小相同设置和调整文本大小一致。

以像素为单位设置行高 - 迭代4

结果显示18px line-height由所有文本继承在页面上....不幸的是结果显示18px线高文本时，IE6和IE7不会缩放调整大小，意味着最大的设置似乎压扁了文本。

在ems中设置行高 - 迭代5

结果显示准确，不断调整文本和所有浏览器的行高。完善。或者差不多。

Safari等宽问题 - 迭代6

结果显示一致调整大小所有文本和行高浏览器，包括monospaced Safari 2中的文字。

尽管这篇文章的日期是2007年，但它仍然非常相关。设置字体大小不仅仅是设置em（或px）。

Answer 4

虽然允许，但我总觉得使用em调整字体大小有点荒谬。当用于字体大小调整时，它是一个相对的度量，我认为它只会增加CSS的混乱。如果你真的想让你的字体相对于它的父字体大小，请使用百分数。（font-size: 0.8em相当于font-size: 80%，但百分比更为敏感。）

否则使用其中一个绝对单位。浏览器现在处理并缩放它们。

Answer 5

Ems与保持布局成比例非常相关。在数字印刷术中，1em是每个字母的设计空间的大小，并且等于字体的点大小，例如，如果当前字体是12pt，那么1em是12pt。

百分比和Ems不可互换 - 例如，相对于父级的字体大小指定为80％而不是0.8em可能是也可能不是优选的，例如，对于其他任何地方都不适用。如果我想要一个元素周围的1em边距与指定100％完全不同，那么在这种情况下它将相对于元素占用的空间量。

指定绝对单位会使设计陷入混乱。如果用户选择放大字体，某些浏览器可能无法缩放文本 - 也不应该缩放它们，像素大小应该与点大小无关。还有一个问题是，如果您使用相对大小的字体和绝对大小进行其他测量，那么您的设计可能会死于可怕的死亡，因此您应该在可能的情况下相对指定所有测量，这意味着使用ems。浏览器将“放大字体大小”与“放大此网页”混为一谈，理由是“用户希望看到更大的内容并且它将保持页面设计者的意图”是错误的，无论它看起来多么有用。这就是导致HTML首先变得如此混乱的事情。

我也没有看到指定62.5％的正文字体大小的优点 - 虽然它可以使测量更容易，因为1em = 10px，有一些问题。首先，您仍然在技术上以像素为单位工作，其次它假设用户的默认字体大小为16px。如果您在布局中的任何位置依赖此比率（例如匹配图像大小），如果用户具有不同的默认字体大小，您的设计可能会受到影响，如果您不依赖它并且一切都是相对的，那么字体大小不会没关系，因为一切都会扩展到匹配。

所以，是的，ems仍然值得。

Answer 6

在ems中调整字体的大小并没有多大意义，因为根据定义，1 em 是字体大小。

在ems中调整其他元素是至关重要的，因为这意味着当您决定更改字体大小时，您最终不会完全隐藏所有边距，填充和其他布局方面。

Answer 7

我从不在任何程序中使用像素大小的字体（除了Photoshop我想，因为它默认只有像素）。我总是使用点大小（例如在Word中），然后在em的CSS中相对缩放。我设置了正文font-size，然后使用em进行缩放。

也许我只是习惯了解屏幕上和印刷品中的点大小。我永远无法猜出像素字体高度的大小，所以我不使用它。

Answer 8

对于字体单位和布局尺寸，始终使用“em”、百分比或绝对名称（如“medium”），以便整个网站根据用户的浏览器设置进行缩放。一个例外是跨浏览器样式表，它必须为较旧的代理（如 Internet Explorer 2-5、Netscape 2-4 等）提供基于像素的字体单元。我有特殊的样式解决方案，这些解决方案只为较旧的浏览器提供基于像素的字体值。使用此解决方案，我的网站跨浏览器兼容 99.99%。

仅对新浏览器的字体大小设置使用“rem”，不要使用较旧的跨浏览器设置，因为它不支持各种较旧的浏览器。

切勿将像素用于除图像或严格布局之外的任何内容，您不想在缩放范围之外进行缩放。

我的默认字体大小总是使用“中等”。为什么？因为过去每个浏览器对默认字体大小都有不同的想法。你不可能知道的。这里的几张海报一直说 16px 是默认的中等大小字体。对不起，它不是。在较旧的浏览器中，它是 13px。许多其他人使用完全不同的像素大小。不同浏览器的默认字体大小示例如下：

设备/浏览器|默认字体大小

Opera Mini 4.5 | 13px

Palm webOS 2.0 & webOS TouchPad | 14px

Opera Mini 7 | 17px

AOL 9 | 20px

Cybook Odyssey (e-book reader) | 21px

Blackberry 6.0 | 22px

NetFront NX | 23px

Kindle 32 | 26px

这就是为什么你从不使用像素字体大小的字体！您的网站和布局应该服务于用户的字体设置，而不是相反。现在有很多人在有和没有缩放的情况下缩放浏览器中的字体，原因有很多（眼睛问题、4k 电视、小设备屏幕、年龄、屏幕与观众的距离等）。因此，像素字体对这些人来说是不可读的，因为它们不会为他们缩放或缩放的内容不适合他们的设备比例。可缩放字体会。

顺便说一句.....Bootstrap 失败，因为该框架仍然使用基于像素的字体，而忽略了世界各地的一系列用户代理和用户设置。

这就是为什么年轻的开发人员认为缩放是他们现在需要处理高清屏幕上新“设备像素”的变量以合理化 CSS 中的静态像素单元的原因，他们对网页开发的目的非常不了解。我们必须满足内容及其用户的各种需求，而不是我们漂亮的布局和构建它们的巨大自我。

使用“em”调整字体大小仍然相关吗？

9 个答案:

px to em的有用在线工具