css - font-face 中的 iefix、奇怪的片段和奇怪的查询字符串

Question

我正在尝试弄清楚如何将图标字体的字体声明放在一起。我正在处理和迭代我从别人那里得到的一些代码。 bourbon输入和 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"); }

Answer 1

试试这个:

波本

@include font-face("companyicons", "companyicons",
  $weight: normal, $style: normal, $asset-pipeline: true);

应该产生:

CSS

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