字体中的iefix，奇怪的片段和奇怪的查询字符串

Question

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

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

最好的方法就是测试它们。但对我来说错误的事情是：

1. 所有字体似乎都具有相同的名称“companyicons”，因此它们会相互覆盖。
2. 应引用网址。
3. 文件名可疑“companyicons.woff.eot”。
4. 根据您希望浏览器支持的时间长短，我只使用.woff。它的工作率达到了90％，而今天的浏览器也在增长。
5. 我想我记得有些浏览器要求每个src标签都有格式扩展名。

Answer 2

试试这个：

波旁

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