使用“em”字体大小仍然相关吗?

那些在调整字体大小时使用em的人会知道,在处理嵌套元素时,他们可能会头痛,并且必须进行px – > em计算(以确保您的devise解释是正确的@ 100%)会消耗额外的时间。

考虑到这些(虽然很小)的问题,并且考虑到主要浏览器在本地处理诸如页面缩放/缩放之类的可访问性问题的最近进展,正在使用em来确定仍然被认为值得的字体的大小? *

*遗留浏览器(IE6)支持排除在外。

不要以绝对长度单位为屏幕样式表指定字体大小。 它们在不同的平台上呈现不一致,不能被用户代理(例如浏览器)resize。 保持这些单位的使用风格固定和已知的物理属性(如打印)

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

您可以将主体的字体大小设置为62.5%(即16px的默认值的62.5%),相当于10px或0.625EM。 现在,您可以通过易于记忆的转换在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。 其他人,比如CSS-Tricks.com上的Chris Coyier喜欢像素。 ( 克里斯有不同的字体单位的优秀文章 )。

这真的归结为个人喜好。

几乎类似或相关的SO问题

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

在CSS中使用相对字体大小真的有意义吗?

为什么他们而不是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计算器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(在底部);

像素到Ems转换表的CSS

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

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

  1. EM维护是abch tch。 在最初的devise过程中对嵌套元素进行math计算是一回事,但是在一段时间之后重新定位是一件很麻烦的事情 – 只是以固定单位为代价,而忽略了缩放效应。
  2. 浏览器在过去的两年中走过了漫长的道路。 每个主stream浏览器的当前版本都支持本地缩放页面。
  3. 确实,这些网站对于IE6中的视觉障碍用户而言是不易访问的,但是为他们解决这个问题提供了丰富的免费工具。 如果没有合理的select,我有一个道义上的义务来帮助他们的需要。 如果有4个ADA可到达的坡道到我的前门,我不打算演示步骤,并取代他们第五。
  4. 我觉得在我的devise时间里可以节省20%。

我现在只能用固定的单位来devise,而且从来没有遇到任何问题或抱怨。

哦,如果你想知道,我不再试图让网站看起来象素完美的IE6。 他们仍然可以通航,而且看起来很体面。 但时间继续前进,9岁的浏览器得到他们应有的关注。

这篇文章张贴在“理查德·拉特的”A List Apart“中仍然是相关的,

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

如果你看看迭代,你会看到,

以像素为单位的文本大小 – 迭代1

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

ems中的文本大小 – 迭代2

结果显示,在所有浏览器中,中等浏览器设置的文本呈现与以像素为单位的文本相同。 它还演示了在ems中大小的文本可以在所有浏览器中resize。 然而,IE6和IE7无法接受地夸大了resize的文本的小和大。

体积大小的百分比 – 迭代3

结果显示,IE6和IE7中浏览器设置的大小差异现在不太明显,这意味着我们现在已经有了所有的浏览器在中等设置下呈现相同大小的文本,并且一致地调整文本的大小。

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

结果显示,18px行高被页面上的所有文本inheritance….不幸的是,结果显示,当文本被resize时,18px行高不会被IE6和IE7缩放,这意味着最大的设置似乎压扁文本。

在ems中设置行高 – 迭代5

结果显示,在所有浏览器中都能准确,一致地resize的文本和行高。 完善。 或者几乎如此。

Safari的等宽问题 – 迭代6

结果显示,所有浏览器的文本和行高都一致地resize,包括Safari 2中的等宽文本。

尽pipe这篇文章是2007年的,但它仍然非常相关。 设置字体大小不仅仅是设置em(或px)。

当你真正的意思是%时,不要使用em。 em工作的唯一原因是因为在CSS 1em中,假设代表字母“M”( em来自“M”)的大小实际上等同于字体大小。 所以当你写1em时,你实际上正在编写“100% 的inheritance字体大小 ”。 当指定相对于字体大小的盒子尺寸(这是罕见的,真的非常罕见)时,em是用来指定的。

这个洞“你不能在浏览器中重新resize”是一个现代的神话 ,可以追溯到石器时代,当浏览器文本resize是一个前端function,因此,它仍然有一些事实。

如果我使用EMS,我的布局会不会中断? 当然不是,那只是一厢情愿的想法!

现代浏览器是否提供文字缩放?

总之:不是默认的。 浏览器默认提供了一个页面缩放function,这通常被隐藏在菜单栏的深处。 你可以期望你的一些用户知道快捷键Ctrl + MouseWheel,但是实际的文本缩放比较棘手。 随着现代的趋势,取消菜单栏(注:截止撰写本文FF4testing版也取消了它,默认情况下),你应该考虑用户需要文本缩放是真正需要它的人 。 我这样说是因为在networking上的教程/build议的趋势是简单地荣耀弹性布局,并能够重新调整文本的大小,但不是真正的问题。 可悲的是,弹性/stream线型布局中的许多“专业人士”完全错过了这个观点:如果我放大至300%或更高,站点应该看起来很好! 如果130%或者170%这样的东西看起来不错,那就毫无意义,浪费精力,只有当他们愚蠢地把基本字体设置为10px或更低(对于大量文本来说太小) 。

另一个问题是“一些浏览器不缩放”,其中IE6是唯一相关的,因为它仍然占有一小部分的互联网。 如果你不这样想,你可能从2002年左右(即推出1年后)开始阅读一些文章,醒悟到现实:

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

  • 有人使用IE6真正知道字体大小的工具有什么机会? 如果有疑问承担零。 实际上使用IE6的人(在我们的时代)对于所有东西的字体大小有什么机会? 如果有疑问承担零。

  • 如果你真的有IE6用户一个无辜的事情,你可以做的是给他们一个正确的方向,离散的信息。 例如: “您的浏览器Internet Explorer 6 包含许多安全漏洞 ,为了您和公司资产的安全,build议您升级(或者要求您的pipe理员升级)到新版本: http : //www.microsoft。 com / nz / windows / internet-explorer / default.aspx (这是完全免费的!)“

了解当前的趋势(像谷歌这样的网站)也是有用的, 尽快杀死IE6! 你十几年前支持这个受到诅咒的浏览器,以及其他诸如IE5.5等怪物,你绝不是专业人士。 在阅读网页devise的build议之前,请检查date。

如何使用各种字体大小

  • (“分”)是打印的大小, 只打印 ! 一个被定义为1/72英寸,大约0.3527毫米。 永远不要使用点屏幕样式,因为浏览器将不得不猜测; 而且很多浏览器在猜测中真的很糟糕! 一个异食癖是12点。

    我希望有一个礼貌的方式来说这个,但任何时候你看到用于屏幕风格的点(不pipe是在线重置脚本,香草脚本等),作者都是白痴。 即使是一个简单的certificate,也应该显示点测量是closures的。

  • ex (“x-height”的缩写)是一个CSS幻想单位,如果你幸运的话,你可能永远不会使用它。

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

  • %是相对大小。 只要你的意思是说,使用%:这比父母大/小很多倍。 它可以作为一个基础,因此理论上的风格可以用于屏幕和印刷等媒体。 但是(这只是我自己的意见),您可能希望为每个媒体创build一个单独的样式,至less您可以为该特定媒体设置最合适的基本字体大小和族。 这不是“太多的工作”。

  • em (如“M”)是指字母M的大小,是一个排版测量(如 ),但在CSS中,它只是等于字体大小, 处理屏幕时 。 如果你正在处理打印问题,上帝知道它是不是只能恢复到印刷正确的“M尺寸”,而不是“字体大小”(记住CSS不仅仅是屏幕)。 指定封闭框相对于文本的尺寸时,最适合使用em。 只有当你不能使用%时才使用它,因为一般来说百分比是更清晰和更好的代码。

  • 命名大小:xx-小,x-小,小,正常,大等等,应该避免! 您可能会注意到,虽然实验中“小”实际上是12px或75%,但是很容易理解。 但是,它们是不一致的跨浏览器。 在Firefox中体积较小,在Safari中较小,所以永远不要使用它们。

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


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

需要更大文本的用户是视力不佳的用户。 当文本具有一定的规模时,不应该将视力不好与完全失明混为一谈。 鉴于眼睛问题的types有多宽,通常提供一个小的增加,例如130%或160%左右,只是没有足够的地方。 你只是想变得花俏,而且根本不起作用!

你想要的是给你的用户调整他们希望阅读的文本的大小。 build议提供一个简单的A / A(第二个“A”应该更小,用“正常”,“2倍大”等文字补充它是有用的)。 将其放置在可见的地方,最常见的位置是用户希望阅读的内容的右上angular。 “内容”的背景非常重要:

  • 用户只关心他们想要阅读的内容。 它们并不完全是盲目的,而且基本的字体大小并不完全是“固化失明”。 如果你有一个50px的标题,是的,他们可能会看到它很好,没有必要使其150px! 你可以很容易地把字体大小的开关放在文章上,让它只影响身体,这将是非常好的!

  • 使您的网站导航用户友好; 如果你需要一个魔术开关来让这些文字更大,让你的一些用户阅读,那么你可能需要把它设置得更大一些。 注意:控制面板等反复使用的界面受到的影响较小,因为用户只需戴上眼镜并阅读一次精细打印,但仍然应该大部分都可以轻松访问。 (我指的是使破坏性行为难以意外点击的技术,这些技术优先于这些问题)

如果你必须使整个网站“弹性”(即基于字体大小的dynamic)

  • 首先确定用户是否使用浏览器No Style或Accessibility Stylefunction之一(请参阅:Opera),您的站点至less有点体面。 有实际问题的用户(而不是仅仅是愚弄)更有可能使用这些问题,然后立即尝试resize。

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

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

  • 那么,你可以担心与弹性布局的其他头痛。

  • 虽然所有这些分析行高,并确保select一个值,适度增加您的增量和字体。

注意:非常大的字体大小并不是罕见的,反之亦然。 通常情况下,首选的大小是12像素(基地,没有任何东西更低!),16px,只是怪物大

尽pipe允许,但我一直觉得使用em来设置字体的大小是没有意义的。 当用于字体大小,这是一个相对的措施,我认为这只是增加了你的CSS混乱。 如果你真的想给你的字体相对于它的父字体大小,使用百分比。 ( font-size: 0.8em相当于font-size: 80% ,但百分比更有意义。)

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

Ems与保持您的布局成比例非常相关。 在数字排版中,1em是每个字母的devise空间大小,相当于字体的磅值,例如,如果当前字体是12pt,那么1em是12pt。

百分比和Ems是不可互换的,尽pipe指定相对于父级的字体大小为80%而不是0.8em是可取的,例如,对于其他地方也是如此。 如果我想要一个与指定100%完全不同的元素,在这种情况下将相对于元素占用的空间量,需要一个1em的边距。

指定绝对单位会使devise陷入混乱。 如果用户select放大字体,一些浏览器可能不会缩放文字 – 也不应该像素尺寸与点大小无关。 还有一个问题,如果你使用字体的相对大小和其他测量的绝对大小,那么你的devise可能会死亡,所以你应该尽可能相对指定所有的测量,这意味着使用ems。 将“放大字体大小”与“放大此网页”混淆的浏览器是以“用户希望看到的一切更大,并且能够保持页面的devise者的意图”为理由的错误,无论看起来多么有用。 正是这样的事情导致HTML首先是如此巨大的混乱。

我也没有看到指定62.5%的字体大小的优点 – 虽然它可能使得测量更容易,因为1em = 10px,但还是有一些问题。 首先,你仍然在技术上像素化,其次它假定用户的默认字体大小是16px。 如果您在布局的任何位置(例如匹配图像大小)都依赖于此比例,则在用户使用不同的默认字体大小的情况下,您的devise可能会受到影响;如果您不依赖此设置,并且所有内容都是相对的,则字体大小不要紧,因为一切都会缩放以匹配。

所以是的,EMS仍然是值得的。

在ems中字体大小并没有多大意义,因为1 em 是字体大小 ,按照定义。

调整ems中的其他元素是非常重要的,因为这意味着当你决定改变字体大小时,你不会完全放弃所有的边距,填充和其他布局方面。

我从来没有在任何程序中使用像素大小的字体(除了我想的Photoshop,因为它默认只有像素)。 我一直使用点的大小(如在Word中),并且已经转移到与CSS的相对缩放比例。 我设置身体的font-size然后使用em进行缩放。

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