微信小程序默认字体是什么？如何自定义修改

微信小程序的默认字体并非单一字体，而是一个根据操作系统动态变化的字体族。在iOS系统上，默认字体为San Francisco（SF UI Text/Display），这是苹果系统的原生字体。而在Android系统上，默认字体则为Roboto，这是谷歌设计的系统字体。

为了确保在不同平台和设备上的兼容性与优雅降级，微信小程序还设置了备用的字体栈。当上述系统字体不可用时，会依次回退到Helvetica Neue、Helvetica、Arial，最后是sans-serif无衬线字体族。这个机制保证了文本内容在任何环境下都能清晰、可读地显示。

为何需要自定义字体

虽然系统默认字体在兼容性和性能上表现优异，但在以下场景中，开发者通常有自定义字体的需求：

• 品牌一致性：使用品牌专属字体，强化品牌形象和视觉识别。
• 特殊设计需求：为了营造特定的视觉风格或氛围，如中国风、可爱风等。
• 提升可读性：针对特定内容（如长文阅读），选择更优的阅读字体。

需要注意的是，引入外部字体会增加小程序的包体积和网络请求，需权衡视觉效果与性能开销。

使用网络字体进行全局修改

这是最常用且效果最彻底的自定义字体方法，适用于需要在整个小程序中统一使用某款特定字体的情况。

操作步骤如下：

1. 在`app.wxss`全局样式文件中，使用`@font-face`规则引入网络字体。
2. 定义全局样式，将自定义字体应用于所有页面。

以下是一个完整的示例：

/* 1. 引入网络字体 */
@font-face {
font-family: 'MyCustomFont';
src: url('https://example.com/fonts/MyFont.woff2') format('woff2');
font-weight: normal;
font-display: swap;
/* 2. 设置为全局默认字体 */
page {
font-family: 'MyCustomFont', -apple-system, BlinkMacSystemFont, sans-serif;
}

通过以上设置，小程序中的所有文本将优先使用”MyCustomFont”，如果加载失败则会回退到系统默认字体。

在页面或组件中局部使用自定义字体

如果只需要在特定页面或组件中使用特殊字体，可以采用局部引入的方式，这样可以有效控制包体积。

实现方法：

• 在页面对应的`.wxss`文件中，使用`@font-face`引入字体。
• 将该字体应用于页面内特定的CSS类。

示例代码如下：

/* 在 page.wxss 中 */
@font-face {
font-family: 'LocalFont';
src: local('PingFang SC'), /* 尝试使用本地字体，优化体验 */
url('/fonts/local-font.woff') format('woff');
.special-title {
font-family: 'LocalFont', sans-serif;
font-size: 18px;
}

这样，只有使用了`.special-title`类的元素才会应用该自定义字体。

使用本地字体文件

为了提升加载速度和用户体验（无需等待网络下载），可以将字体文件放在小程序项目目录中。

步骤与注意事项：

1. 将字体文件（如`.ttf`, `.woff`, `.woff2`）放入项目目录，例如`/fonts/`文件夹。
2. 在WXSS文件中使用相对路径引用该字体文件。

@font-face {
font-family: 'LocalFileFont';
src: url('/fonts/my-local-font.woff2') format('woff2');
}

重要提醒：使用本地字体文件会直接增加小程序的包体积。微信小程序对代码包有大小限制（主包与所有分包总和不超过20MB），需谨慎使用，尤其对于体积较大的中文字体文件。

最佳实践与性能优化建议

自定义字体虽好，但不当使用会影响性能。以下是一些关键建议：

• 字体格式选择：优先使用`WOFF2`格式，它具有更高的压缩率，能减少文件体积和加载时间。
• 善用`font-display`属性：将其设置为`swap`，可以避免字体加载期间出现空白页（FOIT），提升用户体验。
• 字体子集化：如果只需使用字体中的部分字符（如仅数字和英文），可以使用工具提取所需字符，生成字体子集，能极大减小文件体积。
• 按需加载：仅在需要的页面引入字体，避免全局引入不必要的字体。

遵循这些实践，你就能在打造精美视觉的保证小程序的流畅运行。