0

アイコンフォントの font-face 宣言をまとめる方法を見つけようとしています。私は他の人から入手したいくつかのコードに取り組んで繰り返しています。burbonの入力と CSS の出力は次のとおりです。

これは正しいです？これらのファンキーな URL フラグメントとクエリはどうすればよいでしょうか? 私はグーグルを試してみましたが、あまり思いつくことができませんでした。

バーボンインプット

@include font-face(companyicons, "companyicons.eot?",
  $weight: "normal", $style: "normal", $asset-pipeline: true);
@include font-face(companyicons, "companyicons.eot?#iefix",
  $weight: "normal", $style: "normal", $asset-pipeline: true);
@include font-face(companyicons, "companyicons.woff",
  $weight: "normal", $style: "normal", $asset-pipeline: true);
@include font-face(companyicons, "companyicons.ttf",
  $weight: "normal", $style: "normal", $asset-pipeline: true);
@include font-face(companyicons, "companyicons.svg#medstroicons",
  $weight: "normal", $style: "normal", $asset-pipeline: true);

CSS出力

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

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

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

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

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

2 に答える 2

1

最善の方法は、それらをテストすることです。しかし、私には間違っているように見えるものは次のとおりです。

  1. すべてのフォントは「companyicons」という同じ名前のように見えるため、互いに上書きされます。
  2. URL は引用符で囲む必要があります。
  3. ファイル名は疑わしい「companyicons.woff.eot」です。
  4. ブラウザーのサポートが必要な期間に応じて、.woff のみを使用します。現在のブラウザの 90% と成長しているブラウザで動作します。
  5. すべての src タグにフォーマット拡張が必要な​​ブラウザーを覚えていると思います。
于 2013-10-13T05:39:48.120 に答える