Question

我使用Stylus编写CSS，并使用stylus.url()方法对所有图像进行base64编码。我的问题是手写笔也会编码其中一种字体。它只是一种被编码的woff2字体。所有其他内容都保留为URL。

使用stylus.url()方法时，如何忽略字体文件或以其他方式阻止其进行base64编码。

font.styl：

@font-face {
    font-family: 'GillSansMTStd';
    src: url('../fonts/2D770A_6_0.eot');
    src: local('☺︎'),
         url('../fonts/2D770A_6_0.woff2') format('woff2'),
         url('../fonts/2D770A_6_0.woff') format('woff'),
         url('../fonts/2D770A_6_0.ttf')  format('truetype');
}

的main.css：

@font-face {
    font-family: 'GillSansMTStd';
    src: url("../fonts/2D770A_6_0.eot");
    src: local('☺︎'),
         url("data:application/font-woff2;base64,d09GMgABA[...]") format('woff2'),
         url('../fonts/2D770A_6_0.woff') format('woff'),
         url('../fonts/2D770A_6_0.ttf')  format('truetype');
}

Answer 1

阅读stylus.url()的源代码，我找到了mimes选项。我没有在任何地方找到记录。我可以通过设置该选项来设置我想要base64编码的mime类型：

stylus(str)
    .set('filename', __dirname + '/css/test.styl')
    .define('url', stylus.url({
        mimes: {
            '.gif': 'image/gif',
            '.png': 'image/png',
            '.jpg': 'image/jpeg',
            '.jpeg': 'image/jpeg',
            '.svg': 'image/svg+xml'
        }
    }))
    .render(function(err, css){

    });

stylus.url（）base64编码woff2字体

1 个答案: