9

我将 compass 的font-facemixin 与inline-font-filesand一起使用font-files，以便使用 woff、ttf 和 otf 文件的数据 URI 创建符合The New Bulletproof @Font-Face Syntax的内容。

我将相对 URL 用于 eot（由于 IE 不支持数据 URI）和 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。我可以使用不同的权重和样式创建多个具有相同姓氏的@font-face 规则的同一帐户上的有效 CSS 是否有效？如果是这种情况，它会像上面的示例 CSS 一样好用吗（看起来）？而且，当然，有没有更好的方法在 Compass/sass 中实现这一点？

4

3 回答 3

5

对于那些感兴趣的人，问题中提到的解决方法似乎效果很好。将 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);
于 2012-05-22T11:11:09.870 回答
4

更新。我确实使用了来自 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);
于 2012-06-19T02:13:33.273 回答
0

对于某些格式的数据 URI:s 和其他格式的 http 加载，这个 mixin 非常适合我的需求：

@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 指令中似乎是最好的解决方案。

于 2012-06-19T11:40:24.923 回答