SASS et @font-face
j'ai les CSS suivants-comment les décrirais-je dans SASS? J'ai essayé de le compiler à l'envers avec css2sass, et je continue à avoir des erreurs.... c'est à 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');
}
2 réponses
au cas où quelqu'un se demanderait - il é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')
rendu
@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... il suffit de vérifier le rendu SVG
j'ai du mal avec ça depuis un moment maintenant. La solution de Dycey est correcte dans le fait de spécifier le src sorties multiples 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).
La croix-navigateur @font-face solution de Police Écureuil 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 le src propriété avec les valeurs séparées par des virgules, vous devez Ecrivez toutes les valeurs sur une 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 que cela semble stupide pour écrire le chemin d'accès à un tas de fois, et je n'aime pas trop les longues lignes dans mon code, j'ai donc travaillé autour d'elle par l'écriture de ce mixin:
=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 pour l'installation de la Frutiger Light police comme ceci:
+font-face('frutigerlight', '../fonts/frutilig-webfont', 'frutigerlight')