index.ejs（注入后）：

Question

此问题与FontAwesome - Failed to decode downloaded font相同，但问题的原因并不相同。

我有一个node.js应用程序，用于安装bower的依赖项。包括FontAwesome。

当我打开网页时，我收到错误

dash:1 Failed to decode downloaded font: http://pokpok.call-cc.be/lib/font-awesome/fonts/fontawesome-webfont.woff2?v=4.5.0
dash:1 Failed to decode downloaded font: http://pokpok.call-cc.be/lib/font-awesome/fonts/fontawesome-webfont.woff?v=4.5.0
dash:1 Failed to decode downloaded font: http://pokpok.call-cc.be/lib/font-awesome/fonts/fontawesome-webfont.ttf?v=4.5.0

当我检查开发者工具中的链接时，我可以看到正确呈现的字体：

当我尝试导航到浏览器中的URL时，它也会正确下载字体文件。

任何提示？

Ps：实时链接应用here。

index.ejs（注入后）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="icon" type="image/png" href="/img/favicon.png"/>
    <title>Pok Pok</title>

    <!-- inject:js -->
    <script src="/js/ie-emulation-modes-warning.js"></script>
    <script src="/js/ie10-viewport-bug-workaround.js"></script>
    <!-- endinject -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<div class="navbar navbar-fixed-top navbar-inverse">
    <div class="container">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">PokPok</a>
        <!--<div id="navbar" class="collapse navbar-collapse">-->
        <!--<ul class="nav navbar-nav">-->
        <!--<li class="active"><a href="#">Home</a></li>-->
        <!--<li><a href="#about">About</a></li>-->
        <!--<li><a href="#contact">Contact</a></li>-->
        <!--</ul>-->
        <!--</div>&lt;!&ndash;/.nav-collapse &ndash;&gt;-->

    </div><!-- /.container -->
</div><!-- /.navbar -->

<!-- HEADER
=================================-->

<!-- <div class="jumbotron text-center"> -->
<!--     <div class="container"> -->
<!--         <div class="row"> -->
<!--             <div class="col col-lg-12 col-sm-12"> -->
<!--                 <h1>Pok Pok</h1> -->
<!--                 <p>Eggcelent.</p> -->
<!--             </div> -->
<!--         </div> -->
<!--     </div> -->
<!-- </div> -->

<!-- /header container-->

<!-- CONTENT -->
<!-- ================================= -->
<div class="container">

    <!--Live stream-->
    <div class="row">
        <div class="col-md-12">
            <div align="center" class="embed-responsive embed-responsive-16by9">
                <video autoplay loop controls class="embed-responsive-item">
                    <source src="https://call-cc.be/rpi">
                </video>
            </div>
        </div>
    </div>

    <!--Graphs-->
    <div class="row">

        <div class="col-md-6" id="humidity"></div>
        <div class="col-md-6" id="temperature"></div>

        <div class="col-lg-6 col-md-6">
            <div class="panel panel-blue">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-cloud fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge"><%= humid %> %</div>
                            <div>Humidity</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 col-md-6">
            <div class="panel panel-yellow">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <i class="fa fa-sun-o fa-5x"></i>
                        </div>
                        <div class="col-xs-9 text-right">
                            <div class="huge"><%= temp %> ËšC</div>
                            <div>Temperature</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <hr>
    <div class="row">
        <div class="col-md-12">
            Live stream of Ada and Frida. Two hot chicks.
        </div>
    </div>
</div>
<hr>

<!-- /CONTENT ============-->
<!-- bower:css -->
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css" />
<!-- endbower -->

<!-- bower:js -->
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->

<!-- inject:css -->
<link rel="stylesheet" href="/css/style.css">
<!-- endinject -->

<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="/graphs/gengraph.js"></script>
<script>
    genGraph("#humidity", "/push/humidity", "Humidity (%)", "humidity-line");
    genGraph("#temperature", "/push/temperature", "Temperature (ËšC)", "temperature-line");

</script>
</body>

</html>

bower.json

{
  "name": "cost-tracker",
  "description": "",
  "main": "index.js",
  "authors": [
    "Christophe De Troyer <christophe.detroyer@gmail.com>"
  ],
  "license": "ISC",
  "moduleType": [],
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "~3.3.6",
    "font-awesome": "~4.5.0"
  },
  "overrides": {
        "bootstrap": {
            "main" : [
                "dist/js/bootstrap.js",
                "dist/css/bootstrap.min.css",
                "less/bootstrap.less"
            ]
        },
        "font-awesome": {
            "main": [
                "less/font-awesome.less",
                "css/font-awesome.min.css",
                "scss/font-awesome,scss"
            ]

        }
    }    

}

gulpfile.js

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var nodemon = require('gulp-nodemon');
var jscs = require('gulp-jscs');
var jsFiles = ['*.js', 'src/**/*.js'];

gulp.task('style', function () {
    return gulp.src(jsFiles)
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'), {
            verbose: true
        })
        .pipe(jscs());
});
gulp.task('inject', function () {
    var wiredep = require('wiredep').stream;
    var inject = require('gulp-inject');

    var injectSrc = gulp.src(['./public/css/*.css',
        './public/js/*.js'], {read: false});

    var injectOptions = {
        ignorePath: '/public'
    };
    var options = {
        bowerJson: require('./bower.json'),
        directory: './public/lib',
        ignorePath: '../../public',
        addRootSlash: false

    };

    return gulp.src('./src/views/*.ejs')
        .pipe(wiredep(options))
        .pipe(inject(injectSrc, injectOptions))
        .pipe(gulp.dest('./src/views'));
});

gulp.task('serve', ['style', 'inject'], function () {
    var options = {
        script: 'app.js',
        delayTime: 1,
        env: {
            'PORT': 5000,
            'POSTGRES': 'postgres://user:ps@localhost:5432/pokpokdb'
        },
        watch: jsFiles
    };
    return nodemon(options).on('restart', function (ev) {
        console.log('Restarting');
    });
});

FontAwesome - 无法解码字体

index.ejs（注入后）：

bower.json

gulpfile.js

0 个答案: