流星 + 引导 3 字形不起作用

Meteor + Bootstrap 3 Glyphicons not working

本文关键字：字形 不起作用 引导 流星      更新时间：2023-09-26

我一直在尝试将引导程序 3 与 Meteor 一起使用，但是引导程序有效，但 Glyphicon 不起作用。导入带有图标的文件时，会显示以下错误：

Resource interpreted as Font but transferred with MIME type     text/html:"http://localhost:3000/client/fonts/glyphicons-halflings-regular.woff".

你把这个文件放在了错误的位置。Meteor 应作为单独实体提供的所有文件都应放置在目录中/public。

 

 

当 Meteor 服务器获取路径时，它首先检查 /public 中是否有匹配的文件。如果有，则提供。否则，Meteor 会将自身作为 HTML 文件加载到客户端，然后在所选的客户端路由器中处理路径。

在您的情况下，您尝试访问/client目录中的文件，而不是/public目录中的文件，因此会发生第二种情况。结果，浏览器会获得带有 Meteor 代码的 HTML 文件，它应该在其中接收字体。

为了解决这个问题，将字体移动到像/public/fonts/glyphicons-halflings-regular.woff这样的地方，然后通过/fonts/glyphicons-halflings-regular.woff访问在Bootstrap的CSS中使用的任何地方。

这是我自己的 bootstrap3 包结构，它为我按预期工作：

bootstrap3
|-> dist (bootstrap3 directory containint js/, css/ and fonts/)
|-> bootstrap_override.css (override fonts paths)
|-> package.js (package definition)

bootstrap_override.css

@font-face{
    font-family:'Glyphicons Halflings';
    src:url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.eot');
    src:url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
    url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.woff') format('woff'),
    url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
    url('/packages/bootstrap3/dist/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

包.js

Package.describe({
    summary:"bootstrap 3.0 packaged for Meteor."
});
Package.on_use(function(api){
    api.use(["jquery"],"client");
    //
    api.add_files([
        // bootstrap fonts
        "dist/css/bootstrap.min.css",
        "dist/css/bootstrap-theme.min.css", (optional bootstrap2 lookalike theme)
        // bootstrap javascript
        "dist/js/bootstrap.min.js"
    ],"client");
    api.add_files([
        "dist/fonts/glyphicons-halflings-regular.eot",
        "dist/fonts/glyphicons-halflings-regular.ttf",
        "dist/fonts/glyphicons-halflings-regular.svg",
        "dist/fonts/glyphicons-halflings-regular.woff"
    ],"client",{
        // undocumented hint : do not bundle those files along with with js/html resources
        isAsset:true
    });
    api.add_files([
        // overriding css
        "bootstrap_override.css"
    ],"client");
});

这个包指定字体是特殊的资源，不应该与常规的js/html一起捆绑在客户端上，引用核心开发人员David Glasser的话"它需要未经处理和可单独获取"。（见 https://github.com/meteor/meteor/issues/1357）

bootstrap_override.css 文件是使用我们的包相关绝对路径覆盖 bootstrap 中定义的默认相对路径所必需的.css 个。

您也可以从大气中使用 bootstrap-3 软件包。（https://atmosphere.meteor.com/package/bootstrap-3）

使用 Storm，我钻取到本地> .

meteor 文件夹，>构建>程序> web.browser>包> twbs_bootstrap> dist> 字体来查找字形库，我只是将它们复制到 ''public''fonts。

相关文章：