http://www.css88.com/archives/821
我们在写css的时候最常用的长度单位是px（像素），经常看到的还有em，pt等等，其实css中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm；
- px：像素（Pixel）,相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。
譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。 - em：相对长度单位。相对于当前对象内文本的字体尺寸。
如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 - pt：点（Point），绝对长度单位。
- ex：相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 - pc：派卡（Pica），绝对长度单位。相当于我国新四号铅字的尺寸。
- in：英寸（Inch），绝对长度单位。
- mm：毫米（Millimeter），绝对长度单位。
- cm：厘米（Centimeter），绝对长度单位。
其中：1in = 2.54cm = 25.4 mm = 72pt = 6pc ；
容器的大小我们经常用px做单位，大家都没什么异议，
字体大小（font-size）很多国内的人（包括我）使用px做单位，其实用px做字体单位唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。如图。或者以前的按住Ctrl+滚动鼠标的中间的滚轮。
所以多人建议使用em，对于用惯了px的人用em肯定不是很方便，这里提供一些转换公式和对照表供大家参考：
- PX to EM: Example: 12px / 16px = .75em
- PX to %: Example: 12px / 16px * 100 = 75%
- PX to PT: Example: 16px * 72 (72 points = 1 inch) / 96 (96 pixels per inch in Windows, 72 in Mac) = 12pt
- EM to PX: Example: .75em * 16px = 12px
- EM to %:Example: .75em * 100 = 75%
- % to PX:Example: 75 * 16px / 100 = 12px
- % to EM:Example: 75 / 100 = .75em
- PT to PX: Example: 12pt * 96ppi / 72ppi = 16px
| Pixels | EMs | Percent | Points |
|---|---|---|---|
| 6px | 0.375em | 37.5% | 5pt |
| 7px | 0.438em | 43.8% | 5pt |
| 8px | 0.5em | 50% | 6pt |
| 9px | 0.563em | 56.3% | 7pt |
| 10px | 0.625em | 62.5% | 8pt |
| 11px | 0.688em | 68.8% | 8pt |
| 12px | 0.75em | 75% | 9pt |
| 13px | 0.813em | 81.3% | 10pt |
| 14px | 0.875em | 87.5% | 11pt |
| 15px | 0.938em | 93.8% | 11pt |
| 16px | 1em | 100% | 12pt |
| 17px | 1.063em | 106.3% | 13pt |
| 18px | 1.125em | 112.5% | 14pt |
| 19px | 1.188em | 118.8% | 14pt |
| 20px | 1.25em | 125% | 15pt |
| 21px | 1.313em | 131.3% | 16pt |
| 22px | 1.375em | 137.5% | 17pt |
| 23px | 1.438em | 143.8% | 17pt |
| 24px | 1.5em | 150% | 18pt |
或者直接访问http://pxtoem.com/（一个px和em互换的网站）；
最后说一句被拍砖的话：
个人认为现在用px做字体单位在IE下无法用浏览器字体缩放的功能的缺点已经不再是那么重要了。因为新版本ie7，ie8都已经支持整个网页的缩放功能，包括火狐默认也是缩放整个网页，而不是缩放字体，没那么单纯的缩放字体大小还有什么重大的意义吗？我的答案是吃饱了撑着没事找事。按住Ctrl+滚动鼠标的中间的滚轮试试！时代不同了！ie进步了！
4 条评论
我觉得字体不缩放更好，要是字体缩放的话有客房吧网页布局撑坏！
终于找到关于CSS度量转化的工具了，谢谢！
全篇的亮点显然在文末。
这个不是很懂啊。。。我就用px 跟em
14 个引用通告
[...] 彻底了解css中的长度单位 [...]
[...] 彻底了解css中的长度单位 [...]
[...] PS:关于font-size，推荐一下码头写的《http://www.css88.com/archives/821》 [...]
[...] PS:关于font-size，推荐一下码头写的《http://www.css88.com/archives/821》 [...]
[...] CSS文字排版终极指南 « 寂静小站 – 网摘寂静小站 – 网摘« 用Web Developer工具栏发现 SEO 问题的 7 个方法CSS文字排版终极指南本站仅为镜像，若想浏览完整文章或发表评论，请前往原址： http://www.alibuybuy.com/14143.html在今天的设计中，排版常常被忽视，特别是被网页设计师忽视。这真是件遗憾的事情因为CSS可以做很多事情来控制我们的排版。也就是说，我们被局限于某些“网络安全”排版，但是我们不应该限制我们自己的创造性。本文整理了一些用于在网页上排版的CSS技巧。Font属性CSS提供了font属性，它允许我们在我们的页面中调整文字。这是一系列的关于语法和如何使用CSS调整文字的概述。Font-size使用font-size可以修改你的文字的大小。1 2 3font-size: 1.2em; font-size: 12px; font-size: 10pt;预览文字大小为1.2em.文字大小为12px.文字大小为10pt.PS:关于font-size，推荐一下码头写的《http://www.css88.com/archives/821》Font-weight该属性用来改变你的文字的粗细(比如bold, bolder)1 2 3 4font-weight: normal; font-weight: bold; font-weight: bolder; font-weight: lighter;预览font-weight设置为normalfont-weight设置为boldfont-weight设置为bolderfont-weight设置为lighterfont-weight属性还可以使用100,200,300,400,500,600,700,800,900等数字值，数字越大，文字越粗。400等效于normal，700等效于bold。Text-transformtext-transform属性允许你应用uppercase(大写), lowercase(小写), 以及capitalize(首字母大写)等效果到你的文字。当然，该属性不能用于中文。1 2 3 4text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: inherit;预览Capitalizes the first letter in every wordAllows your html to be lower case the converts it all to uppercase charactersALLOWS YOUR HTML TO BE UPPERCASE THEN CONVERTS IT TO LOWERCASE, THIS WAS TYPED IN ALLCAPSinherits the text-transform property from its parent elementText-decorationtext-transform属性允许你使用一些文字修饰，比如下划线(underline)、上划线(overline)、删除线(line-through)以及文字闪动(blink)。1 2 3 4 5text-decoration: normal; text-decoration: underline; text-decoration: overline; text-decoration: line-through; text-decoration: blink;预览text-decoration设置为normaltext-decoration设置为underlinetext-decoration设置为overlinetext-decoration设置为line-throughtext-decoration设置为blink (只有Firefox 和Opera 支持)Font-Variantfont-variant属性允许你制作小型大写字母效果，也就是将小写字母变成大写并减小字体型号1 2 3font-variant: normal; font-variant: small-caps; font-variant: inherit;预览Font Variant 设置为 normalFont Variant 设置为 small-capsFont variant 设置为 inheritLetter-Spacing 和 word-spacing这两个属性都用来添加他们对应的元素中的空白。letter-spacing添加字母之间的空白，而word-spacing添加每个单词之间的空白。请注意，word-spacing对中文无效。1 2 3letter-spacing: normal; letter-spacing: 2px; letter-spacing: inherit;预览Letter spacing 设置为 normalLetter spacing 设置为 2pxLetter spacing设置为 inheritfont缩写上面的font属性可以缩写，这样可以大大的提高你的css的效率。1font:font-style font-variant font-weight font-size[/line-height] font-family请注意上面的缩写的书写顺序。另外，如果这里不设置line-height，元素的line-height将会被设置为默认的1，而不会从父级元素或body元素继承。使用缩写的时候，font-size和font-family是必须的，其它几项可根据情况不写。制作有吸引力的段落对于更有吸引力的段落排版，可以采用Robert Bringhurst的方法，它约定：用你的文字大小乘以30就可以得到段落的宽度。比如如果你的文字大小是12px，用30乘以它，也就是360px，这样每行大约可以呈现65个英文字符。不正确的段落大小：Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.正确的段落大小Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Line-height示例行高用来限定每行文字之间的空白大小。一个经验之谈就是让行高比你的字体大6-7px。比如，如果你的文字大小是12px，加上6px就是你的行高，也就是18px。不正确的Line-HeightLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.正确的Line-HeightLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.PS:关于line-height的设置，推荐一下码头写的《line-height的继承问题》清晰的强调文字em{ font-style:italic} #demo5{ width:400px;} #demo5:first-letter{ font-size:32px; color:#000} #demo5:first-line{color:red;}下划线应该只用于文字链接，而斜体是一个更清晰的可选方案.不正确的例子Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.正确的例子Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.first-letter与first-line顾名思义，first-letter就是第一个字母，first-line是第一行文字，它们是少有的被所有主流浏览器支持的CSS 2.1 伪元素，你可以为它们定义任意样式。示例代码1 2 3#demo5{ width:400px;} #demo5:first-letter{ font-size:32px;color:green} #demo5:first-line{color:red;}前端观察 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.前瞻 – CSS3已经有一部分很棒的CSS3特性可以用到你的设计中了。当然这些中的一部分新属性还不能用于IE，但是你或许了解这对IE来说是常事儿，所以你不妨试试。@Font-face@font-face允许你上次一个字体文件到你的网站服务器并将其引入到你的外部CSS文件中，然后就可以将它应用到你的网站的任何文字上。这是处理文字的最大的功能，但是随之而来的是它的负面效果。由于版权问题，只有少数的字体“被允许”使用。这些字体也就是CSS3安全就在这里里面提到的。当然，对于中文字体来说，除了版权问题，还有网速的问题，一般中文字体动辄几MB的大小，字体文件下载到浏览器就要几分钟，这对于用户来说是不划算的。使用@font-face在这个例子中我在我的网站的根目录下放了一个font文件夹，然后将需要用到的字体放入该文件夹。你首先需要声明@font-face 属性以导入你的字体文件，然后使用该字体名称来控制其它元素的字体。1 2 3 4 5 6 7/* 声明字体 */ @font-face { src:(font/diavlo.otf) } /* 将改字体应用到一个元素 */ h1 {font-family: diavlo, Arial; }PS:关于页面的嵌入字体，推荐阅读《如何在网页设计中使用个性化字体》Text-Shadowtext-shadow属性赶走了用Photoshop为某些元素制作下拉阴影的需求，并给你提供动态的阴影控制。当然，该属性IE并不支持。示例标题1 2 3 4 5 6p { font-size: 2em; font-weight: bold; color: #777; text-shadow: 1px 1px 1px #222; }示例标题21p {text-shadow: 2px 2px 2px #222;}示例标题31p {text-shadow: 1px 1px 5px #FFF;}PS：呃，其实前端观察的文章标题和章节的二级标题都用了text-shadow，而且还是用了更漂亮的RGBa颜色。关于CSS阴影，强烈推荐阅读《CSS阴影详解》挑战本文中提到的这些技术都只是一个入门指南。试着采用并实现你喜欢的技术到你的设计中。排版可能是一个网站中最重要的部分，请不要无视它。PS:本文在原文的基础上，补充了少量内容，比如first-letter和first-line部分——神飞关于原作者Shane Jeffers是Three Styles的创办者和作者。他对设计趋势和教程有独特的喜好。你可以通过这个联系页面和他联系到他或者在twitter上关注他 @ThreeStyles译自：The Ultimate Guide to CSS Typography 中文：CSS文字排版终极指南 请尊重版权，转载请注明来源！多谢。Related postsNo related posts.本站仅为镜像，若想浏览完整文章或发表评论，请前往原址： http://www.alibuybuy.com/14143.html 寂静小站 – 网摘 is proudly powered by WordPress MU running on 寂静小站. Entries (RSS) var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); [...]
[...] 彻底了解css中的长度单位 [...]
[...] PS:关于font-size，推荐一下码头写的《http://www.css88.com/archives/821》 [...]
[...] 彻底了解css中的长度单位 [...]
[...] PS:关于font-size，推荐一下码头写的《http://www.css88.com/archives/821》 [...]
[...] 彻底了解css中的长度单位 [...]
[...] 彻底了解css中的长度单位 [...]
[...] 彻底了解css中的长度单位 [...]
[...] PS:关于font-size，推荐一下码头写的《http://www.css88.com/archives/821》 [...]
[...] PS:关于font-size，推荐一下码头写的《http://www.css88.com/archives/821》 [...]