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

Posted 2023-03-06

【中文标题】在 Compass 中使用数据 URI 的新 Bulletproof @font-face 语法

【英文标题】：New Bulletproof @font-face syntax using Data URIs in Compass

【发布时间】：2012-05-23 22:37:48

【问题描述】：

我正在使用 compass 的 font-face mixin 以及 inline-font-files 和 font-files，以便使用 Data URIs 为 woff、ttf 和 otf 文件创建类似于 The New Bulletproof @Font-Face Syntax 的内容。

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

【参考方案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);

【参考方案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);

【讨论】：

缺少样式/重量和数据 URI:s 字体对吗？但这可能很容易添加。很好的发现！

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