为什么“Helvetica Neue”在我的 Windows 7 最新版本的 Chrome 上呈现效果不佳

为什么“Helvetica Neue”在我的 Windows 7 最新版本的 Chrome 上呈现效果不佳

下面是一张截图,显示了在我的 Windows 7 PC、Chrome 版本 46.0.2490.86 上“Helvetica Neue”的渲染效果有多差,这是一个简单的文件 HTML 页面,请注意图像中的位置栏 URL:

在此处输入图片描述

以下是整个 HTML 文件:

<h4 style="font-family: 'Helvetica Neue';">Helvetica Neue:</h4>
<div style="width: 500px;color:#000;font-family: 'Helvetica Neue';">
    Lorem ipsum dolor sit amet, ius at esse nonumy similique, 
    ea quo erat mollis. Quo mucius legendos appellantur et. Eum cetero verterem cu. 
    Ex mei stet dolorum, mei perpetua disputando in. Mei affert eruditi consetetur et, 
    has in sumo fugit scaevola. Te eros illud veniam quo, minimum antiopam eu mei.
</div>

<br />
<h4 style="font-family: Helvetica">Helvetica</h4>
<div style="width: 500px;color:#000;font-family: Helvetica">
    Lorem ipsum dolor sit amet, ius at esse nonumy similique, 
    ea quo erat mollis. Quo mucius legendos appellantur et. Eum cetero verterem cu. 
    Ex mei stet dolorum, mei perpetua disputando in. Mei affert eruditi consetetur et, 
    has in sumo fugit scaevola. Te eros illud veniam quo, minimum antiopam eu mei.
</div>
<h4 style="font-family: NotAFont">NotAFont</h4>
<div style="width: 500px;color:#000;font-family: NotAFont">
    Lorem ipsum dolor sit amet, ius at esse nonumy similique, 
    ea quo erat mollis. Quo mucius legendos appellantur et. Eum cetero verterem cu. 
    Ex mei stet dolorum, mei perpetua disputando in. Mei affert eruditi consetetur et, 
    has in sumo fugit scaevola. Te eros illud veniam quo, minimum antiopam eu mei.
</div>

我的 Windows 7 计算机上的 C:\Windows\Fonts 下没有安装“Helvetica Neue”:

在此处输入图片描述

使用 Font Expert 进行深入研究,因为 c:\Windows\Fonts 并不总是显示所有已安装的字体,所以仍然没有安装“Helvetica Neue”字体:

在此处输入图片描述

Helvetica Neue 不会在 chrome://settings/fonts 下显示:

在此处输入图片描述

根据 Chrome 开发者工具显示,渲染的字体系列确实是“Helvetica Neue”:

在此处输入图片描述

您可以看到 Helvetica 渲染得很好,没有什么意外,下面是 Chrome 中针对 Helvetica 的计算标签页:

在此处输入图片描述

在这里您可以看到,如果字体不存在并且 CSS 字体系列中没有其他字体,则我的 Chrome 设置将默认使用“Times New Roman”:

在此处输入图片描述

这里我们看到 Helvetica Neue 在 El Capitan Mac Safari 上渲染得很好:

在此处输入图片描述

使用完全干净的历史记录、设置、书签等时,也会出现同样的问题,如下所示:新的 Chrome 会话“:

在此处输入图片描述

您可以在新的 Chrome 会话开发者工具中看到“Helvetica Neue”的计算字体仍然是 Helvetica Neue:

在此处输入图片描述

这是我机器上的 Firefox,它说“Helvetica Neue”的计算字体是 Helvetica Neue,尽管至少字体呈现清晰易读,并且毫不奇怪,它与“NotAFont”是相同的字体,这意味着 Firefox 开发者工具的计算列不会像 Chrome 开发者工具那样告诉您实际使用的字体:

在此处输入图片描述

我的 DPI 是 96,我的屏幕分辨率是 1920 x 1080。

因此,可以证明字体没有安装在我的计算机的 Windows/Fonts 目录中,也可以证明字体没有以 .woff、.ttf、.eot 或 .svg 文件的形式从服务器传送给我。

我尝试过的解决方案:

1)将以下内容添加到C:\Users\YOURUSERNAME\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css:

@font-face { font-family: 'helvetica neue'; src: local('Arial'); } @font-face { font-family: 'helvetica neue'; font-weight:bold; src: local('Arial'); } @font-face { font-family: 'Helvetica Neue'; src: local('Arial'); } @font-face { font-family: 'Helvetica Neue'; font-weight:bold; src: local('Arial'); }

我尝试的第一个解决方案的参考 https://productforums.google.com/forum/#!topic/chrome/J4dqHZD3dcs https://www.youtube.com/watch?v=fjk1dAR0Z5w

2)将以下内容添加到我在此问题中使用的基于文件的 test.html 页面中:

<style>
  html, body {
        text-rendering: optimizeSpeed !important;
}
</style>

解决方案2)参考 https://productforums.google.com/forum/#!topic/chrome/J4dqHZD3dcs

这篇文章的评论中有一个有趣的建议:http://www.hanselman.com/blog/InstallingHelveticaNeueFontsWithGoogleChromeOnWindowsConsideredHarmful.aspx

这是因为您使用的 Helvetica Neue 是用于打印而不是用于网络显示的。去买一种真正用于网络的 Helvetica 字体吧 - Neue Haas Grotesk。这是专为网络设计的 Helvetica 字体 ;)

“Helvetica Neue” 真的是用于印刷吗?如果是,那为什么它在网页设计中如此流行?

Chrome 开发者工具的计算选项卡怎么可能显示计算字体是“Helvetica Neue”?

既然 Chrome 在某处找到了“Helvetica Neue”,为什么它的渲染效果这么差?

答案1

在您的 FontExpert 屏幕截图中,显示您安装了两种 Helvetica 字体。您是否尝试过暂时删除其中一个或两个?

您没有一种名为‘Last Resort’的字体,是吗?

您在 Chrome Canary 和 Opera 34 中遇到同样的问题吗?

你引用的两个 GPF 主题相当老了 - 你是否读过一些较新的主题https://productforums.google.com/forum/#!topicsearch/%22helvetica$20neue%22

相关内容