uni-app图标和字体的使用和引入方法

在uni-app中，图标和字体可通过引入外部字体文件或图标库实现，具体方法如下：

1. 准备字体文件

   支持格式：TTF、WOFF等常见字体格式。

   文件放置：将字体文件（如custom-font.ttf）放入项目的static目录。

2. 通过CSS引入字体

   在CSS文件中使用@font-face定义字体名称和路径：@font-face { font-family: 'CustomFont'; src: url('~@/static/custom-font.ttf') format('truetype');}

   关键点：

   font-family：自定义字体名称，后续通过该名称调用。

   src：使用~@/前缀确保路径正确指向static目录。

   format：根据字体格式填写（如truetype、woff）。

3. 应用自定义字体

   在CSS类中指定字体：.custom-font-class { font-family: 'CustomFont', sans-serif; /* 添加备用字体 */}

   在页面中使用该类：<view class="custom-font-class">自定义字体文本</view>

4. 注意事项

   性能优化：字体文件可能较大，建议压缩后使用，或仅引入必要字符（如通过工具生成子集）。

   兼容性：测试不同平台（iOS/Android/小程序）的显示效果，部分平台可能对字体格式支持有限。

1. 安装与引入

   安装组件（若未自动集成）：npm install @dcloudio/uni-ui

   在页面中引入组件：import uniIcons from '@/components/uni-icons/uni-icons.vue';export default { components: { uniIcons }}

2. 使用图标

   通过type属性指定图标类型，size和color调整样式：<uni-icons type="star" size="30" color="#007AFF"></uni-icons>

   优点：无需额外资源，支持多端兼容。

   缺点：图标种类有限，无法满足复杂需求。

1. 生成图标库

   访问

   iconfont官网
   ，选择图标加入项目，生成在线链接或下载文件。

   推荐：下载文件至本地以避免依赖网络，包含iconfont.css和字体文件（如.ttf、.woff）。

2. 放置文件到static目录

   将下载的CSS和字体文件放入static/iconfont子目录。

3. 引入图标库

   方式1：在App.vue或全局CSS中引入（推荐）：@import '~@/static/iconfont/iconfont.css';

   方式2：在页面中通过<link>引入（需确保路径正确）：<link rel="stylesheet" href="/static/iconfont/iconfont.css">

4. 使用图标

   图标类名由iconfont前缀和图标名称组成（如icon-star）：<text class="iconfont icon-star"></text>

   自定义样式：通过CSS调整大小、颜色：.iconfont { font-size: 24px; color: red;}

5. 注意事项

   私有库：将图标库设为私有以避免公共库更新导致样式异常。

   路径问题：确保CSS中字体路径正确，建议使用~@/前缀。

   性能优化：仅引入所需图标，或使用SVG雪碧图减少请求。

1. 减少资源数量：优先使用内置uni-icons，仅在必要时引入第三方库。
2. 压缩文件：使用工具压缩字体和CSS文件，降低加载时间。
3. 按需加载：通过条件编译或动态引入优化多端体验。
4. 路径检查：始终使用~@/前缀引用static目录，避免路径错误。

• 字体/图标不显示：

  检查控制台报错，确认路径是否正确。

  确保字体格式被目标平台支持（如小程序可能限制TTF格式）。

• 样式冲突：

  为自定义字体和图标类名添加唯一前缀（如my-icon-star）。

• 性能卡顿：

  限制自定义字体使用范围，避免全局应用。

  使用font-display: swap（CSS属性）减少字体加载时的空白期。

通过以上方法，可高效实现uni-app中的字体和图标管理，兼顾功能与性能需求。