字体大小无法正常工作答案

【问题标题】：font-size is not working properly字体大小无法正常工作
【发布时间】：2015-12-17 07:25:20
【问题描述】：

我正在设计一个网站的布局。但我注意到 font-size 不能正常工作。我在 div 中写了一个单词“JETRO”。 div 的高度为 80 像素，字体大小为 40 像素。我使用“line-height:80px”将单词中间从上到下对齐。但它不能正常工作。它从顶部需要 25 像素，从底部需要 20 像素，字体大小实际上显示为 35 像素。这里有什么问题？

我的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”。该字体下的所有字母默认大写。
我尝试使用标准字体并且有效.. 这可能意味着您的自定义字体具有其他空间值，将其推得更低.. 将字体设置为 40px 并不意味着字母“J”是40像素
“font-size 实际上显示 35px”是什么意思？
这是一个描述字体及其部分的链接，可以让您了解它们是如何显示的...designmodo.com/typography-basics

标签： html css

【解决方案1】：

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

不直接使用以像素为单位的字体大小，它被转换为以磅为单位的字体大小，用于实际的文本渲染。

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

因此，您不能期望文本是您指定的确切像素大小。此外，不同的浏览器做翻译和舍入有点不同，所以你甚至不能指望浏览器之间的结果完全相同。

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

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

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

【讨论】：