Question

我有一个HTML元素：带有一些CSS的textarea

<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;浮点数对于像素是没有意义的，只能放置浏览器下来。

但是，您不必担心，因为您提供的所有数字实际上都映射到10px字体大小。如果您需要识别代码中的实际字体大小以便对其执行某些操作，则可以对数字进行舍入：

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

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

1 个答案: