css - ttf - font face sass

SASS y @ font-face

Question

Tengo el siguiente CSS, ¿cómo lo describiría en SASS? He intentado compilarlo a la inversa con css2sass y sigo recibiendo errores ... ¿es mi CSS (que funciona ;-))?

@font-face {
  font-family: ''bingo'';
    src: url("bingo.eot");
    src: local(''bingo''),
       url("bingo.svg#bingo") format(''svg''),
       url("bingo.otf") format(''opentype'');
}

Answer 1

En caso de que alguien se estuviera preguntando, probablemente era mi css ...

@font-face
  font-family: "bingo"
  src: url(''bingo.eot'')
  src: local(''bingo'')
  src: url(''bingo.svg#bingo'') format(''svg'')
  src: url(''bingo.otf'') format(''opentype'')

se renderizará como

@font-face {
  font-family: "bingo";
  src: url(''bingo.eot'');
  src: local(''bingo'');
  src: url(''bingo.svg#bingo'') format(''svg'');
  src: url(''bingo.otf'') format(''opentype''); }

que parece estar lo suficientemente cerca ... solo necesita verificar la representación SVG

Answer 2

He estado luchando con esto por un tiempo ahora. La solución de Dycey es correcta, ya que al especificar src varias veces lo mismo en su archivo css. Sin embargo, esto parece romperse en OSX Firefox 23 (probablemente otras versiones también, pero no tengo tiempo para probar).

La solución de fuente cruzada @font-face de Font Squirrel tiene este aspecto:

@font-face {
    font-family: ''fontname'';
    src: url(''fontname.eot'');
    src: url(''fontname.eot?#iefix'') format(''embedded-opentype''),
         url(''fontname.woff'') format(''woff''),
         url(''fontname.ttf'') format(''truetype''),
         url(''fontname.svg#fontname'') format(''svg'');
    font-weight: normal;
    font-style: normal;
}

Para producir la propiedad src con los valores separados por comas, debe escribir todos los valores en una línea, ya que Sass no admite saltos de línea. Para producir la declaración anterior, debe escribir el siguiente Sass:

@font-face
  font-family: ''fontname''
  src: url(''fontname.eot'')
  src: url(''fontname.eot?#iefix'') format(''embedded-opentype''), url(''fontname.woff'') format(''woff''), url(''fontname.ttf'') format(''truetype''), url(''fontname.svg#fontname'') format(''svg'')
  font-weight: normal
  font-style: normal

Creo que parece una tontería escribir el camino un montón de veces, y no me gustan las líneas demasiado largas en mi código, así que lo resolví escribiendo esta mezcla:

=font-face($family, $path, $svg, $weight: normal, $style: normal)
  @font-face
    font-family: $family
    src: url(''#{$path}.eot'')
    src: url(''#{$path}.eot?#iefix'') format(''embedded-opentype''), url(''#{$path}.woff'') format(''woff''), url(''#{$path}.ttf'') format(''truetype''), url(''#{$path}.svg##{$svg}'') format(''svg'')
    font-weight: $weight
    font-style: $style

Uso : Por ejemplo, puedo usar el mixin anterior para configurar la fuente Frutiger Light de esta manera:

+font-face(''frutigerlight'', ''../fonts/frutilig-webfont'', ''frutigerlight'')