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

jQuery height() for an element containing a custom-font text seems inconsistent

本文关键字：不一致 height jQuery 自定义 字体 文本 元素 包含      更新时间：2023-09-26

我们有一个单独的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()事件。

相关文章：