New Bulletproof @ font-face-Syntax mit Hilfe von Data-URIs in Compass

Question

Ich bin mit Kompass font-face mixin zusammen mit den inline-font-files und font-files um etwas entlang der Linien der The New Bulletproof @Font-Face Syntax mit Data URIs für woff, ttf und OTF-Dateien zu erstellen.

Ich benutze relative URLs für eot (wegen der fehlenden IE-Unterstützung für Daten-URI) und für Svg-Dateien (aufgrund der #FontName Hash ich denke). Die EOT-Datei stellt kein Problem dar, da es einen Parameter dafür gibt, aber da font-face in Compass Svg nicht anders behandelt als andere Formate, kann ich inline-font-files einfach nicht verwenden, um die Font-Daten einzuschließen, da dies die Svg-Version inline machen würde.

Gibt es eine Möglichkeit font-face Rückkehr etwas wie die unten zu machen:

@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; 

} 

Die Sache ist ich herausfinden kann, wie die woff zu machen, otf und ttf Versionen der Data URI verwenden, während immer noch die svg erlaubt Version, um eine Standard-URL zu verwenden. Die beste, die ich habe, ist dies:

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

Welches wird die Svg in seine eigene @ font-face brechen. Ist dieses gültige CSS für dasselbe Konto gültig, mit dem ich mehrere @ font-face-Regeln mit demselben Familiennamen mit unterschiedlichen Gewichtungen und Stilen erstellen kann? Wenn das der Fall ist, wird es genauso gut funktionieren wie das obige CSS (scheint es)? Und gibt es natürlich einen besseren Weg, dies in Compass/Sass zu erreichen?

Answer 1

Für die Interessenten scheint die in der Frage erwähnte Problemumgehung ziemlich gut zu funktionieren. Es ist wahrscheinlich eine gute Idee, das EOT-Dateiattribut von der Daten-URI @ font-face-Regel in die mit einem Standard url() zu verschieben. Es scheint manchmal, dass die Daten: URLs generiert zu lang sind, was die gesamte @ Font-Face-Regel bricht. Stellen Sie außerdem sicher, dass die Daten-URI-Regel zuletzt geladen wurde, da Firefox 5 und höher nur die zuletzt gefundene Regel zu laden scheint. Daher halten die Inline-Schriftarten (woff, ttf, OTF) in der letzten Regel und die verknüpften Schriftarten (svg, EOT) in der ersten, etwa so:

@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

aktualisieren. Früher habe ich acutally ein großes kleines mixin von der Bourbon mixin Website:

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

Diese mixin ziemlich passt meine Bedürfnisse in Bezug auf Daten URI: s für einige Formate und http Laden anderer:

@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; 
      } 
    } 
} 

EDIT: Ich sollte wahrscheinlich hinzufügen, dass das generierte CSS eine Tendenz hat, in IE zu brechen. Höchstwahrscheinlich aufgrund der zu großen Dateien, die inline-font-files enthalten sind, was zu einem ungültigen url(data:)-Wert führt, der wiederum die gesamte src-Eigenschaft ungültig zu machen scheint. Es scheint, die Daten-URI-Versionen in einer separaten CSS-Direktive zu halten, ist die beste Lösung.