使用 webfont 加载器加载多个重量自定义字体答案

【问题标题】：Load multiple weight custom font with the webfont loader使用 webfont 加载器加载多个重量自定义字体
【发布时间】：2012-12-19 02:31:39
【问题描述】：

当使用webfont loader (repo here) 定义custom 字体时，我们基本上定义了加载的系列和相关的URL：

WebFont.load({
    custom: {
        families : [ "My font" ],
        urls     : [ "assets/css/fonts.css" ]
    }
});

但是，加载器似乎没有检测到在css 文件中为同一字体定义的多个weight：

@font-face {
  font-family: 'My font';
  src: url("../fonts/my-font.eot");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'My font';
  src: url("../fonts/my-font.eot");
  font-weight: bold;
  font-style: normal;
}

因此，加载器在加载第一个字体时触发active 事件。如果我们检查只会触发一次的fontactive 事件，就可以确认这一点：

WebFont.load({
    fontactive: function( fontname, fontdescription ) {
        console.log( fontname, fontdescription );
        // Only trigger once `My font, n4`
    }
});

那么，有没有办法告诉 webfont 加载器有多个权重（有点像他们的 google webfonts 界面）？

（解决方法是为每个字体粗细使用多个名称，但这不是我在这里寻找的解决方案）

【问题讨论】：

你确定 fontactive 事件不应该只触发一次，当 both 权重都被加载时？在我的测试中，字体的常规和粗体都加载了，加载回调只进行了一次。

标签： font-face webfonts google-webfonts

【解决方案1】：

我是 webfontloader 的开发者之一。您是正确的，自定义模块不支持加载多个变体。幸运的是，我们最近添加了对此的支持，因此如果您升级您的 webfontloader 版本（或使用 Google CDN 上的版本），您将获得对它的支持。

你可以像这样使用它：

WebFont.load({
  custom: {
    families: ['My Font', 'My Other Font:n4,i4,n7'],
    urls: ['/fonts.css']
  }
});

加载“我的其他字体”的“n4”、“i4”和“n7”变体。

【讨论】：