我正在设计一个网站的布局。但我注意到 font-size 不能正常工作。我在 div 中写了一个单词“JETRO”。 div 的高度为 80px，字体大小为 40px。我使用“line-height:80px”从上到下对齐单词 middle。但它不能正常工作。它从顶部占用 25px，从底部占用 20px，字体大小实际上显示 35px。这里有什么问题？
我的 html 代码:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>PSD to HTML</title>
<link rel="stylesheet" type="text/css" href="style-blog.css" media="all" />
</head>
<body>
<header>
<div id="leftRuler">
</div>
<div id="headerContent">
<div id="logo">
JETRO
</div>
<div id="menu">
MENU
</div>
</div>
<div id="rightRuler">
</div>
</header>
</body>
</html>
我的 CSS 代码是:
body{
margin: 0;
padding: 0;
font-family: bebas;
}
header{
width: 100%;
height: 80px;
background: #b9b9b9;
background-color:#ffff99;
}
#leftRuler{
width: 15%;
height: 80px;
float: left;
}
#headerContent{
width: 70%;
height: 80px;
float: left;
background: #99FFFF;
line-height: 80px;
}
#rightRuler{
width: 15%;
right: 80px;
float: left;
}
#logo{
height: 80px;
float: left;
font-size: 40px;
display: block;
}
#menu{
float: right;
}
最佳答案
字体大小不是以像素为单位的字符高度。
不直接使用以像素为单位的字体大小，它被转换为以磅为单位的字体大小，并用于实际的文本渲染。
以磅为单位的字体大小甚至不对应于字体的精确测量值，而是对应于使字体在使用相同磅值时看起来与其他字体大小相似的大小。对于 Bebas 字体，字体作者显然已经决定该字体应显示得比常规字体小一些，可能是为了补偿字体的外观。
因此，您不能期望文本的像素大小与您指定的完全一样。不同浏览器的翻译和舍入也略有不同，因此您甚至不能期望浏览器之间的结果完全相同。
甚至系统字体渲染设置和连接到计算机的屏幕等因素也可能影响结果，因此您甚至不能期望即使在同一台计算机上的同一浏览器中，结果也会保持完全相同。
基本上，试图在浏览器中准确控制文本呈现是徒劳的。您只需要尝试理解字体作者的意图，并始终考虑到文本呈现中存在一些变化。
您可以根据您使用的字体调整大小和位置，但您仍应牢记如果访问者无法访问该字体(或加载失败)会发生什么情况，以便文本以不同的字体显示。
关于html - 字体大小不能正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32680924/