使用 jQuery 知道 @font-face 字体何时加载?
我正在使用 @font-face,但我讨厌 Firefox 显示默认字体,等待加载 @font-face 字体,然后替换它。所以整个页面都会闪烁新字体。
Webkit 浏览器在加载字体之前不会显示文本,而且它的外观更加清晰。
所以,我想知道 jQuery 是否可以帮助我知道页面上的所有数据(包括 @font-face 文件)何时加载,以便我可以显示我的文本?有没有一个 jQuery 方法可以告诉我什么时候所有内容都已加载?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
我使用这个函数 - 在 Safari、Chrome、Firefox、Opera、IE7、IE8、IE9 中测试:
使用它如下:
I use this function - tested in Safari, Chrome, Firefox, Opera, IE7, IE8, IE9:
Use it like:
好吧,这很容易。基本上我只是将文本设置为:
然后添加:
然后确保以下内容也在我的 css 文件中:
Ok, it was pretty easy. Basically I just set my text to:
and then add:
Then make sure that the following is also in my css file:
您不应该使用
$(window).bind('load')
- 这将等待整个页面加载(这可能是您想要的),而不仅仅是字体。如果你想控制 @font-faces 的加载过程,请使用由 Google 和 Typekit 开发的 WebFont Loader。您可以将它与 Google Font API、typekit 和您自己的网络字体提供商(您自己)一起使用(尽管我自己从未尝试过,因为我是 Typekit 用户。
请在此处阅读相关内容:http://code.google.com/apis/webfonts/docs/webfont_loader.html 和此处:http://blog.typekit.com/2010/05/19/typekit-and-google/
You should't use
$(window).bind('load')
- that will wait for the whole page to load (which maybe is what you want), and not just the font. If you want to control the loading process of @font-faces use WebFont Loader, developed by Google and Typekit.You can use it with Google Font API, typekit and your own webfont provider - you (although I never tried it myself as I'm a Typekit User.
Read about it here: http://code.google.com/apis/webfonts/docs/webfont_loader.html and here: http://blog.typekit.com/2010/05/19/typekit-and-google/
我使用 google web 字体(Crete Round Regular 和 Open Sans Regular with Bold)
您可以使用 this :
或 this :
请注意,在第一个选项中我使用了 jQuery Deferred Object。
I use google web fonts (Crete Round Regular and Open Sans Regular with Bold)
You can use either this :
or this :
Note that in the first option i used jQuery Deferred Object.
也许..
创建一个 z-index: -10 div 并用大量文本填充它(使用“正常”字体)。在 document.ready() 或其他事件中:
Perhaps..
Create a z-index: -10 div and fill it with a lot of text (with a 'normal' font). At document.ready() or another event:
我遇到了同样的问题。不知何故,我无法让 Google webfont 加载器使用 ttf 字体(尤其是中文字体)或在加载字体时发送 jquery 响应。
所以我想出了一个更基本的解决方案,在页面加载后动态更改字体时很有用。它显示字体何时正确加载。
首先,我创建一个虚拟 div,然后用“abcd”填充它,然后给它一个字体大小 40,记录 div 的宽度。当通过按钮或任何东西调用“更改字体”事件时,它应该跟踪虚拟 div 宽度的变化。宽度变化就代表字体发生了变化。
HTML 代码
JQuery
I got the same problem. And somehow i can't get Google webfont loader to work with ttf font (especially chinese fonts) or send a jquery response when font is loaded.
So I came up with this a more basic solution, useful when changing font dynamically after page is loaded. it shows when the font face is properly loaded.
First i create a dummy div and then fill it with 'abcd' and then give it a font size 40, record the width of the div. When the 'change font' event is invoked via a button or anything, it should track the dummy div width changes. Width changes would represent that the font has change.
HTML CODE
JQuery
我遇到了同样的问题,我正在尝试使用readyfunction()、bind()函数和我发现的其他一些函数,但它们都不起作用。最后我找到了一种解决方案,只需在加载动画之前应用一个延迟...就像这样:
我知道这不是最好的解决方案,所以有人可以告诉我一个更好的解决方案吗?
谢谢!
I've got the same problem and I'm trying with the readyfunction(), the bind() function and some others that I found, but none of them works. Finaly I found one solution, just aplying one delay before the animation is loaded... like this:
I know this is not the best solution, so can someone tell me one better??
Thanks!