UniApp的全局字体适配方案：轻松搞定多端字体显示
大家好，欢迎来到今天的讲座！今天我们要聊一聊如何在UniApp中实现全局字体适配。UniApp是一个非常强大的跨平台开发框架，能够帮助我们快速构建iOS、Android、H5、小程序等多个平台的应用。但是，不同平台的字体显示差异可能会让我们头疼不已。别担心，今天我会带你一步步搞定这个问题，让你的应用在各个平台上都能有统一且美观的字体显示 😊
1. 为什么需要字体适配？
首先，我们来聊聊为什么需要做字体适配。不同的设备和操作系统对字体的渲染方式是不一样的。比如，iOS系统默认使用的是San Francisco字体，而Android系统则使用Roboto字体。H5页面在不同浏览器中的字体表现也会有所不同。如果你不做任何处理，默认的字体可能会导致应用在不同平台上看起来不一致，甚至影响用户体验。
此外，不同屏幕尺寸和分辨率的设备也会对字体大小产生影响。如果字体过大或过小，都会影响用户的阅读体验。因此，我们需要一个全局的字体适配方案，确保应用在所有平台上都能有良好的视觉效果。
2. 使用rem单位进行字体适配
在UniApp中，最常用的字体适配方案是使用rem单位。rem是相对于根元素（即<html>标签）的字体大小来计算的。通过动态调整<html>标签的字体大小，我们可以实现响应式的字体适配。
2.1 动态设置<html>的字体大小
我们可以通过JavaScript来动态设置<html>标签的字体大小。这里有一个简单的代码示例：
// 在main.js中引入
function setRem() {
const html = document.documentElement;
const width = html.clientWidth;
// 假设设计稿宽度为750px，1rem = 100px
html.style.fontSize = (width / 7.5) + 'px';
}
// 监听窗口大小变化
window.addEventListener('resize', setRem);
setRem();这段代码的作用是根据屏幕宽度动态调整<html>标签的字体大小。假设我们的设计稿宽度为750px，那么1rem就等于100px。这样，当屏幕宽度发生变化时，字体大小也会随之调整，确保在不同设备上都能有合适的字体显示。
2.2 在样式中使用rem单位
接下来，我们在样式文件中使用rem单位来定义字体大小。例如：
/* 全局样式 */
body {
font-size: 0.32rem; /* 32px */
line-height: 1.5;
}
h1 {
font-size: 0.48rem; /* 48px */
}
p {
font-size: 0.36rem; /* 36px */
}通过这种方式，我们可以轻松地控制整个应用的字体大小，并且可以根据屏幕宽度自动调整。
3. 使用viewport进行适配
除了rem单位，我们还可以通过viewport来进一步优化字体适配。viewport可以帮助我们控制页面的缩放比例，确保在不同设备上都能有良好的显示效果。
3.1 设置viewport属性
在manifest.json中，我们可以配置viewport的相关属性。以下是常见的配置项：
{
"mp-weixin": {
"usingComponents": true,
"window": {
"navigationBarTitleText": "我的应用",
"backgroundColor": "#ffffff",
"backgroundTextStyle": "light",
"enablePullDownRefresh": true,
"pageOrientation": "portrait"
}
},
"h5": {
"title": "我的应用",
"template": "src/pages/index.html",
"router": {
"mode": "hash"
},
"meta": {
"viewport": "width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
}
}
}这里的viewport配置项指定了页面的宽度为设备的实际宽度，并且禁止用户手动缩放页面。这样可以确保页面在不同设备上都能有统一的显示效果。
4. 使用px2rpx插件
如果你觉得手动计算rem单位太麻烦，UniApp还提供了一个非常方便的工具——px2rpx插件。这个插件可以自动将px单位转换为rpx单位，rpx是微信小程序中常用的相对单位，1rpx等于屏幕宽度的1/750。
4.1 安装px2rpx插件
首先，我们需要安装px2rpx插件。在package.json中添加以下依赖：
{
"dependencies": {
"uni-app-px2rpx": "^1.0.0"
}
}然后，在main.js中引入插件：
import 'uni-app-px2rpx'4.2 使用rpx单位
安装完成后，我们就可以直接在样式中使用rpx单位了。例如：
body {
font-size: 32rpx;
line-height: 1.5;
}
h1 {
font-size: 48rpx;
}
p {
font-size: 36rpx;
}rpx单位会根据屏幕宽度自动调整，确保在不同设备上都能有合适的字体大小。
5. 处理不同平台的字体差异
虽然我们已经通过rem或rpx实现了字体的响应式适配，但不同平台的字体渲染仍然可能存在差异。为了确保应用在各个平台上都能有统一的字体显示，我们可以使用CSS的font-family属性来指定字体。
5.1 指定全局字体
我们可以在全局样式中指定一个通用的字体族，确保应用在不同平台上都能使用相同的字体。例如：
body {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}这段代码指定了一个跨平台的字体族，确保在iOS、Android和H5页面中都能使用合适的字体。
5.2 针对特定平台的字体
如果你希望为某些平台指定特定的字体，可以使用条件编译语法。例如，针对iOS平台使用San Francisco字体，针对Android平台使用Roboto字体：
/* #ifdef APP-PLUS */
body {
font-family: "Helvetica Neue", Arial, sans-serif;
}
/* #endif */
/* #ifdef MP-WEIXIN */
body {
font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}
/* #endif */
/* #ifdef H5 */
body {
font-family: "Arial", sans-serif;
}
/* #endif */通过这种方式，我们可以为不同平台指定不同的字体，确保应用在各个平台上都能有最佳的字体显示效果。
6. 总结
今天我们学习了如何在UniApp中实现全局字体适配。通过使用rem单位、viewport、px2rpx插件以及指定合适的字体族，我们可以轻松解决不同平台之间的字体差异问题。希望这些技巧能帮助你在开发过程中更加得心应手，让你的应用在各个平台上都能有统一且美观的字体显示 😎
最后，别忘了在实际项目中多测试、多调整，毕竟每个项目的需求和设计都不一样。祝大家开发顺利，再见！👋
