Google/Typekit Webfont-Loader does not detect non-

问题:

I'm using the Google webfont loader, but I can't get the fontactive callback to work. The font is rendering on the page, but for some reason the callback isn't firing. (Instead it waits for 5 seconds and then the fontinactive callback fires.) I suspect the problem is in how I'm declaring the two variables to the function.

Edit: The problem may have to do with the font, not how I'm declaring the variable. The font-loader sucessfully detects when the "STIXGeneral" font family loads, which contains regular letter characters.

Documentation of the fontactive callback is here. I haven't been able to find any examples of using the fontactive callback.

I've posted a copy of my code below.

From Javascript:

WebFont.load({
    custom: {
        families: [ 'STIXSizeOneSym' ],
        urls: ['resources/stix-fonts/STIX-fonts.css']
    },
    fontactive: function(stixsizeonesym, n4) { alert("1") },
    fontinactive: function(stixsizeonesym, n4) { alert("2") },
    inactive: function() { alert("10") }
});

From STIX-fonts.css:

@font-face {
    font-family: 'STIXSizeOneSym';
    src: url('STIXSizOneSymBol-webfont.eot');
    src: url('STIXSizOneSymBol-webfont.eot?#iefix') format('embedded-opentype'),
          url('STIXSizOneSymBol.otf') format('opentype'),
          url('STIXSizOneSymBol-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    }

回答1:

I'm one of the developers of the webfontloader. We are currently using an ASCII string to detect whether or not a font has loaded. So if your font does not include the characters "BESbswy" the webfontloader won't be able to detect it. We're working on adding support for configurable test strings (so you can include some characters from the Unicode range your font supports.) I've opened an issue for this on the webfontloader repository (https://github.com/typekit/webfontloader/issues/104).

As a temporary solution you can compile your own version of the webfontloader that adds characters from your font to the test string. Let me know if you need help with that.

回答2:

I try to use the loader on a Chinese Font "cwTeXHei" downloaded from Google Early Access.

I spent an afternoon and finally make the fontactive works using the follow codes:

WebFontConfig = {
  custom: {
    families: ['ChineseCustomFont'],
    testStrings: {
      'ChineseCustomFont': '\uE003\uE005'
    },
  },
  timeout: 8000
};
(function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1.5.3/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

Points to noted:

1. Use webfont loader >1.5.0 for support of "testStrings"
2. Use '\uE003\uE005' as "testStrings", I tried '\u9ED1' but not works and I haven't figure out why
3. change timeout since chinese font files are large, default is 5000

Hope it helps someone too!

回答3:

Have the same prob and did not find any solution yet. It affects only a few fonts, i.e. Bree, or Playfair. My suspicion is that it has something to do with webkit progressively downloading fonts. It seems "fontinactive" is fired immediately. I ended up with some complicated Javascript stuff, checking the dimensions of a hidden container in an interval :/