首页 > 代码库 > CSS中字体尺寸总结
CSS中字体尺寸总结
下面是我总结的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 | 像素 (计算机屏幕上的一个点) |
我的总结：
1.px
10px: 高度13px(等于10+3),宽度10px；
11px: 高度14px(等于11+3),宽度11px；
以此类推：px占用的高度等于字号大小加3，宽度等于字号大小。
2.em
1em: 高度13px(等于10+3),宽度10px；
2em: 高度14px(等于11+3),宽度11px；
以此类推：em占用的高度等于字号大小加12，宽度等于字号大小加9。
上面是大概的推论，具体的请运行下面的工具，查看精确结果。
我做了一个工具，用来验证上面的总结：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>测试字体宽度和高度</title> 6 <script src="http://code.jquery.com/jquery.min.js"></script> <!--这个永远是最新版本的CDN--> 7 <style> 8 body,html{ 9 height: 100%; 10 } 11 div{bordor 1px green dotted;} 12 div,p,h1,h2{ 13 margin:0; 14 padding:0; 15 } 16 h1,h2{ 17 text-align:center; 18 margin:3px 0; 19 } 20 div.content{ 21 width:90%; 22 margin:auto; 23 border:yellow 1px solid; 24 overflow:auto; 25 padding:10px; 26 text-align:center; 27 } 28 div#font{ 29 border:1px red dotted; 30 height:230px; 31 overflow:auto; 32 } 33 div#font p{ 34 border:1px green dotted; 35 } 36 .hidden{ 37 display:none; 38 } 39 div.fontlist{ 40 border:1px red dotted; 41 height:400px; 42 overflow:auto; 43 } 44 table.result{ 45 border-left:1px solid blue; 46 border-bottom:1px solid blue; 47 width:50%; 48 margin:auto; 49 } 50 table.result th,table.result td{ 51 border-right:1px solid blue; 52 border-top:1px solid blue; 53 padding:5px; 54 } 55 .fl{ 56 float:left; 57 } 58 .fr{ 59 float:right; 60 } 61 .clearboth{ 62 clear:both; 63 } 64 .hidden{ 65 display:none; 66 } 67 div.Top_Error{ 68 position:fixed; 69 bottom:0; 70 left:0; 71 z-index:99; 72 width:20%; 73 overflow:auto; 74 color:red; 75 background-color:white; 76 border:1px green solid; 77 } 78 .red{ 79 color:red; 80 } 81 </style> 82 </head> 83 <body> 84 <h1>测试字体宽度和高度</h1> 85 <div class="content"> 86 <input type="button" class="test" value="获取字体高度"/> 87 <h2>字体</h2> 88 <div id="font"> 89 </div> 90 <h2>结果</h2> 91 <div class="fontlist"> 92 <table cellspacing="0" class="result"> 93 <caption>结果</caption> 94 <thead> 95 <tr> 96 <th>字体大小</th> 97 <th>字体高度</th> 98 <th>字体宽度</th> 99 </tr>100 </thead>101 <tbody></tbody>102 </table>103 </div>104 </div>105 <script>106 //显示/隐藏错误窗口107 function hiddenerr(){108 $(‘.ErrContent‘).toggle(800);109 }110 //点击按钮[测试字体宽度和高度]111 $(‘input[type=button].test‘).click(function(){112 var $tbody = $(‘table.result tbody‘);113 var $font = $(‘div#font‘);114 115 $tbody.empty();116 $font.empty();117 var sbody="";118 sbody +=GetFontSize(‘px‘,10,30);119 sbody +=GetFontSize(‘em‘,1,10,‘red‘);120 $tbody.append(sbody);121 //滚动条置顶122 $font.scrollTop(0);123 $tbody.scrollTop(0);124 })125 //获取字体高度-宽度126 function GetFontSize(sunit,b,n,classname){127 var sbody="";128 var $font=$(‘<div></div>‘);129 130 for(var i=b;i<=n;i++){131 var p = $(‘<p class="fl ‘+ classname +‘"></p>‘);132 p.css(‘fontSize‘,i + sunit);133 p.text(‘字‘);134 p.attr(‘title‘,‘字体大小‘+p.css(‘fontSize‘))135 $font.append(p);136 }137 $(‘div#font‘).append($font);138 $(‘div#font‘).append(‘<div class="clearboth"></div>‘);139 140 $(‘div#font p‘).each(function(i){141 var p = $(this);142 sbody +="<tr class=‘"+ classname +"‘>";143 sbody +="<td>"+ (i+b) + sunit + "</td>";144 sbody +="<td>"+ p.height() +"</td>";145 sbody +="<td>"+ p.width() +"</td>";146 sbody +="</tr>";147 });148 return sbody;149 }150 //组织错误提示窗口151 function setError(sError){152 var div = $(‘div.Top_Error‘);153 if(div.length == 0){154 div=‘<div class="Top_Error"><div class="fr"><button onclick="hiddenerr()" class="hiddenerr">关闭</button></div><div class="ErrContent"><ul></ul></div></div>‘;155 $(‘body‘).append(div);156 }157 div = $(‘div.Top_Error ul‘);158 var p = ‘<p>‘ + DateFormat(Date(),2) + ‘</p>‘;159 p += ‘<p>‘ + sError + ‘</p>‘;160 div.append(‘<li>‘ + p + ‘</li>‘)161 console.log($(‘.Top_Error .toggle‘));162 }163 //获取当前日期164 var DateFormat = function (date,itype) {165 if (!(date instanceof Date)) {166 date = date.replace(/-/g, "/");167 date = new Date(date);168 }169 var month = date.getMonth() + 1;170 var year = date.getFullYear();171 var day = date.getDate();172 var Hour = date.getHours();173 var second = date.getSeconds();174 var minute = date.getMinutes();175 var NewDate="";176 177 if (month < 10) {178 month = "0" + month;179 }180 if (day < 10) {181 day = "0" + day;182 }183 NewDate = year + "-" + month + "-" + day;184 if(itype == 2){185 NewDate +=":" + Hour +":" + second +":" + minute;186 }187 return NewDate;188 }189 //全局错误捕获190 window.onerror = function (sMsg, sUrl, sLine) {191 var sContent = "<p>信息：" + sMsg + "</p>" + "<p>网页：" + sUrl + "</p>" + "<p>行：" + sLine + "</p>";192 alert(sContent);193 setError(sContent);194 return true;195 }196 </script>197 </body>198 </html>
运行截图：
CSS中字体尺寸总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。