为什么您应该为下一个项目考虑连字图标字体

Of late icon fonts such as Sosa, Pictonic, Foundation and Entypo have become the new web design hotness. Quick to load, infinitely scalable and easily adjusted, fonts have obvious advantages to the traditional solution of CSS sprites. To use them, the designer simply embeds the font via CSS on a page, and types out a character to produce a matching icon.

诸如Sosa ， Pictonic ， Foundation和Entypo之类的最新图标字体已成为新的Web设计热点 。 字体具有快速加载，无限扩展和易于调整的优点，与传统的CSS sprites解决方案相比，具有明显的优势。 要使用它们，设计人员只需通过CSS将字体嵌入页面中，然后键入一个字符以生成匹配的图标即可。

However, there are three fundamental disadvantages to icon fonts, two of which are also shared by image sprites:

但是，图标字体存在三个基本缺点，其中两个也由图像精灵共享：

• Most icon fonts are not accessible: typing “L” to produce a Like button means that visitors who use a text-to-speech service to read your site will only hear “L” as a description of the icon. While there are solutions to this issue, they use CSS tricks that are, in this author’s humble opinion, somewhat convoluted and better left behind.

  大多数图标字体不可访问 ：键入“ L”以产生一个“赞”按钮，意味着使用文本语音转换服务阅读您的网站的访问者只会听到“ L”作为图标说明。 尽管有解决此问题的方法 ，但他们使用CSS技巧，根据作者的拙见，这些技巧有些令人费解，并且更好地被抛在了后面。

• Search engines are confronted with the same issue, as they read text, not icons, and “L” makes little sense to Google.
  搜索引擎面临同样的问题，因为它们阅读文本而不是图标，而“ L”对Google来说意义不大。
• Looking up codes for icons and typing in HTML entities to produce them is a pain.
  查找图标代码并键入HTML实体以产生它们是一件很痛苦的事情。

Ligature icon fonts eliminate both of these issues. As I’ve explained previously, ligatures are joined or merged letter forms that are generated to produce smoother type with better spacing: a single glyph to replace the otherwise ungainly “fi” letter pairing, for example.

线性图标字体消除了这两个问题。 正如我之前所解释的，连字是通过连接或合并字母形式生成的，以产生具有更好间距的更平滑的字体：例如，单个字形可替代原本笨拙的“ fi”字母对。

I’ve shown how to use CSS to turn on ligatures and kerning pairs; ligature fonts simply take this idea one step further. Rather than replacing pairs of letters, ligature fonts look for sequences of characters, which map to icons within the font. For example, if I assign the SymbolSet SS Standard typeface to <a> tags inside a <nav> element, I can produce icons by simply typing in words:

我已经展示了如何使用CSS来打开连字和字距调整对 ； 连字字体只是使这一想法更进一步。 连字字体不是替换成对的字母，而是查找字符序列，这些字符序列映射到字体内的图标。 例如，如果将SymbolSet SS Standard字体分配给<nav>元素内的<a>标记，则可以通过简单地键入单词来生成图标：

<nav class="ss-icon">
	<a href="#">User </a>
	<a href="#">Home</a>
	<a href="#">Cart</a>
	<a href="#">Locked</a>
	<a href="#">Love</a>
</nav>

Which would produce these linked icons:

这将产生这些链接的图标：

Neat, right? Search engines and those with accessibility needs, or anyone who has CSS turned off, read the natural text, and everyone else sees the icons. The icons can even be colored, shadowed (using text-shadow) and animated.

整洁吧？ 搜索引擎以及那些具有可访问性需求的人，或者关闭CSS的任何人，都会阅读自然文本，其他所有人都可以看到这些图标。 图标甚至可以着色，阴影化(使用text-shadow )和动画化。

You’ll see SS Standard (and its partner, SS Social) featured in the next redesign of this blog, launching in January 2013. The same typographers also produce SS Pika and Symbolicons, which implement different icons and styles.

您会看到SS Standard(及其合作伙伴SS Social)在此博客的下一次重新设计(将于2013年1月发布)中成为特色。相同的印刷商还生产SS Pika和Symbolicons，它们实现了不同的图标和样式。

While fonts from SymbolSet remain my personal favorite, the typefaces must be paid for. If you’re on a budget, LigatureSymbols by Kazuyuki Motoyama is a free alternative. Another icon font, Typicons, is currently limited to single-letter associations, but the author is working on making it more semantic.

虽然SymbolSet的字体仍然是我个人最喜欢的字体，但必须为这些字体付费。 如果您预算有限，可以免费选择Mozyama的LigatureSymbols 。 目前，另一种图标字体Typicons仅限于单字母关联，但作者正在努力使其更具语义。

翻译自: https://thenewcode.com/620/Why-You-Should-Consider-A-Ligature-Icon-Font-For-Your-Next-Project