html - 计算的字体大小和 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 的开发人员面板(样式选项卡)检查文本区域时，它显示

#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 上放大或缩小时，字体大小似乎发生了变化。

Answer 1

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

首先，如果以像素为单位设置字体大小，则应仅使用整数，即 font-size: 10px; 而不是 font-size: 10.0px; float 对像素没有意义，只会拖浏览器。

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

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