Ionic 3新项目导入自定义字体求助

我来帮你搞定这件事，结合你已经完成的文件放置和SCSS文件创建操作，接下来按这几个步骤来就能顺利用上自定义图标：

1. 完善你的字体定义SCSS文件 #

你已经创建了piconsthin-webfont.scss，先把它的内容补全并确保路径正确，建议修改成这样：

// 指定字体文件的相对路径，和当前SCSS文件同目录所以用'./'
$piconsthin-webfont-font-path: './' !default;

@font-face {
  font-family: 'piconsthin';
  // 按优先级加载字体格式，woff2加载速度最快最优先
  src:  url('#{$piconsthin-webfont-font-path}/piconsthin-webfont.woff2') format('woff2'),
        url('#{$piconsthin-webfont-font-path}/piconsthin-webfont.woff') format('woff'),
        url('#{$piconsthin-webfont-font-path}/piconsthin-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block; // 避免字体加载时的文字闪烁问题
}

// 定义基础图标样式类，统一图标渲染规则
.piconsthin {
  font-family: 'piconsthin' !important;
  speak: never; // 防止屏幕阅读器误读图标内容
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  // 优化图标在不同设备上的渲染效果
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 这里替换成你的字体实际包含的图标unicode
// 示例：假设你的字体里有首页和用户图标，对应unicode是e900和e901
.piconsthin-home:before {
  content: "\e900";
}
.piconsthin-user:before {
  content: "\e901";
}

提示：如果不知道图标的unicode，可以用FontForge这类字体工具打开TTF文件，查看每个图标的编码值

2. 在项目全局引入这个SCSS文件 #

找到Ionic项目根目录下的src/theme/variables.scss，在文件末尾或者其他字体导入的位置，添加导入语句：

@import '../../www/assets/fonts/piconsthin-webfont.scss';

注意：路径要根据你的项目目录结构调整，如果后续把字体文件移到更规范的src/assets/fonts目录，路径改成../assets/fonts/piconsthin-webfont.scss即可

3. 在页面中使用自定义图标 #

现在就可以在HTML模板里直接调用定义好的图标类了，举几个实用的例子：

<!-- 单独展示图标，可自定义大小 -->
<span class="piconsthin piconsthin-home" style="font-size: 24px; color: #3880ff;"></span>

<!-- 和Ionic按钮组件结合使用 -->
<ion-button color="primary">
  <span class="piconsthin piconsthin-user"></span>
  我的账户
</ion-button>

<!-- 作为列表项的左侧图标 -->
<ion-list>
  <ion-item>
    <span class="piconsthin piconsthin-home" slot="start"></span>
    <ion-label>首页</ion-label>
  </ion-item>
</ion-list>

常见问题排查 #

• 字体文件加载失败：打开浏览器开发者工具的Network标签，刷新页面查看字体文件是否返回404，如果是，检查SCSS里的路径是否写错
• 图标不显示：确认图标的unicode是否正确，或者有没有其他CSS样式覆盖了font-family属性，可通过开发者工具查看元素的样式优先级
• 图标显示模糊：确保添加了-webkit-font-smoothing和-moz-osx-font-smoothing属性，同时尽量使用woff2格式的字体文件

内容的提问来源于stack exchange，提问作者Matt Tanner