css - 向网站添加多种 Icomoon 字体

Question

我聘请的开发移动网站的开发公司未能将 Selection.json 文件包含到该文件夹​​中，甚至从未想过将其保存在本地以供自己在支持期间供将来引用......基本上，他们所做的一切都包括字体文件:TTF、EOT、SVG 和 WOFF。

以下是 Icomoon 关于向现有字体添加更多字形的说法:您从 IcoMoon 应用程序下载的每个字体包都附带一个 Selection.json 文件，您可以将其导入回应用程序，以便修改或更新您的字体字体，以及与其字形关联的类名称。

现在我需要向字体添加更多字形。看起来最简单的方法是生成另一种字体，并将其添加到 style.css 中。您能建议如何做到这一点吗？原始行是:

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

[class^="icon-"],    
[class*=" icon-"] {    
  speak: none;    
  line-height: 1;    
  font-style: normal;    
  font-weight: normal;    
  font-variant: normal;    
  text-transform: none;    
  font-family: 'icomoon';}

  /* Better Font Rendering =========== */

或者，也许还有另一种方法可以向此字体添加图标，而无需破坏其结构，也无需修改整个 CSS 来更改整个网站的类名称？

谢谢!

Answer 1

一种选择是查找当前图标字体中的所有图标，并使用当前图标以及您想要包含的任何新图标创建新字体。然后，您将用新字体替换当前字体。

另一种选择是创建一种仅包含新图标的新字体，然后将其与现有图标​​字体一起包含在您的网站中。使用 icomoon 应用程序，您可以通过单击“首选项”来自定义字体名称和类前缀。我建议这样做，以避免与您网站中当前包含的“icomoon”字体发生冲突。

如果您想同时包含旧字体和新字体，则需要包含一些与此类似的 CSS(由 icomoon 生成):

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

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

[class^="icon-"],    
[class*=" icon-"],
[class^="anoterclassprefix-"],    
[class*="anotherclassprefix-"] {    
  speak: none;    
  line-height: 1;    
  font-style: normal;    
  font-weight: normal;    
  font-variant: normal;    
  text-transform: none;    
  font-family: 'ourotherfontname';}

  /* Better Font Rendering =========== */