为何Google托管Material Icons比自托管版本图标更多且部分失效？

嘿，我刚好踩过Material Icons自托管的坑，来给你拆解下问题所在！

为什么自托管图标不显示，但CDN可以？ #

大概率是这几个原因：

• 字体文件路径或配置错误：CDN的样式表已经帮你写好了完整的@font-face声明和字体族配置，但自托管时，你可能没把字体文件放在正确的路径，或者CSS里的src路径写错了，导致浏览器加载不到字体文件。
• 字体族或样式规则不匹配：Material Icons要求特定的font-family和font-weight（必须是400），如果你的CSS里没正确设置这些，图标就无法渲染。比如你可能把字体族写成了MaterialIcons而不是'Material Icons'（注意空格和引号）。
• 缺少对应风格的字体文件：很多图标属于特定风格（比如Outlined、Rounded），如果你只下载了Regular风格的字体，那用其他风格的图标代码点自然显示不出来，而CDN默认加载了所有风格的字体包。

为什么感觉CDN的图标数量更多？ #

这是因为CDN提供的Material Icons套件默认包含了所有风格的字体文件（Regular、Outlined、Rounded、Sharp、Two Tone），而大多数人自托管时只会下载其中一种风格的文件，所以看起来图标“变少”了。其实codepoints文件里的所有代码点都是可用的——只要你下载了对应风格的字体文件并正确配置。

解决自托管图标不显示的步骤 #

1. 下载完整的字体包 #

去Material Icons官网下载全套字体文件，确保包含所有风格的字体（比如MaterialIcons-Regular.ttf、MaterialIconsOutlined-Regular.otf等）。

2. 配置正确的CSS规则 #

给每个风格的字体单独声明@font-face，并设置对应的图标类样式：

/* Regular风格 */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/MaterialIcons-Regular.ttf') format('truetype');
}

/* Outlined风格 */
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/MaterialIconsOutlined-Regular.otf') format('opentype');
}

/* 通用图标样式 */
.material-icons, .material-icons-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;
}

/* 指定各风格的字体族 */
.material-icons {
  font-family: 'Material Icons';
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
}

3. 检查文件路径 #

确保CSS里的src路径和实际字体文件的位置一致。比如字体放在项目根目录的fonts文件夹里，路径就写url('./fonts/xxx.ttf')；如果CSS在css文件夹里，就要写成url('../fonts/xxx.ttf')。

4. 匹配图标风格与字体 #

使用图标时，要对应使用正确的类名：

<!-- Regular风格的金钱图标 -->
<span class="material-icons">attach_money</span>

<!-- Outlined风格的金钱图标 -->
<span class="material-icons-outlined">attach_money</span>

5. 清除浏览器缓存 #

有时候浏览器会缓存旧的字体文件，导致新图标不显示，按Ctrl+Shift+R强制刷新页面即可。

内容的提问来源于stack exchange，提问作者Zach Smith