stylus.url() base64 编码 woff2 字体答案

【问题标题】：stylus.url() base64 encodes woff2 fontstylus.url() base64 编码 woff2 字体
【发布时间】：2015-05-21 08:21:37
【问题描述】：

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

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

字体样式：

@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');
}

【问题讨论】：

标签： css base64 stylus woff woff2

【解决方案1】：

我发现没有paths选项不会有效果

stylus(stylus_str)
    .use(autoprefixer())
    .define('url', stylus.url({
        limit: 30000,
        mimes: {
            '.gif': 'image/gif',
            '.png': 'image/png',
            '.jpg': 'image/jpeg',
            '.jpeg': 'image/jpeg',
            '.svg': 'image/svg+xml'
        },
        paths: [dirname(file_path)]
    }))
    .render((err, output)=>{
        console.log(output.yellow)
    })

【讨论】：

【解决方案2】：

通读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){

    });

【讨论】：