字体大小大于 CSS 中设置的大小答案

【问题标题】：Font size larger than set in CSS字体大小大于 CSS 中设置的大小
【发布时间】：2021-02-08 11:26:49
【问题描述】：

当我将字体大小设置为特定像素高度时，计算出的字体大小是我在 CSS 中设置的大小的 1.333 倍。但是，如果我将字体大小设置为百分比，则会使用正确的大小。这发生在我尝试过的每个浏览器中，包括 Firefox 3.6.28、Firefox 53.0.3（32 位和 64 位）、Internet Exploiter、Safari、Chrome 和 Opera。

以下是问题的精简示例：

<?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">&nbsp;</span>
                    <a href="/TodaysNews.php" class="tocLevel2 tocLink" title="News about The L5 Development Group, space travel, space business, and related issues">Today's&nbsp;News</a>
                </p>
            </li>
        </ul>
    </li>
</ul>
</body></html>

如果我将tocLevel1 和tocLevel2 font-size 值从它们的像素高度更改为 CSS cmets 中显示的百分比值，则页面可以正常工作。

当font-size 值设置为特定高度时，为什么每个浏览器都决定使用比 CSS 中设置的字体大三分之一的字体大小？

【问题讨论】：

注：pt is for print, not the screen.

标签： css fonts

【解决方案1】：

您在字体大小中混合了px（像素）和pt（磅）。 14px 的 120% 将是 16.8px，但您已将单位指定为点，它们不是一回事，而且更大。

我建议坚持使用一个单元，以便相对更容易地进行调整。（或者使用绝对尺寸作为您的基本尺寸，并使用相对尺寸作为其他尺寸。）

【讨论】：

呸！是的，你是对的，这个问题是在我睡觉的时候出现的，当我回到我的办公桌时确认了......
点与像素——这是我在半睡半醒时编码得到的结果