向网站添加多种 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 =========== */