我使用指南针font-face混入与沿inline-font-files和font-files ，以创建沿着该线东西新防弹@字体面对面语法使用数据URI的WOFF，TTF和OTF文件。
我使用了相对网址，EOT（由于缺乏数据URI支持IE）和SVG文件，（由于#FontName哈希我猜）。 该EOT文件不成问题，因为对于一个参数，但由于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规则使用不同的权重和样式相同的系列名称相同的帐户有效的CSS？ 如果是这样的话，将它的工作就像上面的例子CSS一样好（似乎）？ 而且，当然，有没有罗盘/上海社会科学院完成的更好的方法吗？
对于那些有兴趣，在问题中提到的解决方法似乎工作得很好。 这可能是从数据URI的@ font-face规则的EOT文件属性移动到使用标准的一个好主意url() 它有时会出现数据：生成的URL的太长，它打破了整个的@ font-face规则。 此外，还要确保数据URI规则最后加载，因为火狐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);
更新。 我实际上可以使用来自波旁混入现场一个伟大的小混入：
// Bourbon Mixin for top notch webfont support: https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_font-face.scss
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) {
@font-face {
font-family: $font-family;
src: url('#{$file-path}.eot');
src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
url('#{$file-path}.woff') format('woff'),
url('#{$file-path}.ttf') format('truetype'),
url('#{$file-path}.svg##{$font-family}') format('svg');
font-weight: $weight;
font-style: $style;
}
}
// Bourbon Mixin webfont setup: http://thoughtbot.com/bourbon/#font-face
@include font-face(ProximaNova, 'fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont');
@include font-face(ProximaNova, 'fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont', bold);
@include font-face(ProximaNova, 'fonts/proximanova_semibolditalic_macroman/ProximaNova-SboldIt-webfont', normal, italic);
这混入非常适合在关于数据URI我的需求：■对于一些格式和其他的HTTP负载：
@mixin fontspring-font-face($family, $file, $svg_hash: $file, $weight: false, $style: false) {
@font-face {
font-family: quote($family);
src: font-files("#{$file}.eot");
src: font-files("#{$file}.eot?#iefix") format('eot'), inline-font-files("#{$file}.woff", woff, "#{$file}.ttf", truetype), font-files("#{$file}.svg##{$svg_hash}") format('svg');
@if $weight {
font-weight: $weight;
}
@if $style {
font-style: $style;
}
}
}
编辑 ：我也许应该补充的是，产生的CSS在IE打破的趋势。 最有可能由于直列字体文件是到大，导致一个无效的包含的文件url(data:)值依次出现使整个src属性无效。 它的出现将数据保持URI版本在一个单独的CSS指令是最好的解决方案。
