在这系列视觉设计的文章间隙插一篇字体单位的文章。

前文说了,字体单位应该用 em 而不用 px,原因简单来说就是支持 IE6 下的字体缩放,在页面中按 ctrl+ 滚轮,字体以 px 为单位的网站没有反应。px 是绝对单位,不支持 IE 的缩放,em 是相对单位。
我在调整本 blog 的时候,发现不仅仅是字体,将行距(line-height),和纵向高度的单位都用 em。保证缩放时候的整体性。

怎么将 px 换成 em 呢?特地转 jorux06 年 12 月的一篇文章,因为中文站用 px 的太多了,如果你是对代码不敏感的纯设计师,可以向技术人员或者页面制作人员请教:

em 是何物?
em 指字体高,任意浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em。为了简化 font -size 的换算,需要在 css 中的 body 选择器中声明 Font-size=62.5%,这就使 em 值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em, 也就是说只需要将你的原来的 px 数值除以 10,然后换上 em 作为单位就行了。em 有如下特点:
1. em 的值并不是固定的;
2. em 会继承父级元素的字体大小。

重写步骤:
1. body 选择器中声明 Font-size=62.5%;
2. 将你的原来的 px 数值除以 10,然后换上 em 作为单位;
简单吧,如果只需要以上两步就能解决问题的话,可能就没人用 px 了。经过以上两步,你会发现你的网站字体大得出乎想象。因为 em 的值不固定,又会继承父级 元素的大小,你可能会在 content 这个 div 里把字体大小设为 1.2em, 也就是 12px。然后你又把选择器 p 的字体大小也设为 1.2em,但如果 p 属于 content 的子级的话,p 的字体大小就不是 12px,而是 1.2em= 1.2 12px=14.4px。这是因为 content 的字体大小被设为 1.2em,这个 em 值继承其父级元素 body 的大小,也就是 16px 62.5% 1.2=12px, 而 p 作为其子级,em 则继承 content 的字体高,也就是 12px。所以 p 的 1.2em 就不再是 12px,而是 14.4px。
3. 重新计算那些被放大的字体的 em 数值。避免字体大小的重复声明,也就是避免以上提到的 1.2
1.2= 1.44 的现象。比如说你在 #content 中声明了字体大小为 1.2em,那么在声明 p 的字体大小时就只能是 1em,而不是 1.2em, 因为此 em 非彼 em,它因继承 #content 的字体高而变为了 1em=12px。

诡异的 12px 汉字 (原因待查)
本人在完成 em 转换时还发现了一个诡异的现象,就是由以上方法得到的 12px(1.2em)大小的汉字在 IE 中并不等于直接用 12px 定义的字体大小,而 是稍大一点。这个问题我已经解决,你只需在 body 选择器中把 62.5% 换成 63% 就能正常显示了。原因可能是 IE 处理汉字时,对于浮点的取值精确度有 限。阅读本篇的读者还有其他解释吗?
本现象只发生在 12px 的汉字,英文不存在此现象。你可以在这里下载到此表现此现象的文件。下载后请读者用 IE 打开 sample.htm, 可以看到第一段文字明显长于第二段。然后你可以用编辑器打开 style.css,看看究竟发生了什么。解决方法就是把 style.css 中的 62.5% 换为 63%。演示链接

还可以做哪些改进

为什么还需改进:
1. 你的网站 css 过于复杂,以至于不知道元素的从属关系,很难重写 css;
2. 绝大部分人看了本文之后仍然不会重写 css;
3. 很大部分人不知道浏览器可以调整页面的字体大小。

所以你需要一个诸如本站信息框中的字体大小调整控件。
相信本站读者的英语能力,这里就不再罗嗦了,

本文地址 https://shaoshilei.com/2014-01/em-difference-between-two-fonts-and-px-units.html