时间戳

首页 > 解决方案 > 如何在电脑和手机上显示相同的字体粗细？

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

问题描述

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

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

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

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

也许谷歌字体上的字体在设备之间是不同的。

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



我应该做些什么？

标签： htmlcssmobilefonts

解决方案

这似乎是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）

不幸的是，解决方案只是下载字体并自己托管并从该位置引用字体。在此处查看另一个问题的答案

推荐阅读