摘要：所以，在网页字体中，使用和单位是更好的解决方案。一般来说，我在开始写网页的时候，会设置标签的字体大小为这样标签就是百分比的单位，然后再网页接下来使用单位。
一、前言
在CSS样式中，当文本缩放的时候使用font-size属性是最难以理解的方面之一。在CSS中，你有4种不同的选择，能够让你设置文本在浏览器中的展示。那么这4种单位哪一种更适合呢？这个问题引发了各种各样不同的争论和评价。想要找到一个比较权威的回答可能比较困难，因为这个问题比较难回答。
二、合适的单位PS: 半年前只翻译啦一半，半夜打开一看原文突然就想把剩下的翻译啦~里面有一些自己的观点描述，如果有错误请您留言给我，一定修正。
"Ems"(em): "em"是被用于网页文件媒介的可缩放的单位（即相对单位）。1em就等于当前字体的大小，举个例子来讲，如果文档中字体的大小为12pt，那么1em = 12pt。Ems拥有能够缩放的特点，所以2em = 24pt，0.5em = 6pt（你也可以使用原文中的.5em，但是我觉得0.5em的可读性更好）等等。
Pixels(px): 像素是被用于屏幕媒介（在计算机屏幕上读取）的固定大小的单位（即绝对单位）。1像素表示电脑屏幕中的1个点（这是你的屏幕能够识别的最小单位）。在设计网页的时候，很多web设计者采用像素，因为它能够很精确的在浏览器中渲染网页。但是，使用像素作为单位，当近视的用户（或者视力不好的用户）放大正在浏览的网页或者在移动端缩小网页到合适的尺寸，都会呈现一些问题。
Points(pt): Points是一直以来被用于打印媒介（打印在纸上等等）。1pt = 1/72英寸。Points和Pixels比较像，它们都是固定大小和不能缩放的单位。
Percent(%): 百分比单位和"em"单位很像，但是存在着细微的不同。首先也是最重要的不同，就是在font-size = 100%（比如：12pt = 100%）的时候。当使用百分比单位，你的文本完全能在移动端正常访问。
三、它们有什么不同呢？当你在实际效果中看它们，能够很容易理解它们之间的不同点。一般来讲，1em = 12pt = 16px = 100%。让我们看看将基本字体大小（body中字体大小）从100%增加到120%之后，它们有什么不同。
测试代码：（这里使用设置div中字体大小来做测试，代码位于文章末尾：例子1-1）
(由于这里不涉及字体设计的讲解，设置了内边距等样式便于比较，但是不影响差异的判断)
正如你所看到的，em和percent单位当基础font-size增加的时候，对应的字体大小也相对增加；但是px和pt单位却没有反应。对文本设置绝对大小很容易，但对于你的用户要缩小（或者放大）文本，用于在一些设备或者机器中正常显示的时候就不是很好。所以，在网页字体中，使用em和percent单位是更好的解决方案。
4. em与百分比的比较我们发现pt和px字体单位不是适应Web文档必须选择的单位（其实从作者的语气中并没有表现出使用px单位不好的意思），我们还有em和百分比作为字体的单位。从理论上来说，em和百分比单位都是相同的（指的都是相对单位），但是在实际的使用中，他们会有细微的不同之处，这些不同之处对于我们在选择字体单位的时候是比较重要的。
从例子1-1中，我们可以看出，我们用了“font-size: 100%“来作为我们的基本单位（作用在body标签上）。如果你改变上面代码中基本单位的font-size: 100%为font-size: 1em（body { font-size: 1em; }），你可能不容易发现改变前后的不同之处。让我们看看改变成em单位后，在改变浏览器文本大小的设置后在一些浏览器上的效果。（文章中作者只说了存在于某些浏览器中，我就测试了一下chrome和ie6/7/8/9/10，发现只有ie6会出现作者描述的不清晰和不一致的效果），效果如下图所示：（测试代码位于文章末尾：例子1-2）
在IE6中的设置地方如下，设置中，字体大小为中的时候渲染效果比较好。
当浏览器字体大小设置为“中”的时候，em和百分比之间几乎没有差异。但是当字体大小改变为其他值得时候差异就比较明显。当“最小”的情况下：em渲染的字体比百分比的更小；当“最大”的情况下：差异相当的明显，em渲染的字体比百分比的更大。虽然部分人认为em单位缩放的方式是他们真正想要的，但是在实际的应用中，em文本的缩放是超出预期的，在某些用户设备中，“最小”字体大小的情况下会导致字体模糊难以阅读的情况（其实有点违背网页可读性一条吧）。
5. 作者观点从理论上讲，em单位是在web字体大小领域中即将到来的标准（在我这时候翻译已经比较流行啦），但是在实际应用中，对于用户来说，百分比单位能够提供更多统一的和可被接受的字体渲染。当浏览器设置发生改变，百分比单位的伸缩是按照一种可靠比率的方式缩放、放大的，这样能够提升网页的可读性，更符合设计师的设计初衷。
得出结论：赢家是“百分比”。(大家不忙喷哈，后面作者更新了现在流行的网页字体设置方式)
6. 作者在2011年1月的补充当我写这篇文章几年后，我想总结一下大家的讨论和辩论。一般来说，我在开始写网页的时候，会设置body标签的字体大小为: font-size: 62.5%；这样body标签就是百分比的单位，然后再网页接下来使用em单位。只要body使用的百分比单位设置，你接下就可以任意的选择em和百分比单位了，这样做的话会保留百分比单位对于网页字体渲染的好处。这这几年里，这样的写法已经成为一种标准。
px现在被认为是能够被接受的字体大小单位（使用它做单位，用户可以使用浏览器的“放大”功能来读取较小的文字） ，不过这样做会出一些问题，当在具有非常高密度屏幕的移动设备中（比如一些Android和iPhone设备上拥有每英寸200~300像素以上，让网页中11px和12px的字体不太拥有良好的阅读体验！ ） 。因此，我将继续使用百分比作为在Web文档中的基本字体大小。
7. 附录例子1-1：各种单位在浏览器中的表现测试代码。
（1）HTML代码：
font-size: 100%
em: The quick brown fox.
pt: The quick brown fox.
px: The quick brown fox.
percent: The quick brown fox.
font-size: 120%
em: The quick brown fox.
pt: The quick brown fox.
px: The quick brown fox.
percent: The quick brown fox.
（2）CSS代码：
/* base style */
body {
font-size: 100%;
}
#test1, #test2 {
float: left;
border: 1px solid #ccc;
padding: 10px;
}
/* container style */
#test1 {
font-size: 100%;
}
#test2 {
margin-left: 50px;
font-size: 120%;
}
/* text underline */
p {
border-bottom: 1px solid #aaa;
}
/* main style */
/* font-size: 100% */
#test1 .p1 {
font-size: 1em;
}
#test1 .p2 {
font-size: 12pt;
}
#test1 .p3 {
font-size: 16px;
}
#test1 .p4 {
font-size: 100%;
}
/* font-size: 120% */
#test2 .p11 {
font-size: 1em;
}
#test2 .p12 {
font-size: 12pt;
}
#test2 .p13 {
font-size: 16px;
}
#test2 .p14 {
font-size: 100%;
}
例子1-2：em与百分比测试中的代码，放在文章最后，以便大家能够更顺畅的阅读下来。
（1）HTML代码：
font-size: 1em
1em: The quick brown fox.
font-size: 100%
100%: The quick brown fox.
（2）CSS代码：
/* base style */
body {
font-size: 1em;
}
#test1, #test2 {
float: left;
border: 1px solid #ccc;
padding: 10px;
}
/* container style */
#test1 {
}
#test2 {
margin-left: 50px;
}
/* text underline */
p {
border-bottom: 1px solid #aaa;
}
/* main style */
#test1 .p {
font-size: 1em;
}
#test2 .p {
font-size: 100%;
}
作者文章的评论也比较精彩，能够学习到更多 ^0^
英文原文作者：http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111211.html
摘要：在平时的工作当中，我发现自己大多数时候是用来作为字体单位的，不仅如此，其实公司的所有前端项目都是以作为字体单位的。我们知道像素作为相对长度单位是相对于显示器的分辨率而言的。很好地解决了的字体大小从父元素继承所带来的不便。 px 在平时的工作当中，我发现自己大多数时候是用px来作为CSS字体单位的，不仅如此，其实公司的所有前端项目都是以px作为CSS字体单位的。我们知道px（像素）作为C...
摘要：常用单位在中可以用很多不同的方式来设定字体的尺寸。当你为一个元素添加单位时，应当考虑到所有父元素的字体尺寸。例宽度是中新提出的一个单位，通过宽度来计算字体尺寸。 个人翻译，转载请注明出处 英文原文：CSS Font Sizing 写在前面 上一篇文章如何做好移动端的响应式设计：Viewport控制讨论到了CSS像素，于是我决定研究一下如何用不同的方式来在CSS中设定字体...
摘要：有的是日常生活中使用的单位，比如厘米和英寸有的是印刷行业使用的单位，比如和有的是专门为发明的单位，比如。但是，由于目前低端打印机的每英寸点数为，而高端屏幕的每英寸点数为，因此所谓的高分辨率可能介于两者之间。。 CSS中有很多属性可以接受长度值，比如： width, height, margin, padding, border-width, font-size, text-shadow...
摘要：原文译文个你可能不知道的单位译者众所周知，当使用技术的时候，很容被一些奇异问题给困住。今天，我就介绍一些你之前可能不知道的属性，是一些例如和测量方面的单位，但是很有可能你之前都没听过这些。然而，对于每一个问题，百分比并不是最好的解决方案。 原文：7 CSS Units You Might Not Know About 译文：7个你可能不知道的CSS单位 译者：dwqs 众所周知，...
阅读 2372·2023-04-25 20:05
阅读 2717·2023-04-25 17:56
阅读 2034·2021-10-14 09:49
阅读 2512·2019-08-29 15:10
阅读 2792·2019-08-29 12:25
阅读 286·2019-08-28 18:23
阅读 576·2019-08-26 13:26
阅读 1256·2019-08-23 18:21
