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

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

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

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提供的一个表格 ：

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