创建材质图标子集答案

【问题标题】：Creating a Material Icons subset创建材质图标子集
【发布时间】：2021-02-13 06:45:25
【问题描述】：

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

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

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

我将所需的 CSS 规则添加为 instructed in Google's guide。当我自己托管 original woff2, 文件时一切正常，但在我修改它时会中断。它仅在使用带有 Unicode 的伪元素作为 contnet 时才有效。似乎保存文件会剥离名称到图标的映射（如果有任何意义，因为我不熟悉 woff2 文件的工作原理）。

有没有办法创建 woff2 文件的子集，其工作方式与原始文件一样？

【问题讨论】：

只是在一个令人沮丧的下午之后加上我的两美分，该字体依赖于连字。如果您检查字体的 TTF 版本，例如使用fontdrop.info，您会注意到很多连字定义。子集必须保留这些连字。到目前为止，我也无法做到这一点。

标签： fonts google-material-icons woff2

【解决方案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。据我了解，除非定义了单个字形 t、h、u...，否则字体无法将 thumb_alt 识别为连字（即使我们永远不会要求字体呈现单个字母字形）。
...e8db,e8dc：指定子集中实际需要的字形。
--no-layout-closure：只包括我们需要的字形的连字（thumbs_up 和thumbs_down），而不包括可以从集合_a-z 构造的任何其他连字，例如add、delete、face等等。如果没有此选项，子集将增长到几乎整个集。

您可以检查生成的文件，例如fontdrop.info，它将显示 30 个字形和两个连字。在我的情况下，您可以使用the guide 中记录的文件：

@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 file。

【讨论】：