javascript - 包含自定义字体文本的元素的jQuery height（）似乎不一致

我们有一个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。

包含自定义字体文本的元素的jQuery height（）似乎不一致

0 个答案: