css - Windows字体问题以及如何为客户调试

标签 css fonts

最近有一位客户发送了一张票,提示他们的字体已更改(在一周左右的时间内)。该网站上的字体可能已经有十年没有改变了。我怀疑的是,也许最近一次与更改一致的窗口正在影响他看到的字体,或者更可能的是,他的设置发生了变化。

我们使用的字体

font-family: "Helvetica Neue",Helvetica,Arial,sans-serif

据我了解,Helvetica Neue 可能会被 Windows 上的其他字体取代,因为仅通过谷歌搜索,我发现 Windows 中不包含该字体。

我的问题是,有什么办法可以帮助他调试这个问题,以弄清楚究竟发生了什么吗?它确实使该用户难以阅读该网站,我想修复它,并且也确切地知道我在说什么。我通常会努力不只是回复“在我的机器上看起来不错”。检查它显示与我上面发布的相同的字体系列。

该 css 中的字体选项似乎都不是所显示的。

我在字体中看到的一个显着特征是字母de重叠或接触。

enter image description here

这是针对网络内容的,浏览器提到了最新的 Chrome,我也在其中进行了测试(验证了完全相同的版本号)并且没有出现问题,而 Edge 则没有。

最佳答案

如果您无法访问他们的计算机,则很难查明确切原因。 Windows 字体替换是这种情况下的常见罪魁祸首:

如下所述:

https://office-watch.com/2021/windows-substituting-arial-font-for-helvetica/

“Windows 设置为在看到“Helvetica”引用时使用 Arial。这种情况发生在 Windows 级别,并且不仅仅适用于 Microsoft Office。大多数 Web 浏览器都会得到相同的结果 – 要求“Helvetica”的网页在网页中显示的“Helvetica”将改为 Arial 字体。这让网页设计人员抓狂,尤其是因为 CSS 可以从一系列首选字体中进行选择。

Windows 注册表的深处是 HCLM\SOFTWARE\Microsoft\Windows\NTCurrentVersion\FontSubstitutes,它列出了替换内容。”

enter image description here

此外,如果您使用您提到的单词 video 对 arial 与 helvetica neue 进行比较,您会得到以下结果:

enter image description here

请注意字符“d”和“e”之间字距调整(字母/字符之间的分隔)的差异。与 Helvetica Neue 相比,Arial 显得“拥挤”。

关于css - Windows字体问题以及如何为客户调试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70973412/

相关文章:

css - 将颜色定义转换为在 SASS 中设置背景颜色的类

javascript - 将文本限制为 x 行数并附加 '...'

android - 在自定义 View 类中的何处设置自定义字体(扩展按钮)?

user-interface - 界面研究是否表明 Arial 优于 Verdana/Tahoma(用于屏幕阅读)

javascript - Jquery 切换两个或多个类

css - 背景图片的最佳实践

javascript - 函数只运行一次

css - 使用 Ruby Gem 不显示 Font Awesome 图标

css - 如何缩小 Google 字体 CSS

php - HTML:到当前目录的超链接?