Question

我正在使用指南针＆＃39; font-face与inline-font-files和font-files混合，以便使用The New Bulletproof @Font-Face Syntax为woff，ttf和otf文件创建Data URIs行的内容。< / p>

我使用相对URL进行eot（由于缺少对数据URI的IE支持）和svg文件，（由于#FontName哈希，我猜）。 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。在同一个帐户上有效的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);

Answer 2

更新。我实际上使用了Bourbon mixin网站上的一个很棒的mixin：

// 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);

Answer 3

这个mixin非常适合我对数据URI的需求：s用于某些格式和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中有突破的趋势。最有可能的原因是inline-font-files包含的文件很大，导致url(data:)值无效，而这似乎会导致整个src属性无效。似乎将数据URI版本保存在单独的css指令中是最佳解决方案。

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

3 个答案: