Question

如果你只有一个字体系列，Icomoon字体可以正常工作，但如果我创建了另一个字体系列并希望与第一个一起使用，该怎么办？我试着做这样的事情：

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

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

我的字体文件名与font-family完全相同。另外，我使用“data-icon”属性作为第一个字体图标，并使用“data-icon2”作为第二个字体图标。

[data-icon]:before { content:attr(data-icon); font-family:'icomoon'; font-variant:normal; font-weight:normal; line-height:1; speak:none; text-transform:none; -webkit-font-smoothing:antialiased; }

[data-icon2]:before { content:attr(data-icon2); font-family:'abccons'; font-variant:normal; font-weight:normal; line-height:1; speak:none; text-transform:none; -webkit-font-smoothing:antialiased; }

不确定我是否以正确的方式进行此操作。字体以http://css-tricks.com/html-for-icon-font-usage/中描述的方式加载。结果是：第一个字体正确加载，而第二个字体似乎已经加载了一些东西，但都显示为方形，而不是字体。如果我在css文件中设置为data-icon2但在html中使用data-icon3（打算出错），则无法加载。

有什么想法吗？

Answer 1

检查路径.....有一个关于如何使用Icomoon图标的精美教程 http://chipcullen.com/how-to-use-icomoon-and-icon-fonts-part-1-basic-usage/。它会帮助你

如何使用多个Icomoon字体（多个字体系列）

1 个答案: