Material Icons can't display ?

作者:frank 发表日期:2016-04-17 11:08:20 更新日期:2016-08-15 20:13:05 分类:猿文色

摘要

Material Icons can't display ?

正文

Stark项目使用了react-material-ui,其中包含Material Icons,下载完成所有格式的字体文件后:

  1. 导入字体

     @font-face {
       font-family: 'Material Icons';
       font-style: normal;
       font-weight: 400;
       src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
       src: local('Material Icons'),
            local('MaterialIcons-Regular'),
            url(MaterialIcons-Regular.woff2) format('woff2'),
            url(MaterialIcons-Regular.woff) format('woff'),
            url(MaterialIcons-Regular.ttf) format('truetype');
     }
    
  2. 使用字体

```
.material-icons {
  direction: ltr;
  display: inline-block;
  font-family: 'Material Icons';
  font-size: 14px;  /* Preferred icon size */
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
}
```

  上述两步完成后,在Mac下的chrome上完美的运行着,但是到了windows下的chrome却没法显示字体。最后发现还需要在步骤2的类中添加下述两句CSS:

```
.material-icons{
  /* Support for Safari and Chrome. */ 
  text-rendering: optimizeLegibility;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
```

  这两句CSS的共同作用是启用字体的连字效果,就是下述这种效果,,oo和th都被短线连接:

  连字效果

  强烈建议阅读web-font这篇文章,对text-rendering和font-feature-settings讲解非常详细。

  参考:font-smoothing