Nuovo Bulletproof @ sintassi font-face utilizzando dati URI in Compass

Question

Sto usando la bussola font-face mixin insieme al inline-font-files e font-files al fine di creare qualcosa lungo le linee del The New Bulletproof @Font-Face Syntax utilizzando Data URIs per WOFF, TTF e file organizzato di negoziazione.

Uso URL relativi per eot (a causa della mancanza del supporto IE per l'URI dei dati) e per i file svg, (a causa dell'hash #FontName credo). Il file eot non pone alcun problema poiché esiste un parametro per questo, ma poiché font-face in Compass tratta svg non diverso dagli altri formati, non posso semplicemente usare inline-font-files per includere i dati dei font, poiché ciò renderebbe anche la versione svg in linea.

C'è un modo per fare font-face ritorno qualcosa di simile al seguito:

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

} 

Il fatto è che non riesco a capire come fare le versioni WOFF, OTF e TTF utilizzano l'URI dati, pur consentendo la svg versione per utilizzare un URL standard. Il migliore che ho venire in mente è questa:

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

che romperà la svg nella propria @ font-face. È quel CSS valido sullo stesso account che posso creare più regole @ font-face con lo stesso nome di famiglia usando pesi e stili diversi? Se questo è il caso, funzionerà altrettanto bene come il CSS di esempio sopra (sembra)? E, naturalmente, c'è un modo migliore per farlo in Compass/sass?

Answer 1

Per chi è interessato, la soluzione indicata nella domanda sembra funzionare piuttosto bene. Probabilmente è una buona idea spostare l'attributo file EOT dall'URI dati @ regola font-face a quello usando uno standard url(). A volte appaiono i dati: gli URL generati sono troppo lunghi, il che interrompe l'intera regola @ font-face. Inoltre, assicurati che la regola URI dei dati sia caricata per ultima, dato che Firefox 5 e versioni successive caricano solo l'ultima regola rilevata. Quindi, mantenere i font in linea (WOFF, TTF, OTF) in ultima regola ed i caratteri legati (SVG, EOT) nel primo, in questo modo:

@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

Update. Ho acutally usato un piccolo grande mixin dal sito borbonico 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

Questo mixin praticamente adatta alle mie esigenze in materia di dati URI: s per alcuni formati e http carico degli altri:

@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: Probabilmente dovrei aggiungere che il CSS generato ha la tendenza a infrangere IE. Molto probabilmente a causa del fatto che i file inclusi dai file di carattere inline sono troppo grandi, risultando in un valore non valido url(data:) che a sua volta sembra non rendere valida l'intera proprietà src. Sembra che mantenere le versioni di URI dei dati in una direttiva CSS separata sia la soluzione migliore.