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

Question

custom使用webfont加载器定义字体(这里是repo)时,我们基本上定义了加载的族和相关的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加载器有多个权重(有点像他们的谷歌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'变体.