Html Helvetica 或 Arial 作为 CSS 中的基本字体？

Helvetica or Arial as base font in CSS?

提问by Prashant

One of my friend told me "Use font family: helvetica, arial, sans-serif in your website", when I asked him why then "blank" he don't know, some usability expert in his company told him this thing.

我的一个朋友告诉我“在你的网站中使用字体系列：黑体、arial、sans-serif”，当我问他为什么“空白”时，他不知道，他公司的一些可用性专家告诉了他这件事。

But when I tried helvetica, arial, sans-serifthen I noticed that I bold and un-bold is not working properly with this font whereas I use arial, helvetica, sans-serifthis then its working fine. note the difference here: http://hell.meiert.org/core/html/helvetica-arial.html

但是当我尝试时，我helvetica, arial, sans-serif注意到我的粗体和非粗体不能正常使用这种字体，而我使用arial, helvetica, sans-serif它然后它工作正常。注意这里的区别：http: //hell.meiert.org/core/html/helvetica-arial.html

I googled on this, but nowhere seen anything much convincing to me. Then I SO'd and found a post Is Helvetica a browser base font?

我用谷歌搜索了这个，但没有看到任何让我信服的东西。然后我找到了一个帖子Helvetica 是浏览器基础字体吗？

So I want to ask that why Helvetica is recommended, and in the same post one of answers says "If you want Helvetica, you either have to get a Mac" So is the MAC PC's are the only reason to use this so that it will look good in MAC only?

所以我想问一下为什么推荐 Helvetica，在同一篇文章中，一个答案说“如果你想要 Helvetica，你要么必须得到一台 Mac”那么 MAC PC 是使用它的唯一原因，这样它就会仅在 MAC 中看起来不错？

In my site when I am using "arial..." as base font then →html character is rendering well in all browsers but when using "Helvetica..." then its not displaying properly in google chrome, Why?

在我的网站中，当我使用“arial...”作为基本字体时，→html 字符在所有浏览器中都能很好地呈现，但是当使用“Helvetica...”时，它在 google chrome 中无法正确显示，为什么？

Thanks

谢谢

采纳答案by Chet

On the question of why one is recommended over the other, from the research I've done it seems Helvetica is the superior font family. It should always be used when it exists, so thats why you want to put it first in the list. For almost all the slight differences, Helvetica is more aestetically pleasing. Yes, it is usally just found on Macs.

关于为什么推荐一个而不是另一个的问题，从我所做的研究来看，Helvetica 似乎是优秀的字体系列。当它存在时应该总是使用它，所以这就是为什么你想把它放在列表中的第一个。对于几乎所有细微的差异，Helvetica 在美学上更令人愉悦。是的，它通常只能在 Mac 上找到。

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

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

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

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

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

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

回答by geowa4

The machine you were running on did not have a bold-face for Helvetica, but it did have one for Arial.

你运行的机器没有黑体字，但它有一个用于 Arial 的字样。

回答by Wade

Well each browser as we all know has their quirks. This could possibly be just a browser issue.

众所周知，每个浏览器都有自己的怪癖。这可能只是浏览器问题。

To answer you first question however, the industry standard for font usage is based completely around the availability and usage of that font. So fonts that are more compatible are listed first.

然而，要回答您的第一个问题，字体使用的行业标准完全基于该字体的可用性和使用情况。所以兼容性更好的字体会先列出来。

Basically in CSS if you list more than one font-family, it tries to display with the first available listed font. If that doesn't work then it tries the next and so-on until it gets displayed, if it doesn't it just uses a default. It is quite possible that it's settling with a font that works, but not to the expected results for you. That would explain why re-ordering them produces something more expected in almost all browsers.

基本上在 CSS 中，如果您列出多个字体系列，它会尝试使用第一个可用的列出字体显示。如果这不起作用，那么它会尝试下一个等等，直到它被显示出来，如果它不起作用，它就只使用默认值。很可能它会使用一种有效的字体来解决问题，但不会满足您的预期结果。这将解释为什么重新排序它们会在几乎所有浏览器中产生更多预期的结果。

回答by chaos

I use font-family: Arial, Helvetica, sans-serifwhen I use that font at all, myself.

我font-family: Arial, Helvetica, sans-serif自己在使用该字体时使用。

The reason you're running into a problem is probably that your machine, unlike the expected case for Windows machines, actually has a Helvetica font installed, and there's something going on with it such that it doesn't support bold font weight properly.

您遇到问题的原因可能是您的机器，与 Windows 机器的预期情况不同，实际上安装了 Helvetica 字体，并且它发生了一些事情，以至于它不能正确支持粗体字体。

回答by Billeeb

As someone said before, the reason for the "sans-serif" fonts, is almost as old as the web itself.

正如之前有人所说，“sans-serif”字体的出现几乎与网络本身一样古老。

First of all, the "serif" fonts (times new roman, georgia, every font with those little decorations at the end of every character ending, etc.) works well in printings, becasue of the size, the space, the junctions between characters, etc. But it would never work well when you make it small. In the other hand, the "sans-serif" fonts work well in both scenarios, just controlling the character width, the separation between characters and you don't have visibility issues in small sizes let's say 10px, 9px, even 8px, where you can still read and not get bothered by the decorations of the "serif" fonts that in those sizes start to make a mess.

首先，“衬线”字体（times new roman、georgia、每个字符结尾处带有小装饰的每种字体等）在印刷时效果很好，因为大小、空间、字符之间的连接处等。但是当你把它变小时，它永远不会很好地工作。另一方面，“sans-serif”字体在这两种情况下都能很好地工作，只需控制字符宽度、字符之间的间隔，并且在小尺寸下不会出现可见性问题，比如 10px、9px、甚至 8px，仍然可以阅读并且不会被那些尺寸的“衬线”字体的装饰所困扰，这些字体开始变得一团糟。

Second, the CSS declaration for the font-family, has another reasons as I recall. The first font is the one you would like to use let's say "Segoe UI". It's a good font, has good size, looks great small, etc. But is not that common right now, so I should choose another font that works just as well and in case not being the first one the browser should use this instead. And so on. The real problem is that you must acknowledge that every font have some different outter spaces, space between characters, space between words, so even being from the same family sans-serif they are not exactly the same.

其次，我记得字体系列的 CSS 声明还有另一个原因。第一种字体是您想要使用的字体，比如说“Segoe UI”。这是一种很好的字体，大小合适，看起来很小等等。但现在并不常见，所以我应该选择另一种同样有效的字体，如果不是第一种，浏览器应该使用它。等等。真正的问题是，您必须承认每种字体都有一些不同的外部空格、字符之间的空格、单词之间的空格，因此即使来自同一个无衬线字体家族，它们也不完全相同。

Helvetica is a very famous font because all what I said before: looks great big, small, very small, it's wide, narrow, tall, short, etc. its proportions let it be that way, but is not as commonly used in every computer because its proprietary, and if you got it, then you use a Mac or you bought it (unless it has come with a graphic program and then is just one type of Helvetica).

Helvetica 是一种非常有名的字体，因为我之前说过的所有内容：看起来很大，很小，很小，很宽，很窄，很高，很短，等等。它的比例使它成为那样，但并不是在每台计算机中都普遍使用因为它是专有的，如果你得到了它，那么你会使用 Mac 或购买它（除非它带有一个图形程序，然后只是一种 Helvetica）。

So the statement should be:

所以声明应该是：

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

字体系列：黑体、宋体、无衬线；

You shouldn't use variable width character fonts with fixed width character fonts in the same statement, because monospaced (same space between characters) and variable width don't look even close each other, but all that requires more knowledge when to use it and where to apply.

你不应该在同一个语句中使用可变宽度字符字体和固定宽度字符字体，因为等宽（字符之间的相同空间）和可变宽度看起来彼此并不接近，但是所有这些都需要更多的知识何时使用它和在哪里申请。

I myself use these:

我自己使用这些：

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

字体系列：calibri、arial、sans-serif；font-family: 'Segoe UI', arial, sans-serif;

Calibri is very very small but is easy to read, and Segoe is kind of Verdana but the elegant version.

Calibri 非常非常小但很容易阅读，而 Segoe 是一种 Verdana 但优雅的版本。

In any case, Arial and Helvetica are almost the same.

无论如何，Arial 和 Helvetica 几乎是一样的。

See ya.

拜拜。