javascript – 在字体文件加载后计算容器的高度

使用@ font-face使用非标准字体设置Web样式需要浏览器首先下载字体文件(就像它下载其他资产,例如CSS,JavaScripts等),然后再进行真正的再现.

当jQuery .height()尝试计算其容器的高度时,这会在Chrome(v16.0.912.63)和Safari(v5.1.2)上引入问题.计算的高度在字体完成加载之前.请考虑以下内容(查看：working example)：

/* CSS */
h1 {
  font-family: MuseoSlab-500, "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* MuseoSlab-500 is defined using @font-face. */
}

/* HTML */
<div id="box">
  <h1>This is my long header. What do you think? How about now?</h1>
</div>

/* JavaScript */
$(function() {
  alert("The height of the above <div> = " + $('div#box').height());
});

但是,Firefox(v8.0.1)能够计算正确的高度,即在使用非标准字体呈现文本之后.

问题是,在进行计算之前,是否有一种实用的方法可以告诉Chrome或理想情况下所有浏览器等待文本使用预期字体呈现.

使用$(window).load()有效,但这意味着等待例如所有图像也完成加载;它减慢了很多.

解决方法:

我认为$(window).load()是处理你所说的话的唯一方法.如果您的页面加载速度太慢,可能需要优化图像,甚至在页面加载后加载它们.

标签：jquery,javascript,css3,font-face
来源： https://codeday.me/bug/20190530/1185035.html