Question

使用webfont loader（repo here）定义custom字体时，我们基本上定义了加载的系列和相关的网址：

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

（修复可以是为每个字体权重使用多个名称，但这不是我在这里搜索的解决方案）

Answer 1

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

您可以像以下一样使用它：

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

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

使用webfont加载器加载多个权重自定义字体

1 个答案: