1

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

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

但是当我导出修改后的文件时，它不像原来的那样工作。例如，此 HTML 不会呈现为图标： <span class="material-icons">check_circle</span>

我按照 Google 指南中的说明添加了所需的 CSS 规则。当我自己托管原始woff2 文件时，一切正常，但在我修改它时会中断。它仅在使用 Unicode 作为contnet. 似乎保存文件会剥离名称到图标的映射（如果有任何意义，因为我不熟悉 woff2 文件的工作方式）。

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

4

1 回答 1

0

这是一个工作示例，它对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为连字（即使我们永远不会要求字体呈现单个字母字形）。thu
  • ...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 值，您可以查看代码点文件。

于 2021-02-17T08:53:44.433 回答