Css 字体中的iefix、怪异片段和怪异查询字符串

我正在尝试找出如何为图标字体组合字体面声明。我正在研究和迭代从其他人那里得到的一些代码。下面是输入和CSS输出

这是正确的吗？这些古怪的url片段和查询是怎么回事？我尝试过谷歌搜索，但没能找到多少

波旁酒 CSS输出

---

最好的方法就是测试它们。但在我看来，问题在于：

所有字体似乎都有相同的名称“companyicons”，因此它们会相互覆盖

URL应该被引用

文件名可疑“companyicons.woff.eot”

根据您希望浏览器支持的距离，我只使用.woff。它可以在90%和不断增长的当今浏览器上运行

我想我记得有些浏览器要求每个src标记都有格式扩展

试试这个：

波旁威士忌 应产生：

CSS

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

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

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

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