Material Design 的图标是怎么生效的?

Question

居然没看懂是怎么生效的... 页面在这里:

https://www.google.com/design/icons/

还有这一句是怎么生效的?

csstext-rendering: optimizeLegibility;

Answer 1

iconfont的一个使用方式。

相关文件：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v7/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  text-transform: none;
  display: inline-block;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

其实最重要的是font-family: 'Material Icons';和-webkit-font-feature-settings: 'liga';，前者声明了使用Material Icons作为字体，后者则启用了连字特性。

什么是连字特性？中文字体很少见，但英文经常出现：

注意，由于启用了连字特性，所以针对输入fi不再分别输出f和i的字形，而是输出fi的连字字形。

其实Material Font就利用了连字特性，来达到让这个输入：

<i class="md-icon dp48">flip_to_front</i>

映射到这个输出:

一般而言，为了兼容字符输出和icon font输出，icon font会选择映射unicode表上面不被占用的一个平面的单字（如font awesome），这样做的坏处是我们不知道什么输入对应输出，根本没有办法记忆和直观地查找。
但使用了连字特性，我们针对形如flip_to_front的连字进行映射，它很直观，也很好记。

连字特性的坏处嘛，它有兼容性问题，这里是google提供的一个表格：

Browser	Version supporting ligatures
Google Chrome	11
Mozilla Firefox	3.5
Apple Safari	5
Microsoft IE	10
Opera	15
Apple MobileSafari	iOS 4.2
Android Browser	3.0

顺带，text-rendering: optimizeLegibility;这一句只是调节抗锯齿渲染而已。 更新：不准确，参见@KevinYue 的答案。

Answer 2

我也是第一次看到这种方式来渲染字体图标，很有意思。下面这个链接给出了很好的解释。

https://google.github.io/material-design-icons/#using-the-icons-in-htm...

UPDATE

这里还有一篇相关的介绍，The Era of Symbol Fonts。看完之后感觉主要是利用了字体的 ligatures 这个特性。@Humphry 上面已经提到。

Fonts also have special characters called ligatures—subtle, often hardly noticeable, tweaks to the letterforms that are used to aid reading. Take, for instance, two consecutive “f” characters. A good font will convert that “ff” into a single ligature where the fs connect smoothly. There are several standard ligatures, including ff, fl, and fi. But there is no reason you can’t also define your own. In a font file, it is a simple substitution; all the ligature is looking for is the right sequence of letters. When they’re typed, they are replaced with another glyph. This means you can have a string like “A List Apart” and convert it into a single symbol icon of the logo.

这种方法提高了字体图标的 Accessibility 。但是在平常的开发中很少见到，原因可能是由于浏览器的兼容性不太好。IE9- 及 Android 3.0 以下的浏览器都要做兼容性处理。

至于 text-rendering: optimizeLegibility; 这个属性，它的作用不只是抗锯齿，还可以开启字体的 ligatures 和 kerning 这一特性。

optimizeLegibility
The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.

通常为了兼容性考虑，会和 font-feature-settings 这个属性一块使用。

总的感觉，字体排版这块水很深的。

有用的链接

• The Era of Symbol Fonts
• Symbolset
• 这个表好玩
• Kerning on the Web
• text-rendering
• THE NEW WEB TYPOGRAPHY

Answer 3

我这里UC浏览器会出问题，什么原因

Answer 4

http://www.verydemo.com/demo_c447_i8251.html
上面的链接讲了这个东西的原理