如何让fontello玩Meteor

Question

我正在尝试将我当前的项目移植到Meteor，它包含标准的fontello文件结构：

css
    fontello.css
    ...
font
    fontello.eot
    fontello.svg
    fontello.ttf
    fontello.woff

我已经修改了fontello.css路径，使其指向Meteor使用的'public‘文件夹：

@font-face {
  font-family: 'fontello';
  src: url('/font/fontello.eot?35453292');
  src: url('/font/fontello.eot?35453292#iefix') format('embedded-opentype'),
       url('/font/fontello.woff?35453292') format('woff'),
       url('/font/fontello.ttf?35453292') format('truetype'),
       url('/font/fontello.svg?35453292#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

因此，我已经将上面提到的'font‘文件夹移到了上述'public’文件夹中。

此外，我还创建了一个新的Meteor包，其中package.js文件包含：

Package.onUse(function(api) {
    api.versionsFrom('1.0.3.1');
    api.addFiles('my-fontello.js'); 
    api.addFiles('font/fontello.eot', "client");
    api.addFiles('font/fontello.svg', "client");
    api.addFiles('font/fontello.ttf', "client");
    api.addFiles('font/fontello.woff', "client");
    api.addFiles('css/fontello.css', "client");
    api.addFiles('css/animation.css', "client");
});

我没有看到显示任何字体图标-有什么想法吗？

Answer 1

当你把你的文件放在public中时，从根文件夹访问文件就足够了(参见下面的代码)，并且指向你的文件的指针有些错误，因为你把#和?放在url中，而url中本不应该有这样的东西。

@font-face {
  font-family: 'fontello';
  src: url(/font/fontello.eot);
  src: url(/font/fontello.eot) format('embedded-opentype'),
       url(/font/fontello.woff) format('woff'),
       url(/font/fontello.ttf) format('truetype'),
       url(/font/fontello.svg) format('svg');
  font-weight: normal;
  font-style: normal;
}

要在包中使用它，需要从public启动path，如下所示

Package.onUse(function(api) {
    api.versionsFrom('1.0.3.1');
    api.addFiles('tidee-fontello.js');  // put the location from root directory
    api.addFiles('public/font/fontello.eot', "client");
    api.addFiles('public/font/fontello.svg', "client");
    api.addFiles('public/font/fontello.ttf', "client");
    api.addFiles('public/font/fontello.woff', "client");
    api.addFiles('public/css/fontello.css', "client");
    api.addFiles('public/css/animation.css', "client");
});

希望这能有所帮助

Answer 2

我有一个类似的设置

client
  stylesheets
    fontello-social.css
public
  fonts
    fontello-social.eot
    fontello-social.svg
    fontello-social.ttf
    fontello-social.woff

我根本没有使用包文件。

在fontello-social.css中，这4个文件的url路径的形式为/fonts/filename，因为"public“映射到"/”

Answer 3

已修复：

1)虽然我已经创建了我的包，但实际上我还没有将它添加到我的应用程序中。因此我运行了命令'sudo meteor add my-fontello‘。

2)不需要将任何fontello资产移动到公共文件夹。相反，fontello.css文件被更新为：

@font-face {
    font-family: 'fontello';
    src: url('../font/fontello.eot?35453292');
    src: url('../font/fontello.eot?35453292#iefix') format('embedded-opentype'),
         url('../font/fontello.woff?35453292') format('woff'),
         url('../font/fontello.ttf?35453292') format('truetype'),
         url('../font/fontello.svg?35453292#fontello') format('svg');
         font-weight: normal;
         font-style: normal;
}

...and package.js文件已更新为：

Package.onUse(function(api) {
    api.versionsFrom('1.0.3.1');
    api.addFiles('my-fontello.js'); 
    api.addFiles('font/fontello.eot', "client");
    api.addFiles('font/fontello.svg', "client");
    api.addFiles('font/fontello.ttf', "client");
    api.addFiles('font/fontello.woff', "client");
    api.addFiles('css/fontello.css', "client");
    api.addFiles('css/animation.css', "client");
});

值得一提的是，为了让Meteor接受这个包中CSS文件所做的更改，我需要重新启动我的Meteor应用程序。