css增加字体后，系统页面图标变成了生僻字

当你在CSS中设置了非默认字体，并指定了特定的字符（比如图标），而用户的设备上并未安装该字体或者对应的汉字映射时，系统可能会显示为问号（?）或其他无法识别的符号，这被称为“替代字符”或者“替换框”。

解决这个问题通常有两种方法：

1. **提供备选字体**: 可以在`font-family`里添加一些默认字体，如果用户设备上没有你设定的特殊字体，就会退回到这些默认字体显示正常字符。

font-family: "your-font-name", Arial, sans-serif;

2. **使用Unicode编码**: 确保你使用的图标有正确的Unicode编码，并且告诉浏览器使用哪种编码。例如，对于一些常用的图标字体，如Font Awesome，你需要明确告诉浏览器使用它们的Web Font文件。

@font-face {
  font-family: 'AwesomeIcons';
  src: url('path/to/fontawesome-webfont.eot');
  src: url('path/to/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
       url('path/to/fontawesome-webfont.woff2') format('woff2'),
       url('path/to/fontawesome-webfont.woff') format('woff'),
       url('path/to/fontawesome-webfont.ttf') format('truetype'),
       url('path/to/fontawesome-webfont.svg#AwesomeIcons') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon-name {
  font-family: 'AwesomeIcons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
}