我们有一个div
这样:
<body>
<div class="styled">
Text
</div>
</body>
我们的风格看起来像:
@font-face {
font-family: 'Liberation Mono'; /*a name to be used later*/
src: url('LiberationMono-Regular.ttf'); /*local URL to font*/
}
.styled {
font-size: 200px;
font-family: "Liberation Mono";
}
现在,如果我们在文档就绪上添加一些Javascript(包括jQuery 2.1.4之后):
<script>
$(document).ready(function() {
console.log($("div.styled").height())
});
</script>
显示的值是控制台 243 ,但是使用开发工具检查div
,实际上 227px 高。
使用浏览器中的默认字体(在我们的示例中为Chrome),结果将保持一致。
这是预期的行为吗? 有没有已知的工作?
编辑:该字体适用于download from Font Squirrel。