在CSS中作为基本字体选择Helvetica还是Arial？

Question

我有一个朋友告诉我在你的网站中使用"font family：helvetica，arial，sans-serif"。当我问他为什么时，他不知道，他公司里的一些可用性专家告诉他这个东西。

但是当我尝试了“helvetica，arial，sans-serif”之后，我注意到加粗和取消加粗与此字体配对时不正常，而当我使用“arial，helvetica，sans-serif”时就可以正常工作。请注意这里的区别：http://hell.meiert.org/core/html/helvetica-arial.html 我在谷歌上搜索了这个问题，但没有看到任何让我信服的地方。然后我在SO上找到了一篇文章Is Helvetica a browser base font? 所以我想问为什么推荐使用Helvetica，同一篇文章中的一个答案说：“如果你想要Helvetica，你只能买一台Mac电脑”。因此使用这个字体看起来好看是因为MAC PC吗？

在我的网站中，当我将“arial…”作为基础字体时，在所有浏览器中都可以正常呈现→ html字符，但是当使用“Helvetica…”时，在Google Chrome中无法正确显示，为什么？

谢谢

- djmzfKnm

Answer 1

关于为什么推荐其中一种字体而不是另一种，根据我所做的研究，Helvetica字体族似乎更优秀。只要存在，它应该始终使用，这就是为什么你希望将其放在列表中的第一位。几乎所有细微差别中，Helvetica更美观。是的，通常只能在Mac上找到它。

http://www.ms-studio.com/articles.html

http://www.ms-studio.com/articlesarialsid.html

http://ilovetypography.com/2007/10/06/arial-versus-helvetica/

- Chet

---

Helvetica大师种族！ - Max Malysh

Answer 2

您运行的机器上没有Helvetica粗体，但是有Arial的粗体。

- geowa4

---

我正在运行Windows XP SP3，如果这台机器默认情况下没有正确的字体，那还有什么用呢？我不会要求我的用户安装字体来查看我的网站。 - djmzfKnm

你的机器上显示正常吗？你用的是哪一台机器？你能告诉我在哪里以及如何使Helvetica在我的机器上正确运行吗？ - djmzfKnm

然后将字体系列更改为您和用户都拥有的字体系列。每个人都有Arial。 - geowa4

是的，每个人都有Arial字体，但我想知道为什么Helvetica比Arial更受欢迎？http://meiert.com/en/blog/20080220/helvetica-arial/ - djmzfKnm

在我的 XP SP3 上，所有字体都是 Arial。你真的不需要使用 Helvetica。它和 Arial 差不多。有些字体设计师可能会因此而责骂我，但我几乎看不出区别。如果你真的想要，那就值得提出另一个问题。 - geowa4

Answer 3

每个浏览器都有它们的小毛病，这可能只是一个浏览器问题。然而，回答你的第一个问题，字体使用的行业标准完全基于该字体的可用性和使用情况。因此，更兼容的字体首先列出。在CSS中，如果列出多个字体系列，则尝试使用列出的第一个可用字体来显示。如果不起作用，则尝试下一个字体系列，以此类推，直到找到可以显示的字体。如果仍然无法显示，则使用默认字体。很可能它正在使用一个可以工作但对你来说不符合预期结果的字体。这就解释了为什么重新排序它们会在几乎所有浏览器中产生更符合预期的结果。

- Wade

---

我所看到的大多数社交网络，甚至包括谷歌在内，都使用Arial字体，所以我不明白为什么推荐使用Helvetica字体。你可以参考这篇文章：http://meiert.com/en/blog/20080220/helvetica-arial/ - djmzfKnm

Answer 4

当我使用那种字体时，我会使用font-family: Arial, Helvetica, sans-serif。

你遇到问题的原因可能是你的计算机与Windows机器的预期情况不同，实际上安装了Helvetica字体，并且有一些问题导致它不支持粗体字重。

- chaos

Answer 5

正如之前有人说的那样，“无衬线字体”之所以被使用，几乎和互联网本身一样古老。

首先，“衬线字体”（如times new roman、georgia等每个字符末尾都有装饰的字体）在印刷中效果很好，因为大小、间距、字符之间的连接等方面都很好。但是当你把它变小时，它就不会表现得很好。另一方面，“无衬线字体”在两种情况下都表现良好，只要控制字符宽度、字符之间的间隔，并且在小尺寸（比如10px、9px，甚至8px）时，你仍然可以阅读并且不会被“衬线字体”的装饰所干扰而出现可见性问题。

其次，CSS声明字体族名称还有其他原因，我记得。第一个字体是你想使用的字体，比如“Segoe UI”。这是一种很好的字体，大小适中，看起来很棒，非常小。但是现在并不常见，所以我应该选择另一种同样适用的字体，在某些情况下，如果不是第一个字体，浏览器应该使用这种字体。所以 on。真正的问题是，你必须认识到每种字体都有一些不同的外部空间、字符之间的空间、单词之间的空间，所以即使是来自同一个无衬线字体家族，它们也不完全相同。

Helvetica是一种非常著名的字体，因为它符合我之前所说的所有要求：看起来很大、很小、非常小，宽、窄、高、矮等。它的比例让它变成了这样，但由于其专有性质，在每台计算机上使用的并不普遍，如果你拥有它，那么你使用的可能是Mac或者你购买了它（除非它是随着图形程序一起提供的，然后它只是Helvetica的一种类型）。

因此，声明应该是这样的：

font-family: helvetica, arial, sans-serif;

你不应该在同一语句中使用可变宽度字符字体和定宽字符字体，因为定宽和可变宽度看起来差别很大，但这需要更多的知识来决定何时使用它以及在哪里应用它。

我自己使用这些：

font-family: calibri, arial, sans-serif; font-family: 'Segoe UI', arial, sans-serif;

Calibri非常非常小，但很容易阅读，而Segoe则类似于Verdana，但更优雅。

在任何情况下，Arial和Helvetica几乎是相同的。

再见。

- Billeeb