在做微信小程序的时候，都会被字体这个问题卡住。你可能会发现，明明在代码里写好了“华文行楷”或者“思源黑体”，结果在真机上一跑，完全不是那么回事。这不是你写错了，而是小程序对字体的处理方式，跟普通网页有本质区别。

微信小程序的字体渲染，受限于手机系统。iOS 系统自带一套字体，Android 系统又是另一套。你写一个 font-family: 'PingFang SC'，在 iPhone 上确实能显示漂亮的苹方字体，可到了小米或者华为手机上，系统如果没有这个字体，就会自动降级成默认的思源黑体或者 Noto Sans。这就像你点了一份牛排，结果餐厅告诉你“今天没有，给您换成红烧肉”，虽然也能吃，但味道完全变了。

真正让小程序字体“好看”的核心，不在于你选了什么字体名字，而在于你如何利用系统自带的字体栈，以及如何巧妙地引入外部字体资源。

一、系统字体栈的黄金组合

我见过很多开发者，在字体设置上只写一个 font-family: '微软雅黑'。这在 Windows 电脑上预览没问题，可一旦到了手机端，iOS 系统压根不识别“微软雅黑”，它会直接跳到系统默认的苹方字体。苹方字体本身是好看的，但问题在于，如果你只指定了一个字体，系统没有任何备选方案，一旦遇到不支持的，就全盘崩溃。

正确的做法是写一个字体栈，像搭积木一样，把不同系统的优秀字体按优先级排列。比如：

font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', 'Arial', sans-serif;

这个组合的意思是：优先用 iOS 的苹方字体，如果不行，就降级到 Android 上的微软雅黑（部分国产安卓确实内置了），再不行就用 Helvetica Neue，最后用通用的无衬线字体兜底。这样在任何手机上，显示效果都不会太差。

但要注意，微软雅黑在手机端其实并不好看。它的设计初衷是屏幕阅读，但在高分辨率的小屏幕上，笔画偏粗，显得有点“糊”。相比之下，苹方字体（PingFang SC）是目前手机端最均衡的字体，它针对 Retina 屏幕做了优化，笔画干净利落。如果你想让 Android 用户也享受到类似的效果，可以把 Noto Sans SC 加进去。这是 Google 专门为中文设计的无衬线字体，在大部分安卓手机上都有内置。

font-family: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;

这套组合，基本能覆盖 90% 以上的手机。但如果你想要更独特的效果，比如文艺风的“宋体”或者“楷体”，那就得用到自定义字体了。

二、自定义字体：用 @font-face 引入外部字体

小程序支持通过 @font-face 引入自定义字体文件，但有一个巨大的坑：字体文件不能太大。微信官方规定，单个字体文件不能超过 2MB，而且加载速度会直接影响用户体验。你不可能像做网页一样，直接引用一个 10MB 的思源宋体完整版。

解决方案是使用字体子集化。简单来说，就是把字体文件里你用不到的字全部删掉。比如你的小程序只展示“今日天气”这四个字，那就只保留这四个字的字形数据，文件大小能缩减到几十 KB。网上有很多在线工具可以帮你做子集化，比如“字蛛”或者“Fontmin”。

操作步骤：

1. 去一个有版权许可的字体网站下载你想要的字体文件（比如“站酷文艺体”或者“庞门正道标题体”）。注意，不要用商业字体，除非你买了授权。
2. 打开 Fontmin 软件（或者在线工具），把字体文件拖进去，再输入你的小程序里会用到的所有文字。
3. 点击生成，得到一个压缩后的子集字体文件，通常只有几十到几百 KB。
4. 把这个文件上传到你的小程序云开发存储，或者放到自己的 CDN 服务器上，拿到一个 HTTPS 链接。
5. 在 app.wxss 或者页面的 wxss 里写：

@font-face {
  font-family: 'MyCustomFont';
  src: url('https://你的链接/字体文件.woff') format('woff');
}

.text {
  font-family: 'MyCustomFont', 'PingFang SC', sans-serif;
}

这样，你页面里使用了 .text 类的元素，就会优先显示自定义字体。但要注意，自定义字体只对静态文本有效，如果文本内容是动态从后台获取的，那你需要在子集化时把所有可能出现的字都包含进去，否则没包含的字会显示成空白或者乱码。

三、好看的字体不只有“花哨”这一种

觉得“好看的字体”就是那种手写体或者艺术字体，比如“叶根友”或者“方正静蕾体”。但实际上，在小程序这种功能性的场景里，字体的可读性比风格更重要。你做一个电商小程序，商品标题用龙飞凤舞的手写体，用户可能连价格都看不清。

我建议你根据小程序的不同模块，搭配不同的字体风格：

• 标题和品牌文案：可以用一些有设计感的字体，比如“站酷文艺体”或者“思源宋体”。这些字体有笔画粗细变化，能增加视觉层次感。举个例子，一个读书类的小程序，用“思源宋体”做书名标题，比用黑体更有书卷气。
• 正文和说明文字：坚持用系统默认的苹方或者 Noto Sans。这些字体经过专业优化，在小字号下依然清晰。不要为了“好看”而牺牲易读性，用户是来用功能的，不是来欣赏书法展的。
• 按钮和操作提示：用粗体或者中粗体，比如 font-weight: 600 的苹方。按钮上的文字需要足够醒目，太细的字体在手机上会显得“虚”。

另外，字重（font-weight）的调整往往比换字体更有效。很多开发者只关注字体名字，却忽略了字重。苹方字体有 6 种字重，从 UltraLight 到 Heavy。同样一段文字，用 Regular（400）和 Medium（500）看起来完全是两种感觉。你可以试试把正文的 font-weight 从默认的 400 改成 350，你会发现文字突然变得“轻盈”了，阅读起来更舒服。

四、一个容易忽略的细节：行高和字间距

字体好看不好看，不只是字体本身的问题。同样的“苹方字体”，如果你把行高设成 1.2，文字会挤在一起，显得很“闷”；如果把行高设成 1.8，又太松散，看着像“散架”了。我测试下来，中文字体最舒服的行高在 1.5 到 1.7 之间。

字间距（letter-spacing）也很关键。默认的 letter-spacing: normal 在手机上有点偏紧，你可以尝试设成 1px 或者 0.5px。这个微小的改动，能让文字看起来更“透气”，尤其是当你的小程序背景是深色时，适当的字间距能避免文字“糊”在一起。

举个例子，一个小程序的商品详情页：

.product-title {
  font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
  font-weight: 600;
  font-size: 32rpx;
  line-height: 1.6;
  letter-spacing: 1px;
  color: #1c1c1e;
}

这样设置之后，即使不用任何花哨的字体，视觉效果也会比默认配置好很多。

五、实际案例：一个文艺风小程序的字体搭配

我帮一个朋友做过一个“诗词日历”小程序，他的要求是“看起来像一本古书，但又不能太老旧”。我们最终用了两套字体：

1. 标题（诗词名）：用子集化后的“思源宋体 Heavy”，字号 40rpx，颜色用深棕色 #4a2c1b。宋体的横细竖粗，配合重字重，显得厚重但不笨重。
2. 正文（诗词内容）：用系统自带的苹方字体，但把 font-weight 调成了 350（极细），字号 28rpx，颜色用浅灰色 #5a5a5a。这样正文和标题形成鲜明对比，视觉上有层次感。
3. 注释和作者：用楷体，但楷体在手机上容易出现笔画粘连的问题。所以我们用了 font-family: 'KaiTi', 'STKaiti', serif;，并配合 line-height: 1.8 来增加间距。效果出奇的好，用户反馈说“像在读一本真正的书”。

这个案例说明，好看的字体不是靠一个“炫酷”的字体文件撑起来的，而是靠字体之间的搭配、字重、行高、颜色这些细节共同作用的结果。

六、避坑指南：这些做法会让字体变丑

• 不要用 text-decoration 来给文字加下划线。很多开发者为了强调，给文字加了下划线，但在手机上，下划线会紧贴着文字底部，显得很“脏”。如果你需要强调，改用 border-bottom 并设置 padding-bottom，这样下划线和文字之间会有空隙，看起来干净很多。
• 不要在深色背景上用纯白色字体。纯白色（#FFFFFF）在深色背景上会刺眼，而且容易产生“光晕”感。改用 #f0f0f0 或者 #e0e0e0，眼睛会舒服很多。
• 不要在小程序里用“斜体”。中文的斜体其实是“伪斜体”，是系统通过算法把正体字倾斜得到的，笔画会变形，看起来很假。如果你需要强调，用粗体或者换个颜色。

最后说一句，字体这件事，多测试真机。模拟器上看到的字体效果，和真机完全是两回事。你可以在微信开发者工具里预览，但一定要拿自己的手机跑一遍。不同品牌、不同系统版本的手机，字体渲染差异很大。只有亲自看过，你才知道用户真正看到的是什么样子。