web-dev-qa-db-fra.com

SASS et @ font-face

J'ai le CSS suivant - comment pourrais-je le décrire dans SASS? J'ai essayé de le compiler à l'envers avec css2sass, et je continue à obtenir des erreurs .... est-ce mon CSS (qui fonctionne ;-))?

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

Au cas où quelqu'un se demanderait - c'était probablement mon 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')

rendra comme

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

qui semble être assez proche ... suffit de vérifier le rendu SVG

53
Dycey

Je lutte avec ça depuis un moment maintenant. La solution de Dycey est correcte en ce sens que la spécification de src plusieurs fois génère la même chose dans votre fichier css. Cependant, cela semble casser dans OSX Firefox 23 (probablement d'autres versions aussi, mais je n'ai pas le temps de tester).

Le cross-navigateur @font-face la solution de Font Squirrel ressemble à ceci:

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

Pour produire la propriété src avec les valeurs séparées par des virgules, vous devez écrire toutes les valeurs sur une seule ligne, car les sauts de ligne ne sont pas pris en charge dans Sass. Pour produire la déclaration ci-dessus, vous écririez le Sass suivant:

@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

Je pense qu'il semble idiot d'écrire le chemin un certain nombre de fois, et je n'aime pas les lignes trop longues dans mon code, j'ai donc travaillé dessus en écrivant ce mixage:

=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

Utilisation : Par exemple, je peux utiliser le mixin précédent pour configurer la police Frutiger Light comme ceci:

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

Pour ceux qui recherchent un mixage SCSS à la place, y compris 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
}

Le paramètre $type Est utile pour empiler des familles liées avec des poids différents.

Le @if Est dû à la nécessité de prendre en charge la police Inter (similaire à Roboto), qui a OTF mais n'a pas de types SVG et EOT pour le moment.

Si vous obtenez une erreur impossible à résoudre , n'oubliez pas de vérifier votre répertoire de polices ($dir).

1
CPHPython