下面是我总结的css中关于字体尺寸的知识，欢迎高手拍砖！
前端开发过程中，我们经常会遇到设置某个div固定显示几行文本；这时我们需要精确计算每个字号字体的宽度和高度。
下面是w3school中描述的尺寸的单位：
| 单位 | 描述 |
|---|---|
| % | 百分比 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| em |
1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。 例如，如果某元素以 12pt 显示，那么 2em 是24pt。 在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。 |
| ex | 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。) |
| pt | 磅 (1 pt 等于 1/72 英寸) |
| pc | 12 点活字 (1 pc 等于 12 点) |
| px | 像素 (计算机屏幕上的一个点) |
我做了一个工具，用来展示字体高度和宽度对照表：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>测试字体宽度和高度</title> <script src="http://code.jquery.com/jquery.min.js"></script> <!--这个永远是最新版本的CDN--> <style> body,html{ height: 100%; font-size:100%; } div{bordor 1px green dotted;} div,p,h1,h2{ margin:0; padding:0; } h1,h2{ text-align:center; margin:3px 0; } div.content{ width:90%; margin:auto; border:yellow 1px solid; overflow:auto; padding:10px; text-align:center; } div#font{ border:1px red dotted; height:230px; overflow:auto; } div#font p{ border:1px green dotted; } .hidden{ display:none; } div.fontlist{ border:1px red dotted; height:400px; overflow:auto; } table.result{ border-left:1px solid blue; border-bottom:1px solid blue; width:50%; margin:auto; } table.result th,table.result td{ border-right:1px solid blue; border-top:1px solid blue; padding:5px; } .fl{ float:left; } .fr{ float:right; } .clearboth{ clear:both; } .hidden{ display:none; } div.Top_Error{ position:fixed; bottom:0; left:0; z-index:99; width:50%; overflow:auto; color:red; background-color:white; border:1px green solid; } .red{ color:red; } </style> </head> <body> <h1>测试字体宽度和高度</h1> <div class="content"> <input type="button" class="test" value="获取字体高度"/> <h2>字体</h2> <div id="font"> </div> <h2>结果</h2> <div class="fontlist"> <table cellspacing="0" class="result"> <caption>结果</caption> <thead> <tr> <th>字体大小</th> <th>字体高度</th> <th>字体宽度</th> </tr> </thead> <tbody></tbody> </table> </div> </div> <script> //初始化 $(function(){ initPage(); }) function initPage(){ var $font = $('div#font'); setFontSize('px',10,30); setFontSize('em',1,10,'red'); //滚动条置顶 $font.scrollTop(0); } //点击按钮[测试字体宽度和高度] $('input[type=button].test').click(function(){ var $tbody = $('table.result tbody'); $tbody.empty(); var sbody=""; sbody +=getFontSize(); $tbody.append(sbody); //滚动条置顶 $tbody.scrollTop(0); }) //获取字体高度-宽度 function setFontSize(sunit,b,e,classname){ var $font=$('<div></div>'); if(classname==undefined){ classname=""; } else { classname=" "+classname; } for(var i=b;i<=e;i++){ var p = $('<div class="font fl'+ classname +'"></div>'); p.css('fontSize',i + sunit); p.text('字'); p.attr('title','字体大小'+i + sunit) $font.append(p); } $('div#font').append($font); $('div#font').append('<div class="clearboth"></div>'); } //获取字体高度-宽度 function getFontSize(){ var sbody=""; var classname=""; $('div#font .font').each(function(i,val){ var p = $(val); var title=p.attr('title').replace('字体大小',''); if(title.indexOf('em')>-1){ classname="red"; } sbody +="<tr class='"+ classname +"'>"; sbody +="<td>"+ title + "</td>"; sbody +="<td>"+ p.height() +"</td>"; sbody +="<td>"+ p.width() +"</td>"; sbody +="</tr>"; console.log(title); }); return sbody; } //获取当前日期 var DateFormat = function (date,itype) { if (!(date instanceof Date)) { date = date.replace(/-/g, "/"); date = new Date(date); } var month = date.getMonth() + 1; var year = date.getFullYear(); var day = date.getDate(); var Hour = date.getHours(); var second = date.getSeconds(); var minute = date.getMinutes(); var NewDate=""; if (month < 10) { month = "0" + month; } if (day < 10) { day = "0" + day; } NewDate = year + "-" + month + "-" + day; if(itype == 2){ NewDate +=":" + Hour +":" + second +":" + minute; } return NewDate; } //组织错误提示窗口 function setError(sError){ var div = $('div.Top_Error'); if(div.length == 0){ div='<div class="Top_Error"><div class="fr"><button onclick="hiddenerr()" class="hiddenerr">关闭</button></div><div class="ErrContent"><ul></ul></div></div>'; $('body').append(div); } div = $('div.Top_Error ul'); var p = '<p>' + DateFormat(Date(),2) + '</p>'; p += '<p>' + sError + '</p>'; div.append('<li>' + p + '</li>') console.log($('.Top_Error .toggle')); } //全局错误捕获 window.onerror = function (sMsg, sUrl, sLine) { var sContent = "<p>信息：" + sMsg + "</p>" + "<p>网页：" + sUrl + "</p>" + "<p>行：" + sLine + "</p>"; //alert(sContent); setError(sContent); return true; } </script> </body> </html>
下面是运行截图：
可以参照博文：