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

Question

我正在使用 compass 的 font-face mixin 以及 inline-font-files 和 font-files 来创建一些东西的 The New Bulletproof @Font-Face Syntax使用 Data URIs用于 woff、ttf 和 otf 文件。

我对 eot(由于 IE 不支持数据 URI)和 svg 文件(我猜是由于#FontName 散列)使用相对 URL。 eot 文件没有问题，因为有一个参数，但是因为 Compass 中的 font-face 对待 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。我可以使用不同的粗细和样式创建多个具有相同姓氏的@font-face 规则的同一帐户上的有效 CSS 吗？如果是这样的话，它会像上面的示例 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);