我们有一个单独的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),结果将是一致的。
这是预期的行为吗?周围有已知的工作吗?
编辑:该字体可从font Squirrel下载。
这是因为$.ready
中没有加载自定义字体。您需要改为侦听$(window).load()
事件。