字体图标库的使用

1. 查看ttf字体图标对应的Unicode编码

(1) 获取字体文件至本地
(2) 双击 .ttf 字体文件，选择”安装字体“。

安装字体文件.png

(3) 查看模式选择为铺开查看所有，将鼠标悬停在需要查看的图标上，即可查看文字图标所对应的Unicode编码。

查看.png

(4) 使用字体图标(远程图标)

备注：会导致图标不能正常显示（H5端显示个方框，App端显示方框里面打叉），原因是缺少iconfont样式。

• App.vue 引入css文件

(7) 页面效果如下

页面效果.png

2.2 使用远程自定义字体图标

(1) 将所需图标加入购物车
(2) 在购物车页面将图标添加到自定义的项目

image.png

(3) 在项目中查看字体图标对应的Unicode、Font class和Symble

image.png

(4) 获取生成的@font-face

image.png

(5) 使用远程字体图标

• 示例1

• 示例2

• 示例3

注意事项

• 问题1：使用加载远程CSS文件的方式时，在浏览器上测试图标显示正常，安卓机上测试所有图标不显示也不报错。

• 解决：名字冲突问题， 由于网络引入的css中，font-family无法修改名称，因此，可修改字体名称，不要叫iconfont，改个其它的名字就好。

  
  
  image.png

• 问题2：字体图标在H5端显示正常，但是app端不能正常显示

• 原因（在线引用需完整地址）：引用在线连接css文件时没有加上 http 协议，虽然在本地模拟有效果，但是在真机运行的时候会不显示。

• 解决：url地址写全即可

@font-face {
  font-family: 'iconfont';  /* project id 2042078 */
  src: url('https://at.alicdn.com/t/font_2042078_rs7tkf5c1yb.eot');
  src: url('https://at.alicdn.com/t/font_2042078_rs7tkf5c1yb.eot?#iefix') format('embedded-opentype'),
  url('https://at.alicdn.com/t/font_2042078_rs7tkf5c1yb.woff2') format('woff2'),
  url('https://at.alicdn.com/t/font_2042078_rs7tkf5c1yb.woff') format('woff'),
  url('https://at.alicdn.com/t/font_2042078_rs7tkf5c1yb.ttf') format('truetype'),
  url('https://at.alicdn.com/t/font_2042078_rs7tkf5c1yb.svg#iconfont') format('svg');
}