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

Question

那些在调整字体大小时使用em的人会知道在处理嵌套元素时他们会很头疼,并且必须进行px - > 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中定义的字体大小.=>可用性问题.仅此一点就是禁忌.

和

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

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

字体大小在css http://easycaptures.com/fs/uploaded/213/2470522253.png

我个人喜欢ems.其他人,比如Chris Coyier在CSS-Tricks.com上喜欢像素.(Chris有一篇关于不同字体单元的优秀文章).

这真的取决于个人喜好.

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

我们还应该使用em和%来定义网站元素的字体大小吗？

在CSS中使用相对字体大小确实有任何意义吗？

为什么em而不是px？

CSS中的字体大小 - %或em？

CSS字体大小:相对于绝对值.哪个用？

EM的问题

在CSS中使用相对而不是固定大小

有用的px到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 Calculator 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 at bottom)

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的.在我最近的所有工作中,我放弃了这种做法有四个原因:

1. EM维护是ab*tch.在初始设计期间对嵌套元素进行数学计算是一回事,但是在一段时间之后重新定位自己是一件很麻烦的事情 - 只需要以固定单位为代价而牺牲了缩放效果.
2. 在过去的两年里,浏览器已经走过了漫长的道路.每个主要浏览器的当前版本支持本地页面缩放.
3. 确实,IE6中的视觉障碍用户不太容易访问这些网站,但是有足够的免费工具可以解决这个问题.如果没有合理的选择,我有道义上的义务来促进他们的需要.如果我的前门有4个ADA可进入的斜坡,我不打算演示步骤并用第5个替换它们.
4. 我认为它在我的设计时间节省了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行高由页面上的所有文本继承....不幸的是,结果显示当调整文本大小时,IE6和IE7不会缩放18px行高,这意味着最大的设置似乎是压缩文本.

在ems中设置行高 - 迭代5

结果显示所有浏览器中准确,一致调整大小的文本和行高.完善.或者差不多.

Safari等宽问题 - 迭代6

结果显示所有浏览器的文本和行高一致,包括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% 完全不同，在这种情况下，这将与元素占用的空间量有关。

指定绝对单位会使设计陷入混乱。如果用户选择放大他们的字体，一些浏览器可能不会缩放文本——他们也不应该，像素大小应该独立于点大小。还有一个问题是，如果您使用字体的相对大小和其他度量的绝对大小，那么您的设计可能会死得很惨，因此您应该尽可能地指定所有度量，这意味着使用 em。将“放大字体大小”与“放大此网页”混为一谈的浏览器是错误的，无论它看起来有多大帮助，“用户都希望看到更大的所有内容，并且它将保持设计者的意图”。正是这样的事情导致 HTML 一开始就变得如此混乱。

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

所以是的，ems仍然值得。

Answer 6

当你的意思是%时,不要使用em.em工作的唯一原因是因为在CSS 1em中,假设代表字母"M"(em来自"M")的大小实际上等于字体大小.所以当你写1em时,你实际上写的是"100%继承的字体大小 ".当指定相对于字体大小的框尺寸时,将使用em(这种情况很少见,非常罕见).

这个洞"你不能在浏览器中重新调整大小"是一个现代神话,可以追溯到石器时代,当浏览器文本调整大小是一个前端功能,因此仍然有一些真相.

如果我使用ems,我的布局会不会神奇地破坏？当然不是,那只是一厢情愿的想法!

现代浏览器提供文字缩放吗？

简而言之:不是默认的.默认情况下,浏览器提供页面缩放,这通常位于菜单栏的深处,通常在视图下方.您可以期望某些用户知道快捷键Ctrl + MouseWheel,但实际文本缩放更棘手.随着取消菜单栏的现代趋势(注意:在撰写FF4测试版时,默认情况下也取消它)你应该考虑需要文本缩放的用户是那些真正需要它的人.我这样说是因为网上教程/建议的趋势是简单地美化弹性布局并且能够重新调整文本大小但不是真正的问题.可悲的是,弹性/ em /流体布局中的太多"专业人士"完全忽略了这一点:如果我放大到300%或更高,网站应该看起来很棒!如果它只是看起来很好的130%或170%这样的东西是完全没有意义和浪费的努力,只有当他们愚蠢到足以将他们的基本字体设置为10px或更低(对于大文本的方式来说太小)时才真正有用.

另一个问题是"有些浏览器不会缩放",其中IE6是唯一相关的,因为它仍占据互联网的一小部分.如果你不这么认为,你可能已经阅读了2002年左右的一些文章(即它介绍后的1年),唤醒现实:

• 您的观众是否使用IE6并且不知道更好？除非你有一些统计支持,否则假设:不.另外,你应该先为IE6设计吗？答案永远是:地狱没有.您可以在最先进,最全面,最符合标准的浏览器中进行设计.通常,拔河比赛是在Safari和Opera之间进行的.Firefox并没有那么落后,但通常将它们实现为-moz-规则,并且转换为非moz规则的速度很慢.

• 使用IE6实际了解字体大小工具的人有什么机会？如果有疑问则假设为零.人们实际使用IE6(在我们这个时代)照顾所有东西的字体大小的几率是多少？如果有疑问则假设为零.

• 如果你确实碰巧让IE6用户做了一件无辜的事情,你可以做的就是给他们一个正确方向的信息推动,离散地.示例:"您的浏览器,Internet Explorer 6,包含许多安全漏洞.为了您和公司资产的安全,我们鼓励您升级(或要求管理员升级)到更新的版本:http://www.microsoft. com/nz/windows/internet-explorer/default.aspx(它完全免费!)"

知道当前的趋势(按照谷歌这样的网站)尽快杀死IE6也许有用!几乎十年前支持这个被诅咒的浏览器,以及IE5.5等其他怪物,你绝不是专业人士.在阅读网页设计建议之前,请检查日期.

如何使用各种字体大小

• pt("点")是打印的尺寸,只打印!甲点被定义为1/72英寸和大约0.3527毫米.永远不要将pt用于屏幕样式,因为浏览器必须猜测; 并且很多浏览器在猜测时真的很糟糕!一个异食癖是12磅.

  我希望有一种礼貌的方式来说明这一点,但是每当你看到用于屏幕风格的点(无论是在线重置脚本,香草剧本等)时,作者都是个白痴.即使是一个简单的证明视图也应该显示点测量已关闭.

• ex("x-height"的缩写)是一个CSS花式单位,如果你很幸运,你可能永远不会使用.

• px("pixel")是更精确的跨浏览器和跨平台一致的单元.虽然您的浏览器无法准确知道屏幕的高度(以毫米/英寸为单位),但像素完美的精度非常简单.设置(基本)字体大小的用户像素,用于各种关键元素的屏幕显示,特别是当这些元素本身是像素完美时.一个简单的例子:图像上的文字.即使您在整个代码中仅使用em或%值,您仍然依赖浏览器设置的16px基础(当显示屏幕时).

• %是相对大小.只要你想说的话就用%:这比父母大很多/小一些.它可以用作基础,因此理论上的风格可以用于屏幕和印刷以及其他媒体.但是(这只是我自己的意见)你可能想为每种媒体创建一个单独的样式,至少你为该特定媒体设置了最合适的基本字体大小和族.这几乎不是"太多的工作".

• em(如"M"中所示)是指字母M的大小,并且是排版测量(如点),但在CSS中,它在处理屏幕时简单地等于字体大小.如果你正在处理打印,上帝知道它是否不会只是恢复到印刷正确的"M的大小"而不是"字体的大小"(记住CSS不只是屏幕).在为相关文本指定封闭框的尺寸时,最适合使用em.仅在不能使用%时使用它,因为百分比通常更清晰,代码更好.

• 命名尺寸:xx-小,x-小,小,正常,大等,应该避免!您可能会注意到,虽然实验"小"实际上是12px或75%,但更加清晰.但是,它们是跨浏览器不一致的.Firefox中的小版本在Safari中比较小,所以永远不要使用它们.

经验法则:总是用最简洁的语法在上下文中写出你的意思.

真正的问题是:如何让我的用户能够调整文本大小

需要更大文本的用户是视力不佳的用户.当文本具有一定的大小时,不应将视力不佳与完全失明混淆.考虑到眼睛问题的类型有多宽,通常提供小幅度增加,例如130%或160%左右,就不足够了.你只是想被看中,并且它不工作在所有!

您想要的是让您的用户能够调整他们希望阅读的文本的大小.并且建议提供一个简单的A/A(第二个"A"应该更小;用"正常","2x更大"等文本补充它是有用的).将其置于可见的位置,最常见的位置是用户希望阅读的内容的右上角."内容"的背景非常重要:

• 用户只关心他们想要阅读的内容.它们并非完全失明,而你提升基本字体大小并不完全是"治愈失明".如果你的标题是50px,是的,他们可能会看得很好,不需要150px!您可以非常轻松地将字体大小开关放在文章上,让它只影响身体,这将很有效!

• 使您的网站导航用户友好; 如果您需要一个神奇的开关来让某些用户阅读更大的文本,那么您可能需要在默认情况下将其设置为更大!注意:一个用于反复使用的界面(例如控制面板)受到的影响较小,因为您的用户只需佩戴眼镜并阅读一次精细打印,但所有人仍然可以轻松访问.(我指的是难以意外点击破坏性行为的技巧,这些技术优先于此类问题)

如果你必须使你的整个网站"有弹性"(即基于字体大小的动态)

• 首先要确保用户是否使用其中一个浏览器No Style或Accessibility Style功能(请参阅:Opera),您的网站看起来至少有些像样.有实际问题的用户(而不仅仅是鬼混)更有可能使用那些然后尝试立即调整大小.

• 接下来确保您有一个可见的开关用于调整文本大小.现代浏览器默认不调整文本大小,不要假设您的用户将更改这些默认值.

• 当用户使用开关时,请确保不同级别调整标题和各种其他元素.确保一切都变得更大,但是像标题这样的东西只会略微增长,所以它们不仅仅填满整个屏幕(假设用户窗口没有最大化).

• 然后,你能担心弹性布局所涉及的每一个其他头痛.

• 虽然所有这些都分析了行高,并确保选择一个适合您的增量和字体的值.

注意:非常大的字体大小并不罕见,反之亦然.通常情况下,首选尺寸为12px(基础上没有任何东西!),16px和怪物大.