SASS und @ font-face

Question

ich habe folgende CSS - wie würde ich es beschreiben in SASS? Ich habe versucht, Reverse es mit css2sass kompilieren, und halten nur immer Fehler .... ist es meine CSS (das funktioniert ;-))?

@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

Falls jemand frage mich - es war wahrscheinlich mein 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')

machen wird als

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

, die nahe genug zu sein scheint ... muß nur das SVG-Rendering überprüfen

Answer 2

Ich habe jetzt schon eine Weile mit diesem zu kämpfen. Dycey Lösung ist richtig, dass die src mehrfach Ausgänge die gleiche Sache in Ihrem CSS-Datei angeben. Dies ist jedoch in OSX Firefox 23 zu brechen scheint (wahrscheinlich auch andere Versionen, aber ich habe keine Zeit zu testen).

Die Cross-Browser @font-face Lösung von Font Squirrel sieht wie folgt aus:

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

Um die src Eigenschaft mit den kommagetrennte Werte zu erzeugen, müssen Sie alle Werte in einer Zeile zu schreiben, da Zeilenumbrüche nicht in Sass unterstützt. Um die obige Erklärung zu erzeugen, würden Sie die folgende Sass schreiben:

@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

Ich denke, es ist albern scheint den Pfad ein paar Mal zu schreiben, und ich weiß nicht, wie zu lange Linien in meinem Code, so dass ich durch das Schreiben dieses mixin um es funktionierte:

=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

Verwendung : Zum Beispiel habe ich die vorherige mixin Setup auf der Frutiger Light Schriftart wie folgt verwendet werden:

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

Answer 3

Für die Suche nach einem SCSS mixin statt, einschließlich woff2 :

@mixin fface($path, $family, $type: '', $weight: 400, $svg: '', $style: normal) {
  @font-face {
    font-family: $family;
    @if $svg == '' {
      // with OTF without SVG and EOT
      src: url('#{$path}#{$type}.otf') format('opentype'), url('#{$path}#{$type}.woff2') format('woff2'), url('#{$path}#{$type}.woff') format('woff'), url('#{$path}#{$type}.ttf') format('truetype');
    } @else {
      // traditional src inclusions
      src: url('#{$path}#{$type}.eot');
      src: url('#{$path}#{$type}.eot?#iefix') format('embedded-opentype'), url('#{$path}#{$type}.woff2') format('woff2'), url('#{$path}#{$type}.woff') format('woff'), url('#{$path}#{$type}.ttf') format('truetype'), url('#{$path}#{$type}.svg##{$svg}') format('svg');
    }
    font-weight: $weight;
    font-style: $style;
  }
}
// ========================================================importing
$dir: '/assets/fonts/';
$famatic: 'AmaticSC';
@include fface('#{$dir}amatic-sc-v11-latin-regular', $famatic, '', 400, $famatic);

$finter: 'Inter';
// adding specific types of font-weights
@include fface('#{$dir}#{$finter}', $finter, '-Thin-BETA', 100);
@include fface('#{$dir}#{$finter}', $finter, '-Regular', 400);
@include fface('#{$dir}#{$finter}', $finter, '-Medium', 500);
@include fface('#{$dir}#{$finter}', $finter, '-Bold', 700);
// ========================================================usage
.title {
  font-family: Inter;
  font-weight: 700; // Inter-Bold font is loaded
}
.special-title {
  font-family: AmaticSC;
  font-weight: 700; // default font is loaded
}

Der $type Parameter ist nützlich für das Stapeln verwandten Familien mit unterschiedlichen Gewichten.

Die @if ist aufgrund der Notwendigkeit der Unterstützung der Inter Schriftart (ähnlich Roboto ), die OTF hat aber SVG und EOT nicht zu diesem Zeitpunkt Typen hat.

Wenn Sie eine erhalten nicht auflösen kann Fehler, vergessen Sie nicht Ihre fonts doppeltzukontrollieren ($dir).