H5移动端font-weight兼容性

前言

在移动端浏览器中，font-weight: 700（bold）通常可以正常显示，但 font-weight: 800 和 900 的兼容性较差，尤其在中文字体或部分系统字体上可能失效。以下是具体限制和解决方案：

---

一、核心限制分析

1. 字体支持不完整

   • 安卓默认中文字体（如 Noto Sans）通常仅支持 400（normal）和 700（bold），不支持中间值（500/600）或更高值（800/900） 。
   • iOS 字体（如 PingFang）支持更全（100~600），但 800/900 仍需具体字体文件支持。

2. 浏览器渲染差异

   • 安卓 Chrome/微信小程序：font-weight: 600 可能被回退到 400，800/900 回退到 700。
   • iOS Safari：对 600 支持较好，但 800/900 若字体未提供对应字重，可能渲染为 700。

3. 中英文区别
   英文（如 Roboto）支持完整字重（100~900），但中文因字体体积限制，多数仅提供 400 和 700。

---

二、兼容性解决方案

1. 优先使用标准字重值

• 用 bold（700）替代 800/900，用 normal（400）替代中间值（500/600）。

• 示例代码：

  .title { font-weight: bold; } /* 兼容所有设备 */
  

2. 分平台适配样式

• 方法一：CSS 媒体查询

  /* 安卓：强制使用 bold */
  @media screen and (max-width: 768px) {
    .bold-text { font-weight: bold !important; }
  }
  /* iOS：保留 800 */
  @media screen and (-webkit-touch-callout: none) {
    .bold-text { font-weight: 800; }
  }
  

• 方法二：特性检测（推荐）
  通过 @supports 区分 iOS 设备：

  .text {
    font-weight: bold; /* 安卓和默认 */
  }
  @supports (-webkit-touch-callout: none) {
    .text {
      font-weight: 800; /* 仅 iOS 生效 */
    }
  }
  

3. 指定跨平台字体栈

使用通用字体族，确保字重支持：

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
}

• -apple-system（iOS）、Roboto（安卓）等字体支持更多字重。

4. 自定义字体（谨慎使用）

引入支持多字重的 Web 字体，但需注意中文字体体积过大：

@font-face {
  font-family: "CustomFont";
  src: url("font-black.woff2") format("woff2");
  font-weight: 900; /* 明确声明字重 */
}
.text { font-family: "CustomFont", sans-serif; }

5. 自动化工具

使用 PostCSS 插件（如 postcss-pingfang-weight）自动将 font-family: PingFangSC-Medium; 转换为分平台字重代码。

---

三、移动端字重支持总结

字重值	安卓支持	iOS支持	推荐替代方案
700	✅ 稳定	✅ 稳定	font-weight: bold;
800/900	❌ 多数失效	⚠️ 需字体支持	分平台适配或回退到 700

---

总结建议

1. 避免使用 800/900：优先用 bold（700）确保兼容性。
2. 中文字体需分平台处理：通过 @supports 或媒体查询为 iOS 单独设置高字重。
3. 测试覆盖真机：在安卓/iOS 真机验证字重渲染，尤其关注华为、小米等常见机型。

字体渲染一致性是移动端的老大难问题，优先用标准值、分平台适配、少依赖中间字重，能避开90%的坑。设计上也要考虑移动端字重的局限性，避免过度依赖字重差异实现视觉层次。