如何对 Google 图标字体进行子集化以获得最佳下载大小？

Question

Google 包含说明如何对字体进行子集化，甚至指定：

此功能也适用于国际字体，允许您指定 UTF-8 字符。例如，¡Hola！表示为：

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!

.

Google Material Icons/Symbols 字体中的每个符号都有一个代码点，如本 SO 问题中所指定。

有没有办法将代码点值作为值传递给

&text

URL 参数，以便我可以下载 Material Symbols 字体的子集以及我想要在应用程序中使用的所有图标？例如，搜索图标的代码点为

e8b6

。我尝试了几个咒语，包括没有下载搜索图标的

&text=e8b6

和

&text=%e8%b6

。然后我找到了一个从codepoint到utf-8的转换器，它将

e8b6

转换为一些不可打印的字符^H^F。然后我通过

&text=^H^F

它下载了搜索图标，但它没有对字体进行子集化，即它下载了整个字体文件，而不是它的子集。

Answer 1

使用类似 https://r12a.github.io/app-conversion/ 的转换工具将代码点从 UTF-32 转换为 UTF-8。 UTF-8 表示形式是您可以放入 google API 中的内容。

将 e8b6 (UTF-32) 转换为 EE A2 B6 (UTF-8)，编码为 URL 中的 %EE%A2%B6。所以最终的网址是 https://fonts.googleapis.com/css?family=Material+Symbols+Outlined&text=%EE%A2%B6

Google API 返回 CSS：

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejddmVDpY&skey=b8dc2088854b122f&v=v175) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

可以下载 Woff2 文件并将其放入 FontDrop 等工具中，以验证它是否只包含感兴趣的符号。