微信小程序 加载本地 t.woff

对于微信小程序加载本地的 t.woff 字体文件，可以按照以下步骤进行操作：

1. 在小程序的根目录下创建一个名为 fonts 的文件夹，并将 t.woff 字体文件放入其中。

2. 在 app.wxss 文件中添加以下代码：

@font-face {
  font-family: 'CustomFont';
  src: local('t.woff'),
  url('/fonts/t.woff') format('woff');
}

其中，font-family 可以自定义，src 中的 local('t.woff') 表示本地已安装该字体，url('/fonts/t.woff') 表示在 fonts 文件夹下的 t.woff 文件路径，format('woff') 表示字体文件的格式。

3. 在需要使用该字体的页面或组件的 wxss 文件中添加以下代码：

// 全局引用
body {
  font-family: 'CustomFont';
}

// 局部引用
.custom-class {
  font-family: 'CustomFont';
}

其中，'CustomFont' 对应上面定义的 font-family 名称，可以全局或局部引用。

这样就可以在微信小程序中加载本地的 t.woff 字体文件了。

相关问题

微信小程序 app.loadFont()

`app.loadFont()` 是微信小程序中用于加载自定义字体的一种API。它允许开发者在小程序中使用非内置的字体，提高设计的灵活性。当你需要在页面上显示特定的特殊字符或定制样式时，可以先通过这个方法加载字体文件，然后设置组件（如`text`、`button`等）的`fontFamily`属性，使其使用已加载的字体。

例如，以下是使用`app.loadFont()`的一般步骤：

1. 在项目目录下创建一个字体文件，通常以`.ttf`或`.woff`格式保存。
2. 在`app.json`文件的`resources`字段中添加字体文件路径，像这样引用：

   "resource": {
     "font": [
       {
         "src": "your-font.ttf",
         "weight": "400"
       }
     ]
   },

3. 在需要的地方调用`loadFont`函数并传入字体名称：

   Page({
     onLoad: function(options) {
       wx.loadFont({
         name: 'your-font', // 字体名与资源文件名一致
         success: function() {
           console.log('字体加载成功');
           // 现在可以设置组件的fontFamily为'your-font'
           this.setData({
             textStyle: { fontFamily: 'your-font' }
           });
         },
         fail: function(err) {
           console.error('加载字体失败:', err);
         }
       });
     }
   })

微信小程序引入iconfont

### 如何在微信小程序中集成和配置 Iconfont 图标字体

#### 准备工作
为了能够在微信小程序项目里使用 Iconfont 的图标，首先需要注册账号并登录到 [Iconfont](https://www.iconfont.cn/) 平台，在线创建属于自己的图标的集合[^3]。

#### 获取图标代码
挑选好所需的图标之后，可以下载对应的 `iconfont.css` 文件以及获取用于嵌入页面的 `<text>` 标签语法。对于微信小程序而言，通常会采用本地化的方式加载这些资源而不是通过网络请求来提高性能[^2]。

#### 安装 mini-program-iconfont-cli 工具
考虑到直接操作文件可能带来的不便，推荐利用命令行工具 `mini-program-iconfont-cli` 来简化这个过程。安装该工具可以通过 npm 或者 yarn 实现：

npm install -g mini-program-iconfont-cli

或者

yarn global add mini-program-iconfont-cli

此工具能够帮助开发者更方便地管理 iconfont 字体文件，并将其适配至微信小程序环境之中[^1]。

#### 配置与应用
完成上述准备工作后，按照以下步骤继续设置：
- 将下载得到的 `.ttf`, `.woff` 等格式的字体文件放置于项目的合适位置；
- 修改 app.wxss 或 page.wxss 中的相关样式表规则以引用这些字体文件；
- 在 WXML 页面结构内适当的位置加入形如 `<text class="iconfont icon-xxx"></text>` 的标签实例；

具体来说，可以在全局或局部 CSS 文件中添加如下定义以便正确显示图标字符：

@font-face {
  font-family: 'iconfont';
  src: url('/path/to/iconfont.ttf') format('truetype');
}

.iconfont {
  font-family:"iconfont" !important;
}

最后一步就是确保所使用的类名（即这里的 "icon-xxx"）匹配实际上传至 Iconfont 上面的名字空间了。