创建材质图标子集

Question

我只使用了几个 Material Icons 图标，并且认为加载整个库是浪费资源。

我尝试编辑原始 woff2 文件并删除所有我不使用的图标。我得到的最接近的是使用这个工具： http://fontstore.baidu.com/static/editor/index-en.html#

但是当我导出修改后的文件时，它不像原始文件那样工作。例如，此 HTML 不会呈现为图标：

<span class="material-icons">check_circle</span>

我按照 Google 指南中的指示添加了所需的 CSS 规则。当我自行托管 original woff2 文件时，一切正常，但当我修改它时，一切都会中断。仅当使用 Unicode 伪元素作为 contnet 时，它才有效。保存文件似乎会删除名称到图标的映射（如果有任何意义的话，因为我不熟悉 woff2 文件的工作原理）。

有没有办法创建像原始文件一样工作的 woff2 文件子集？

Answer 1

thumb_up

和

thumb_down

字形和连字进行子集化的工作示例。

  fonttools subset MaterialIcons-Regular.ttf \
    --unicodes=5f-7a,30-39,e8db,e8dc \
    --no-layout-closure \
    --output-file=o.woff2 \
    --flavor=woff2

这句话的意思是：

--unicodes=5f-7a
• ：包括

  _

  的字形、字母

  a-z

  和数字

  0-9

  。据我了解，除非定义了单独的字形

  thumb_alt

  、

  t

  、

  h

  、...，否则字体无法将

  u

  识别为连字（即使我们永远不会要求字体渲染单个字母）字形）。
...e8db,e8dc
• ：指定子集中实际需要的字形。
--no-layout-closure
• ：仅包含我们需要的字形的连字（

  thumbs_up

  和

  thumbs_down

  ），而不包含可以从集合

  _a-z

  构造的任何其他连字，例如

  add

  、

  delete

  、

  face 

  等等。如果没有此选项，子集几乎会增长到整个集合。
您可以检查生成的文件，例如在

fontdrop.info

上，它将显示 30 个字形和两个连字。您可以使用指南中记录的文件，就我而言：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/o.woff2') format('woff2');
}

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

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

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

要查找所需字形的 Unicode 值，您可以查看 

codepoints 文件

。

Answer 2

subset-iconfont

可能会满足您的需求。这个包的目的是从几个图标字体包中提取子集并使用最新的 fontawesome css/scss 样式。为了您的目的，您可以用几行来完成： npm install --save-dev subset-iconfont material-icons @material-design-icons/svg

然后

import { MiProvider} from 'subset-iconfont';

const mi = new MiProvider(['alarm-on'], {
  formats: ['ttf', 'woff2'],
});

fa.makeFonts('./outputDir').then((result) => {
  console.log('Done!');
});

然后在文件夹

./outputDir

中找到结果，打开生成的

index.html

看看如何使用它。您可能会发现，它将对单个图标的所有可用样式进行子集化。这就是为什么您会在 webfonts 目录中获得多个字体文件。此外，如果不需要 css/scss 内容，则只能保留字体文件。

P.S.，我是这个包的作者。