下面是我总结的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>
工具-测试字体占用的宽度和高度
运行截图：
时间： 2024-08-15 23:13:35