字体大小大于CSS中的设置 [英] Font size larger than set in CSS
问题描述
当我将字体大小设置为特定的像素高度时，计算出的字体大小是我在CSS中设置的大小的1.333倍.但是，如果我将字体大小设置为百分比，则使用正确的大小.在我尝试过的每种浏览器中都会发生这种情况，包括Firefox 3.6.28，Firefox 53.0.3(32位和64位)，Internet Exploiter，Safari，Chrome和Opera.
When I set the font size to a specific pixel height, the computed font size is 1.333 times the size I've set in my CSS. However, if I set the font size as a percentage, the correct size is used. This happens in every browser that I've tried, including Firefox 3.6.28, Firefox 53.0.3 (both 32- and 64-bit), Internet Exploiter, Safari, Chrome and Opera.
以下是该问题的一个简化示例:
Here is a whittled-down example of the problem:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>TocMenu Test</title>
<link href="/style/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body
{ background:#000000 url('/graphics/l5-back-eso1213a-2K.jpg') repeat fixed;
color:#ffffe8;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:normal;
}
img
{ border:0;
margin:0;
padding:0;
}
#menuRoot *
{ min-width:0;/* peek-a-boo bug fix for IE7 */
position:relative;/* peek-a-boo bug fix for IE6 */
}
#menuRoot img
{ padding:3px;
}
.tocRoot
{ padding:0;
}
.tocLevel1
{ font-size:16.8pt; /* 120% */
font-weight:bold;
margin-top:9px;
}
.tocLevel2
{ font-size:15.4pt; /* 110% */
font-weight:bold;
margin-top:6px;
}
.tocMenuOpen
{ background:none;
color:#ffff66;
list-style:none;
}
.tocMenu1
{ padding-left:30px;
}
.tocLink, a.tocLink
{ color:#99ff99;
text-decoration:none;
}
.tocBtn, .tocBtnNot
{ display:inline-block;
text-align:left;
vertical-align:text-top;
width:14px;
}
</style>
</head>
<body>
<ul id="menuRoot" class="tocMenuOpen tocRoot">
<li>
<p class="glueDown">
<span class="tocBtn" id="menuHome_bn"><img src="/graphics/imgOpen.gif" alt="menu state indicator" /></span>
<a href="//L5Development.com" class="tocLevel1 tocLink" title="The L5 Development Group - A For-Profit Private Enterprise Space Exploration and Development Program">Home</a>
</p>
<ul id="menuHome" class="tocMenuOpen tocMenu1">
<li>
<p class="glueDown">
<span class="tocBtnNot"> </span>
<a href="/TodaysNews.php" class="tocLevel2 tocLink" title="News about The L5 Development Group, space travel, space business, and related issues">Today's News</a>
</p>
</li>
</ul>
</li>
</ul>
</body></html>
如果我将 tocLevel1 和 tocLevel2 font-size 值从其像素高度更改为百分比值在CSS注释中显示，页面可以正常工作.
If I change the tocLevel1 and tocLevel2 font-size values from their pixel heights to the percentage values shown ih the CSS comments, the page works correctly.
为什么每个浏览器决定将 font-size 值设置为特定高度时使用的字体大小比CSS中设置的字体大小大三分之一?
Why does every browser decide to use a font size one third larger than what is set in the CSS when the font-size value is set to a specific height?
推荐答案
您在字体大小中混合了 px (像素)和 pt (点).14px的120％为16.8 px ，但是您已将单位指定为点，它们不是同一点，而是更大.
You're mixing px (pixels) and pt (points) in your font sizes. 120% of 14px would be 16.8px, but you've specified the units as points, which are not the same thing, and are larger.
我建议您坚持使用一个设备，以便更轻松地进行相对调整.(或使用绝对尺寸作为基准尺寸，并使用相对尺寸作为其他尺寸.)
I'd suggest sticking to one unit to make it easier to adjust things relatively. (Or use an absolute measurement as your base size and use relative ones for everything else.)
这篇关于字体大小大于CSS中的设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
