阿里巴巴矢量图的使用

### 在 UniApp 中集成和使用阿里巴巴矢量图库的方法 在 UniApp 中使用阿里巴巴矢量图库可以通过以下方式实现，确保图标在不同平台（H5、小程序、App 等）上都能正常显示。 #### 1. 下载阿里巴巴矢量图标 访问阿里巴巴矢量图标库官网 [https://www.iconfont.cn/](https://www.iconfont.cn/) 并注册账号。选择需要的图标加入购物车后，将其添加至项目中。如果没有现有项目，可以新建一个与当前开发项目名称一致的项目[^2]。完成后下载生成的压缩包并解压，得到以下文件： - `iconfont.css`：样式文件。 - `iconfont.ttf`：字体文件。 - 其他相关文件（如 `demo_index.html` 和 `iconfont.woff` 等）。 将这些文件放入项目的合适目录中，例如 `static/font` 或 `common/icon`[^1]。 #### 2. 修改 `iconfont.css` 文件路径 打开 `iconfont.css` 文件，找到类似以下代码的部分： ```css @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); } ``` 将所有字体文件的路径修改为相对于项目根目录的正确路径。例如，如果将文件放在 `static/font` 目录下，则路径应改为 `/static/font/iconfont.ttf` 等[^2]。 #### 3. 引入 `iconfont.css` 在 `App.vue` 的全局样式中引入 `iconfont.css` 文件。确保路径正确无误： ```vue <style> /* 每个页面公共 css */ @import url("/static/font/iconfont.css"); </style> ``` #### 4. 解决移动端不显示问题 由于 UniApp 在处理字体文件时可能会自动将其转换为 Base64 格式，但当 `.ttf` 文件大小超过 40KB 时，可能无法正确转换，导致移动端不显示图标[^3]。此时需要手动将 `.ttf` 文件转换为 Base64 格式。 可以使用在线工具或脚本将 `.ttf` 文件转换为 Base64 字符串，并替换 `iconfont.css` 中的相应部分。例如： ```css @font-face { font-family: 'iconfont'; src: url('data:application/font-ttf;charset=utf-8;base64,AAEAAAA...') format('truetype'); } ``` #### 5. 使用图标 在页面中通过类名使用图标。例如，如果图标对应的类名为 `icon-example`，则可以在模板中这样使用： ```html <view class="iconfont icon-example"></view> ``` ### 注意事项 - 确保 `iconfont.css` 文件中的字体路径与实际存放位置一致[^2]。 - 如果需要支持多端（H5、小程序、App），建议测试每个平台上的显示效果，必要时调整字体文件格式或编码方式。 ```python # 示例代码：检查字体文件路径是否正确 def check_font_path(css_file, font_directory): with open(css_file, 'r', encoding='utf-8') as file: content = file.read() if font_directory not in content: return False return True ```