Question

我正在设计一个网站布局。但我注意到font-size无法正常工作。我在div中写了一个单词“JETRO”。 div的高度为80px，字体大小为40px。我使用“line-height：80px”将单词mid从上到下对齐。但它不能正常工作。它从顶部需要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; 
}

Answer 1

字体大小不是字符的高度（以像素为单位）。

字体大小（以像素为单位）不是直接使用，而是以点数转换为字体大小，并用于实际文本呈现。

以磅为单位的字体大小甚至不对应于字体的精确测量值，而是与使用相同磅值时字体看起来与其他字体大小相似的大小。使用字体Bebas，字体作者显然已经确定字体应该显示为比常规字体小一些，可能是为了补偿字体的外观。

因此，您不能指望文本是您指定的确切像素大小。不同的浏览器也会进行不同的翻译和舍入，因此您甚至不能期望浏览器之间的结果完全相同。

即使是系统字体渲染设置和连接到计算机的屏幕等因素也可能会影响结果，因此即使在同一台计算机上的同一浏览器中，您甚至也不能期望结果保持完全相同。 / p>

基本上尝试在浏览器中完全控制文本渲染是徒劳的。您只需要尝试理解字体作者的内涵，并始终考虑文本呈现中存在一些变化。

您可以根据您使用的字体调整大小和位置，但是您仍然应该记住，如果访问者无法访问该字体（或者无法加载），将会发生什么文本以不同的字体显示。

font-size无法正常工作

1 个答案: