誰かが疑問に思っていた場合に備えて-それはおそらく私の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')
次のようにレンダリングされます
@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'); }
これは十分に近いようです...SVGレンダリングを確認する必要があります
私はこれにしばらく苦労してきました。Dyceyのソリューションは、src複数回指定するとcssファイルに同じものが出力されるという点で正しいです。ただし、これはOSX Firefox 23では壊れているようです（おそらく他のバージョンもありますが、テストする時間がありません）。
FontSquirrelのクロスブラウザ@font-faceソリューションは次のようになります。
@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;
}
srcSassでは改行がサポートされていないため、カンマ区切りの値を使用してプロパティを生成するには、すべての値を1行に書き込む必要があります。上記の宣言を作成するには、次の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
パスを何度も書き出すのはばかげているように思えます。コードの行が長すぎるのは好きではないので、次のミックスインを作成して回避しました。
=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
使用法：たとえば、前のミックスインを使用して、次のようにFrutigerLightフォントを設定できます。
+font-face('frutigerlight', '../fonts/frutilig-webfont', 'frutigerlight')
代わりに、 woff2を含むSCSSミックスインを探している人にとって、SASS list.appendは、ソースファイル/フォーマットを条件付きで追加するのに役立ちます。
@mixin fface(
$path,
$family,
$type: "",
$weight: 400,
$style: normal,
$local1: null,
$local2: null,
$ttf: null,
$otf: null,
$eot: null,
$svg: null
) {
$src: null; // initialize an empty source path
// only load local files when both sources are present
@if $local1 and $local2 {
$src: append($src, local("#{$local1}"), comma);
$src: append($src, local("#{$local2}"), comma);
}
@if $otf {
$src: append($src, url("#{$path}#{$type}.otf") format("opentype"), comma);
}
// load default formats (woff and woff2)
$src: append($src, url("#{$path}#{$type}.woff2") format("woff2"), comma);
$src: append($src, url("#{$path}#{$type}.woff") format("woff"), comma);
// formats that should only be added at the end
@if $ttf {
$src: append($src, url("#{$path}#{$type}.ttf") format("truetype"), comma);
}
@if $svg {
$src: append($src, url("#{$path}#{$type}.svg##{$svg}") format("svg"), comma);
}
// the actual FONT FACE DECLARATION
@font-face {
font-family: $family;
// for compatibility reasons EOT comes first and is not appended
@if $eot {
src: url("#{$path}#{$type}.eot");
}
// load appended sources path
src: $src;
font-weight: $weight;
font-style: $style;
}
}
// USAGE
$dir: "assets/fonts/";
// declare family name
$familyName: "MyFont";
@include fface(
"#{$dir}#{$familyName}", $familyName, "-regular", 400, "normal",
"#{$familyName} Regular", "#{$familyName}-Regular", "ttf", "otf"
);
@include fface(
"#{$dir}#{$familyName}", $familyName, "-medium", 500, "normal",
"#{$familyName} Medium", "#{$familyName}-Medium", "ttf", "otf"
);
@include fface(
"#{$dir}#{$familyName}", $familyName, "-semibold", 600, "normal",
"#{$familyName} SemiBold", "#{$familyName}-SemiBold", "ttf", "otf"
);
// Material Icons
$familyName: "Material Icons"; // override previous value
$familyFileName: "MaterialIcons";
@include fface(
"#{$dir}#{$familyFileName}", $familyName, "-regular", 400, "normal",
$familyName, "#{$familyFileName}-Regular", "ttf", null, "eot"
);
@include fface(
"#{$dir}#{$familyFileName}", "#{$familyName} Outline", "-outline", 400, "normal",
"#{$familyName} Outline", "#{$familyFileName}-Outline", null, "otf", "eot"
);
.material-icons {
font-family: $familyName;
}
.material-icons-outline {
font-family: "#{$familyName} Outline";
}
この$typeパラメーターは、内のさまざまなファイルを見つけるために使用されます$family。
解決できないエラーが発生した場合は、フォントディレクトリ（$dir）を再確認することを忘れないでください。
私の場合、SASSMixinを使用しています。
@mixin font-face($family, $file, $path, $svg, $weight: normal, $style: normal)
@font-face
font-family: $family
src: url($path + $file + '.eot')
src: url($path + $file + '.eot?#iefix') format('embedded-opentype'), url($path + $file + '.woff') format('woff'), url($path + $file + '.ttf') format('truetype'), url($path + $file + '.svg##{$svg}') format('svg')
font-weight: $weight
font-style: $style
使用法：
@include font-face('altivo', 'altivo-regular', '', 'altivo-regular')
@include font-face('altivo', 'altivo-medium', '', 'altivo-medium', 500, normal)
@include font-face('altivo', 'altivo-bold', '', 'altivo-bold', 700, normal)
@include font-face('corsa', 'corsa-grotesk-regular', '', 'corsa-grotesk-regular')
@include font-face('corsa', 'corsa-grotesk-medium', '', 'corsa-grotesk-medium', 500, normal)
@include font-face('corsa', 'corsa-grotesk-bold', '', 'corsa-grotesk-bold', 700, normal)
@include font-face('corsa', 'corsa-grotesk-xbold', '', 'corsa-grotesk-xbold', 800, normal)
結果：
@font-face {
font-family: "altivo";
src: url("altivo-regular.eot");
src: url("altivo-regular.eot?#iefix") format("embedded-opentype"), url("altivo-regular.woff") format("woff"), url("altivo-regular.ttf") format("truetype"), url("altivo-regular.svg#altivo-regular") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "altivo";
src: url("altivo-medium.eot");
src: url("altivo-medium.eot?#iefix") format("embedded-opentype"), url("altivo-medium.woff") format("woff"), url("altivo-medium.ttf") format("truetype"), url("altivo-medium.svg#altivo-medium") format("svg");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "altivo";
src: url("altivo-bold.eot");
src: url("altivo-bold.eot?#iefix") format("embedded-opentype"), url("altivo-bold.woff") format("woff"), url("altivo-bold.ttf") format("truetype"), url("altivo-bold.svg#altivo-bold") format("svg");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "corsa";
src: url("corsa-grotesk-regular.eot");
src: url("corsa-grotesk-regular.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-regular.woff") format("woff"), url("corsa-grotesk-regular.ttf") format("truetype"), url("corsa-grotesk-regular.svg#corsa-grotesk-regular") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "corsa";
src: url("corsa-grotesk-medium.eot");
src: url("corsa-grotesk-medium.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-medium.woff") format("woff"), url("corsa-grotesk-medium.ttf") format("truetype"), url("corsa-grotesk-medium.svg#corsa-grotesk-medium") format("svg");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "corsa";
src: url("corsa-grotesk-bold.eot");
src: url("corsa-grotesk-bold.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-bold.woff") format("woff"), url("corsa-grotesk-bold.ttf") format("truetype"), url("corsa-grotesk-bold.svg#corsa-grotesk-bold") format("svg");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "corsa";
src: url("corsa-grotesk-xbold.eot");
src: url("corsa-grotesk-xbold.eot?#iefix") format("embedded-opentype"), url("corsa-grotesk-xbold.woff") format("woff"), url("corsa-grotesk-xbold.ttf") format("truetype"), url("corsa-grotesk-xbold.svg#corsa-grotesk-xbold") format("svg");
font-weight: 800;
font-style: normal;
}