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

题叶
  • 17.3k
回复
阅读 8.5k
4 个回答
Humphry
  • 16.4k
✓ 已被采纳

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不再分别输出fi的字形,而是输出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答案

KevinYue
  • 5.3k

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

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; 这个属性,它的作用不只是抗锯齿,还可以开启字体的 ligatureskerning 这一特性。

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

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

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

有用的链接

neechange
  • 0
新手上路,请多包涵

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

宣传栏