[英]How do i check the load of an external font
I have a very strange problem and I'm not even sure if its the right angle but here comes the setup:我有一个非常奇怪的问题,我什至不确定它的角度是否正确,但设置如下:
link to a google font in the head;链接到头部的谷歌字体;
onload: function x()
to render the font in a canvas; onload: function x()
在 canvas 中渲染字体;
onclick: x();
since the onload
renders the text in a standard font and the onclick
execution of the same function work perfectly, I'm thinking the font is not fully loaded on the first execution.由于
onload
以标准字体呈现文本,并且onclick
执行相同的 function 工作完美,我认为字体在第一次执行时没有完全加载。 so i was wondering if there was a way to check the loading progress of an external font.所以我想知道是否有办法检查外部字体的加载进度。
Have you looked at the Google Fonts API, particularly the section 'Acting on events' ?您是否看过 Google Fonts API,尤其是“处理事件”部分?
WebFontConfig = {
google: {
families: [ 'Tangerine', 'Cantarell' ]
},
typekit: {
id: 'myKitId'
},
loading: function() {
// do something
},
fontloading: function(fontFamily, fontDescription) {
// do something
},
fontactive: function(fontFamily, fontDescription) {
// do something
},
fontinactive: function(fontFamily, fontDescription) {
// do something
},
active: function() {
// do something
},
inactive: function() {
// do something
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.