计算的字体大小和 CSS 定义的字体大小之间的字体大小差异？

Question

我有一个特定的 HTML 元素：一个带有一些 CSS 的文本区域

<textarea id="mytextarea" 
    class="absoluteelement inputtable paddable"
    style="resize:none;top:70.68187%;left:4.705374%;width:90%;height:11.5%;Background-color:transparent;">
</textarea>

还有css：

#mytextarea {
    font-size: 10.0px;
    font-color: #FF000000;
    font-family: arial;
    text-align: left;
}

input,select,textarea {
    border: none;
    background: transparent;
}

.paddable {
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /*FF, IE8*/
}

textarea {
    resize: none;
    overflow:hidden;
}

.absoluteelement {
    position: absolute;
}

现在我的问题是这个。当我尝试

var textarea = document.getElementById("mytextarea");
var style = window.getComputedStyle(textarea);
console.log(style.fontSize);

控制台记录9.85012722015381px。然而，当我使用 Chrome 的开发人员面板（样式选项卡）检查 textarea 时，它会显示

#mytextarea {
    font-size: 10.0px;
    font-color: #FF000000;
    font-family: arial;
    text-align: left;
}

在计算面板中，它会像控制台输出一样显示：

> font-size: 9.85012722015381px;

为什么这两个值之间存在差异？我明确指出字体大小是 10.0px，在我的 css 中的任何地方都找不到数字 9.85...px。

更新：

这似乎只发生在 Chrome 中； Firefox 显示并记录计算出的字体大小为 10.0px

更新 2：

在 Chrome 上放大或缩小时，fontSize 似乎发生了变化。

Answer 1

据我所知，这确实是 Chrome 特有的问题。

首先，如果你以像素为单位设置字体大小，你应该只使用整数，即font-size: 10px;而不是font-size: 10.0px;，浮点数对于像素没有意义，只能关闭浏览器。

但是，您不必担心，因为您提供的所有数字实际上都映射到 10 像素字体大小。如果您需要识别代码中的实际字体大小以便对其进行处理，您可以将数字四舍五入：

var myTextArea = document.getElementById("mytextarea");
var fontSize = window.getComputedStyle(myTextArea).fontSize.replace("px","");
var fontSize = Math.round(fontSize);