使用Compass中的数据URI的新Bulletproof @ font-face语法

Question

我使用指南针font-face混入伴随着inline-font-files和font-files以创建沿着该线东西新防弹@字体面对面语法使用数据URI的WOFF,TTF和OTF文件.

我使用相对URL eot(由于缺乏对数据URI的IE支持)和svg文件,(由于#FontName哈希我猜).eot文件没有任何问题,因为有一个参数,但因为font-face在Compass中处理svg与其他格式没有区别,我根本无法使用inline-font-files包含字体数据,因为这样也会使svg版本内联.

有没有办法让font-face回报如下:

@font-face {
    font-family: 'PTSans';
    src: url('pts55fwebfont.eot');
    src: url('pts55fwebfont.eot?#iefix') format('embedded-opentype'),
         url('data:WOFF_DATA') format('woff'),
         url('data:TTF_DATA') format('truetype'),
         url('pts55fwebfont.svg#PTSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

问题是我无法弄清楚如何使woff,otf和ttf版本使用数据URI,同时仍允许svg版本使用标准URL.我想出的最好的是:

@include font-face('PTSans', inline-font-files('ptsans/pts55fwebfont.woff', woff, 'ptsans/pts55fwebfont.ttf', truetype), 'ptsans/pts55fwebfont.eot', normal, normal);
@include font-face('PTSans', font-files('ptsans/pts55fwebfont.svg#PTSansRegular'), $weight: normal, $style: normal);

这会将svg打破成自己的@ font-face.在同一个帐户上有效的CSS是否可以使用不同的权重和样式创建具有相同系列名称的多个@ font-face规则？如果是这种情况,它的效果是否与上面的示例CSS一样好(看起来如此)？当然,在Compass/sass中有更好的方法吗？

Answer 1

对于那些感兴趣的人来说,问题中提到的解决方法似乎运作得很好.将eot文件属性从数据URI @ font-face规则移动到使用标准的规则可能是个好主意url().有时候数据显示:生成的URL太长,会破坏整个@ font-face规则.此外,请确保最后加载数据URI规则,因为Firefox 5及更高版似乎只加载遇到的最后一个规则.因此,保持在最后一条规则的内嵌字体(WOFF,TTF,OTF)和链接的字体(SVG,EOT)在第一,就像这样:

@include font-face('PTSans', font-files('ptsans/pts55fwebfont.svg#PTSansRegular') 'ptsans/pts55fwebfont.eot', normal, normal);
@include font-face('PTSans', inline-font-files('ptsans/pts55fwebfont.woff', woff, 'ptsans/pts55fwebfont.ttf', truetype), $weight: normal, $style: normal);