2

当使用webfont 加载器（这里的 repocustom ）定义字体时，我们基本上定义了加载的系列和相关的 URL：

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

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

@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 界面）？

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

4

1 回答 1

5

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

你可以像这样使用它：

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

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

于 2013-04-01T07:14:24.337 回答