如何让字体随窗⼝缩放⾃动调整⼤⼩
这⾥引⽤的是Jorux的“95%的中国⽹站需要重写CSS”的⽂章，题⽬有点吓⼈，但是确实是现在国内⽹页制作⽅⾯的⼀些缺陷。我⼀直也搞不清楚px与em之间的关系和特点，看过以后确实收获很⼤。平时都是⽤px来定义字体，所以⽆法⽤浏览器字体放⼤的功能，⽽国外⼤多数⽹站都可以在IE下使⽤。因为：
1. IE⽆法调整那些使⽤px作为单位的字体⼤⼩；
2. 国外的⼤部分⽹站能够调整的原因在于其使⽤了em作为字体单位；
3. Firefox能够调整px和em，但是96%以上的中国⽹民使⽤IE浏览器（或内核）。
px像素（Pixel）是相对长度单位，像素px是相对于显⽰器屏幕分辨率⽽⾔的。（引⾃CSS2.0⼿册）
em是相对长度单位，相对于当前对象内⽂本的字体尺⼨。如当前对⾏内⽂本的字体尺⼨未被⼈为设置，则相对于浏览器的默认字体尺⼨。（引⾃CSS2.0⼿册）
字体单位使⽤em能⽀持IE6下的字体缩放，在页⾯中按ctrl+滚轮，字体以px为单位的⽹站没有反应。px是绝对单位，不⽀持IE的缩放。em是相对单位，⽹页中的⽂字能放⼤和缩⼩。将⾏距（line-height），和纵向⾼度的单位都⽤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会继续⽗级元素的字体⼤⼩。
所以我们在写CSS的时候，需要注重两点：
1. body选择器中声明Font-size=6
2.5%；（Font-size=63%；⽤于ie6兼容）字体样式软件文字怎么那么小
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放⼤的字体的em数值。避免字体⼤⼩的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。⽐如说你在#content中声明了字体⼤⼩为1.2em，那么在声明p的字体⼤⼩时就只能是1em，⽽不是
1.2em，因为此em⾮彼em，它因继续#content的字体⾼⽽变为了1em=12px。
但是12px汉字例外，就是由以上⽅法得到的12px（1.2em）⼤⼩的汉字在IE中并不等于直接⽤12px定义的字体⼤⼩，⽽是稍⼤⼀点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显⽰了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。
单位pt的说明
在印刷排版中，point是⼀个绝对值，它等于1/72英⼨，可以⽤尺⼦丈量的，物理的英⼨。但是在css中pt含义却并⾮如此。因为我们的显⽰器被分割为了⼀个个的像素，单个像素只能有⼀种颜⾊（为了简化，这⾥暂不讨论次像素反锯齿技术），要在屏幕上显⽰，必须先把以 pt
为单位的长度转换为以像素为单位的长度，这个转换的媒介，就是 DPI （事实上，这⾥的所谓的 DPI，是操作系统和浏览器中使⽤的术语，即为 PPI，pixels per inch，和扫描仪、打印机、数码相机中的 DPI 是不同的概念）。
例如，⽆论在哪个操作系统中，Firefox 浏览器默认的 DPI 都是 96，那么实际上 9pt = 9 * 1/72 * 96 = 1
2px。
所以，虽然“DPI”中的“I”和“1pt 等于 1/72 inch”中的“inch”，都不代表物理上的英⼨，但这两个单位互相之间是相等的，也就在相乘中约掉了。
那么，真实的物理长度怎么计算呢？请拿出⼀把尺⼦，丈量你的显⽰器的可见宽度（我这⾥是 11.2992 英⼨），除以横向分辨率（我这⾥是1024 像素），得到的就是每个像素的物理长度。
现在我们可以回答这样⼀个问题，⽹页上 9pt 的字体究竟占⽤了多宽的空间？答案是：9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 英⼨ = 0.3363厘⽶。
虽然pt是绝对单位，但是那只是针对输出设备⽽⾔的，在⽂字排版⼯具（word，abobe）中是⾮常有⽤的字体单位。不管显⽰器的分辨率是多少，打印在纸⾯上的结果是⼀样的。
但是⽹页主要为了屏幕显⽰，⽽不是为了打印等其他需要的。⽽px能够精确地表⽰元素在屏幕中的位置和⼤⼩。
当然，在dpi是96的情况下，9pt=12px。
转载请注明： »

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。