我有一个特定的 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 上放大或缩小时,字体大小似乎发生了变化。
最佳答案
据我所知,这确实是 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);
关于html - 计算的字体大小和 CSS 定义的字体大小之间的字体大小差异?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28023592/