0

我正在尝试弄清楚如何将图标字体的字体声明放在一起。我正在研究和迭代我从别人那里得到的一些代码。波旁威士忌输入和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 回答
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"); 
}
于 2013-10-13T18:23:15.670 回答