Android系统下的标题字重（font weight）无法被正确渲染

[ChisakaKanako]

Describe the bug

在Android系统下，页面内的标题字重（非英语）无法被正确渲染，始终与正文字重保持一致

Reproduction

使用Website Screenshot API可以得到同样的结果

Expected behavior

非英文标题字重应与英文标题字重一致

System Info

Android

Additional context

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[L33Z22L11]

你的手机使用了只有单一字重的自定义字体，VitePress通过CSS font-synthesis禁用了合成的粗体，因此页面上的手机系统字体呈现为单一字重。

[ChisakaKanako]

你的手机使用了只有单一字重的自定义字体，VitePress通过CSS font-synthesis禁用了合成的粗体，因此页面上的手机系统字体呈现为单一字重。

[L33Z22L11]

看起来图中夸克浏览器未遵守网页的字体设置，变成了另一种更为诡异的情况。夸克浏览器符合预期的渲染应当如下图所示：

VitePress定义英文字体使用网络字体Inter（原生具备粗细字重），因此在CSS font-synthesis禁用合成粗体的情况下，英文能保持原有的粗细，而中文由于自定义字体质量不如系统字体，所以显示为单一字重。

CSS font-synthesis禁用合成粗体是符合VitePress设计的行为，它能阻止浏览器合成劣质的粗体而影响显示效果。要想解决此问题，要么让VitePress站点恢复初始的font-synthesis规则，要么用户需要恢复系统默认字体或者使用高质量的自定义字体。

[ChisakaKanako]

并非自定义字体导致，默认字体同样存在此问题，见下图：

看起来图中夸克浏览器未遵守网页的字体设置，变成了另一种更为诡异的情况。夸克浏览器符合预期的渲染应当如下图所示：

VitePress定义英文字体使用网络字体Inter（原生具备粗细字重），因此在CSS font-synthesis禁用合成粗体的情况下，英文能保持原有的粗细，而中文由于自定义字体质量不如系统字体，所以显示为单一字重。

CSS font-synthesis禁用合成粗体是符合VitePress设计的行为，它能阻止浏览器合成劣质的粗体而影响显示效果。要想解决此问题，要么让VitePress站点恢复初始的font-synthesis规则，要么用户需要恢复系统默认字体或者使用高质量的自定义字体。

[L33Z22L11]

简体中文需要使用对应地区的设备来测试，非本地区的设备一般不具有完整的中文字体支持。图中的设备可能使用了文泉驿微米黑，此字体体积小，常用于其他地区设备的中文显示，不支持粗体字重。要想解决此问题，要么让VitePress站点解除font-synthesis限制，要么用户需要恢复简体中文系统默认字体或者使用高质量的简体中文自定义字体。

:root {
  font-synthesis: initial;
}

[L33Z22L11]

对于题图中的韩语显示问题，也是相同的解释：非当地的设备，尤其是测试环境往往只有简陋的多语言字体支持；VitePress为了可读性通过CSS阻止浏览器为这些简单的单字重字体合成粗体，所以产生了“标题字体未加粗”的现象。

[ChisakaKanako]

简体中文需要使用对应地区的设备来测试，非本地区的设备一般不具有完整的中文字体支持。图中的设备可能使用了文泉驿微米黑，此字体体积小，常用于其他地区设备的中文显示，不支持粗体字重。要想解决此问题，要么让VitePress站点解除font-synthesis限制，要么用户需要恢复简体中文系统默认字体或者使用高质量的简体中文自定义字体。

:root {
font-synthesis: initial;
}

感谢建议，但应用此代码后依然无法解决上述问题

[L33Z22L11]

感谢建议，但应用此代码后依然无法解决上述问题

因为:root 在 HTML 里指代 html 选择器，而 VitePress 的 font-synthesis 挂在 body 选择器上，会覆盖掉顶层的设置。你需要将选择器改为 body，并通过 DevTools 检查 CSS 是否生效。

[ChisakaKanako]

感谢建议，但应用此代码后依然无法解决上述问题

因为:root 在 HTML 里指代 html 选择器，而 VitePress 的 font-synthesis 挂在 body 选择器上，会覆盖掉顶层的设置。你需要将选择器改为 body，并通过 DevTools 检查 CSS 是否生效。

依旧重复上述问题

[L33Z22L11]

感谢宝贵的实践，我在 https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-synthesis 页面上测试，只有页面上的书法字体能合成粗体，而其他手机自定义字体无法合成粗体，这并不只是VitePress或CSS font-synthesis的问题，链路上的许多问题都影响的字体展示。

如果认为粗体有必要展示，可以尝试从font-family中移除system-ui，我使用的小米手机会将sans-serif显示为内置的思源黑体。更好的办法是使用网络字体，可以参照 前端字体二三事#网络字体 一节的内容操作。

[L33Z22L11]

如果关注点在于「中英文的一致性」而不是「中文无法使用粗体」，可以在 docs/.vitepress/theme/index.ts 中将主题导入换为 import DefaultTheme from 'vitepress/theme-without-fonts'，实测既能使用手机自定义字体，中英文展示效果也一致：
https://wiki.cooo.site/campus/apps

[ChisakaKanako]

感谢宝贵的实践，我在 https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-synthesis 页面上测试，只有页面上的书法字体能合成粗体，而其他手机自定义字体无法合成粗体，这并不只是VitePress或CSS font-synthesis的问题，链路上的许多问题都影响的字体展示。

如果认为粗体有必要展示，可以尝试从font-family中移除system-ui，我使用的小米手机会将sans-serif显示为内置的思源黑体。更好的办法是使用网络字体，可以参照 前端字体二三事#网络字体 一节的内容操作。

感谢宝贵的建议...在尝试此方法后依旧存在上述问题

[ChisakaKanako]

如果关注点在于「中英文的一致性」而不是「中文无法使用粗体」，可以在 docs/.vitepress/theme/index.ts 中将主题导入换为 import DefaultTheme from 'vitepress/theme-without-fonts'，实测既能使用手机自定义字体，中英文展示效果也一致： https://wiki.cooo.site/campus/apps

这是一个很好的建议，我也认为应该从这个方向出发，但貌似这样也无法解决上述问题...

[L33Z22L11]

这是什么浏览器环境？看起来像是 Kiwi Browser，它已经停止维护了，目测浏览器内核可能在 89 上下，可以找个 UA 检测工具看看……目前 Kiwi 自动维护版的内核应该在 139。

另外，最好再确定一下 WebView、Android 版本，这个英文字体是 Roboto，如果回落到这个字体显示，说明系统的多语言字体可能过于简陋了……