如何在电脑和手机上显示相同的字体粗细？答案

【问题标题】：How to display the same font weight on pc and mobile?如何在电脑和手机上显示相同的字体粗细？
【发布时间】：2019-07-05 21:20:20
【问题描述】：

我正在尝试在我的网站上显示 Google 字体 Proxima Nova，通过以下方式实现它：

@import url('https://fonts.googleapis.com/css?family=Proxima+Nova:400,600,700&subset=latin,latin-ext');

当我将 font-weight 设置为 700 时，它在 pc 和 Android chrome 上都能很好地显示。
问题是，当我将字体粗细更改为 600（半粗体）时，在电脑上看起来应该如何，但在移动设备上显示为 700（粗体）。我读到当字体粗细不存在时，浏览器会自动选择最近的。是加载问题吗？ Android没有加载字体粗细600吗？

编辑：
我现在注意到，Android 的大写 S 的两个边缘完全水平，而在 pc 上，在所有重量上，它们都是 45 度。
现在我认为这不再是加载问题了。

也许谷歌字体上的字体因设备而异。

编辑 2：
这是屏幕截图。
我是盲人还是他们完全不同？

我该怎么办？

【问题讨论】：

可能只是渲染问题。浏览器会以不同的方式呈现字体。很确定 Proxima Nova 应该有所有不同的厚度，所以我希望 600 看起来与 700 不同。不过我有兴趣查看屏幕截图。
@abney317 请看一下编辑

标签： html css mobile fonts

【解决方案1】：

这似乎是 a bug 与 Chrome for Android 对本地字体的字体处理。

字体导入会生成如下内容：

src: local('Proxima Nova Bold'), local('ProximaNova-Bold'), url(https://fonts.gstatic.com/l/font?kit=FwZD7-Am2FI_-VOxaLDvvq2zGUau84_G&skey=470ea9b7edd795d7&v=v11) format('woff2');

它没有回退到 url 源，而是使用默认的 Android 字体作为回退 (Roboto)

不幸的是，解决方案是下载字体并自己托管，然后从该位置引用字体。见answer on another question here

【讨论】：