Nueva prueba de balas @ sintaxis font-face utilizando datos URI en compás

Question

estoy usando la brújula font-face mixin junto con el inline-font-files y font-files con el fin de crear algo en la línea de la The New Bulletproof @Font-Face Syntax utilizando Data URIs para woff, TTF y archivos SON.

Utilizo URL relativos para eot (debido a la falta de soporte de IE para el URI de datos) y para archivos svg, (debido al hash #FontName, supongo). El archivo eot no presenta ningún problema ya que hay un parámetro para eso, pero como font-face en Compass no es diferente de otros formatos, simplemente no puedo usar inline-font-files para incluir los datos de fuente, ya que eso también haría que la versión svg fuera en línea.

¿Hay una manera de hacer font-face retorno algo como el siguiente:

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

} 

Lo que pasa es que no puedo encontrar la manera de hacer las versiones WOFF, OTF y ttf utilizan el URI de datos al tiempo que permite el SVG versión para usar una URL estándar. Lo mejor que se me ocurre es esto:

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

Que romperá el svg en su propia @ font-face. ¿Es ese CSS válido en la misma cuenta que puedo crear varias reglas @ font-face con el mismo apellido usando diferentes pesos y estilos? Si ese es el caso, ¿funcionará tan bien como el ejemplo de CSS anterior (parece)? Y, por supuesto, ¿hay una forma mejor de lograr esto en Compass/sass?

Answer 1

Para los interesados, la solución mencionada en la pregunta parece funcionar bastante bien. Probablemente sea una buena idea mover el atributo de archivo eot desde la regla URI @ font-face de datos a la que usa un estándar url(). A veces parece que los datos: las URL generadas son demasiado largas, lo que rompe toda la regla @ font-face. Además, asegúrese de que la regla URI de datos esté cargada al último, ya que Firefox 5 y versiones posteriores parecen cargar solo la última regla encontrada. Por lo tanto, mantener las fuentes en línea (woff, TTF, OTF) en la última regla y las fuentes vinculadas (SVG, EOT) en la primera, así:

@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

actualización. Me acutally utilizado un pequeño gran mixin desde el sitio Bourbon 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

Este mixin prácticamente se adapte a mis necesidades en lo que respecta a los datos URI: s para algunos formatos y http carga de los demás:

@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: Probablemente debería agregar que el CSS generado tiene una tendencia a romper en IE. Lo más probable es debido a que los archivos incluidos en la fuente son demasiado grandes, lo que da como resultado un valor url(data:) no válido que a su vez parece hacer que la propiedad completa src no sea válida. Parece que mantener las versiones de URI de datos en una directiva css por separado es la mejor solución.