uniapp 字体设置
全局字体设置
在 App.vue 文件中通过 CSS 设置全局字体样式，确保所有页面继承该设置：
/* App.vue */
page {
font-family: "PingFang SC", "Helvetica Neue", sans-serif;
}单页面字体设置
在特定页面的 <style> 标签中覆盖全局字体：
/* 页面.vue */
.custom-font {
font-family: "Alibaba PuHuiTi", Arial, sans-serif;
}动态切换字体
通过条件类名或行内样式实现动态字体切换：
<template>
<view :class="[useCustomFont ? 'custom-font' : '']">动态字体示例</view>
<view :style="{fontFamily: dynamicFont}">行内样式示例</view>
</template>
<script>
export default {
data() {
return {
useCustomFont: true,
dynamicFont: "Microsoft YaHei"
}
}
}
</script>引入自定义字体文件
将字体文件放入 static/fonts 目录，通过 CSS @font-face 定义：
@font-face {
font-family: 'MyFont';
src: url('/static/fonts/myfont.ttf') format('truetype');
}平台差异处理
使用条件编译处理各平台字体兼容性：
/* #ifdef MP-WEIXIN */
page {
font-family: -apple-system, BlinkMacSystemFont;
}
/* #endif */
/* #ifdef APP-PLUS */
page {
font-family: Roboto, sans-serif;
}
/* #endif */字体大小适配方案
使用 rpx 单位实现响应式字号：
.text-sm {
font-size: 24rpx; /* 在750设计稿中对应12px */
}
.text-lg {
font-size: 32rpx; /* 在750设计稿中对应16px */
}字体权重设置
通过 font-weight 设置不同字重：
.bold-text {
font-weight: 600;
}
.light-text {
font-weight: 300;
}注意事项
- iOS 系统推荐使用 San Francisco 或 PingFang 字体族
- Android 推荐使用 Roboto 或 Noto 字体族
- 小程序环境需注意部分自定义字体可能无法生效
- 中文字体文件较大，应考虑按需加载
