uniapp 字体设置与使用方法

在uniapp中如何设置和使用自定义字体？具体步骤是什么？是否支持所有平台？需要注意哪些兼容性问题？

2 回复

在uniapp中设置字体，可在App.vue中全局引入字体文件，或页面内局部引入。使用font-family属性设置字体，注意兼容性，建议使用系统默认字体或网络字体。


在 UniApp 中设置和使用字体主要涉及全局字体配置、局部样式应用，以及自定义字体的引入。以下是具体方法：

1. 全局字体设置

在 App.vue 的 <style> 标签中定义全局字体样式：

page {
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

这会将默认字体应用到所有页面。

2. 局部字体设置

在单个页面的 <style> 标签中定义：

.custom-text {
  font-family: "CustomFont", sans-serif;
  font-size: 16px;
  font-weight: bold;
}

在模板中使用：

<view class="custom-text">自定义字体文本</view>

3. 引入自定义字体

  • 步骤 1：将字体文件（如 .ttf、.otf）放入 static/fonts/ 目录。
  • 步骤 2：在 App.vue 中通过 @font-face 定义字体：
@font-face {
  font-family: 'CustomFont';
  src: url('/static/fonts/YourFont.ttf') format('truetype');
}
  • 步骤 3：在样式中使用 font-family: 'CustomFont';。

4. 注意事项

  • 平台差异：部分字体在 iOS 和 Android 上显示可能不同，建议测试多平台。
  • 字体格式：推荐使用 .ttf 或 .otf 格式以兼容大多数设备。
  • 性能优化：自定义字体文件不宜过大，避免影响加载速度。

5. 动态字体切换

可通过 Vue 的响应式数据绑定动态修改字体类名：

<view :class="fontClass">动态字体文本</view>

export default {
  data() {
    return {
      fontClass: 'default-font'
    };
  },
  methods: {
    changeFont() {
      this.fontClass = 'custom-font';
    }
  }
};

通过以上方法，可以灵活地在 UniApp 中设置和使用字体。

回到顶部