所有关于为网站选择正确的字体答案

【问题标题】：All about choosing the right font for a website所有关于为网站选择正确的字体
【发布时间】：2020-07-13 00:13:02
【问题描述】：

其实我现在有两个问题：

1) 网站首选哪些字体？现在我真的很喜欢“Segoe UI”，但它只适用于最新的 Windows 系统，如 Vista 和 2008 Server。所以我定义了一个序列：

font-family: 'Segoe UI', Tahoma, Arial, Helvetica, Sans-Serif;

除了“Segoe UI”之外，我不太喜欢所有这些外观。除此之外，还有什么好的字体可以使用的建议吗？我还尝试了“Trebuchet MS”，它在文档上看起来很棒，但在页面上却不是。

2) 有什么方法可以用 CSS 为每个特定的字体系列指定不同的字体大小？像“Segoe UI - 9px”、Tahoma - 8px 等。这可能是不可能的，但也许有一些技巧？

我也知道我现在会得到很多 cmets 来使用相对字体大小，但我不希望那样。我的设计中有一些不可拉伸的图形。如果用户或浏览器默认导致字体以不同的大小呈现，那么设计很快就会分崩离析。我更喜欢有字体大小限制的设计，而不是根本没有设计。

【问题讨论】：

相关：stackoverflow.com/questions/554055/…
您可以在这里找到相关字体堆栈的概览：cssfontstack.com
我可能会补充一点，将 Helvetica 放在 Arial 之前并没有什么意义，因为几乎所有的计算机都会有 Arial，但更少（可能仍然是大多数）会有 Helvetica，所以 Arial 作为一个更有意义的后备。

标签： css fonts

【解决方案1】：

1) 网站首选哪些字体？

请参阅有关safe web fonts的页面。

2) 有什么方法可以通过 CSS 为每个特定的字体系列指定不同的字体大小？

没有。

很快，所有主流浏览器都支持@font-face，您将可以在您的网站上使用任何您想要的字体。

在那之前，看看Cufón 或sIFR。

【讨论】：

不幸的是，所有主流浏览器的支持并不意味着所有客户端的支持。旧版浏览器（IE6，我在看你）将继续阻碍（CSS，JS，...）。幸运的是 @font-face 应该被不支持它的浏览器忽略，所以你仍然可以设置为优雅降级
@Mathius 但它只支持 EOT 专有格式。您必须提供两种格式的格式才能获得跨浏览器支持：randsco.com/index.php/2009/07/04/p680
@AaronLS 没错。我从来没有说过那不是真的。我并没有真正看到这个问题，因为您可能正在使用the Font Squirrel @font-face generator（它可以选择自动创建一个.eot 文件）来生成您的网络字体文件。
我从来没有说过你说那不是真的:) 我也没有看到这个问题，我只是在帖子中添加了我认为有用的信息。通常有人会第一次尝试使用@font-face 并认为它在 IE 中不起作用，因为他们不知道它只支持 EOT 格式，所以我认为链接到那篇文章可能是有用的信息。

【解决方案2】：

为您的网站使用正确的字体。这不是说“这是网站最好的字体”那么简单。以下是 Robert Bringhurst 的 "The Elements of Typographic Style" 的两句话（阅读原则）：

“字体的存在是为了尊重内容。”
“选择适合任务和主题的面孔。”

另一方面，除非衬线字体确实适合网站，否则无衬线字体更适合数字媒体。

关于您的第二点，Phil Oye 最近发布了FontUnstack，这是一个 jQuery 插件，可以告诉您给定元素使用的字体。该元素将被赋予一个类（即“set_in_gill_sans”），您可以通过该类为不同的字体应用特定的样式。

另外，请查看font matrix（1.5 岁）和这些经过深思熟虑的font-stacks。

【讨论】：

【解决方案3】：

1) 网站首选哪些字体？现在真的很喜欢 'Segoe UI'，但它只在最新的 Windows 系统，如 Vista 和 2008 服务器。所以我定义了一个序列：字体系列：'Segoe UI'， Tahoma、Arial、Helvetica、无衬线字体；我不太喜欢所有人的样子其中除了“Segoe UI”。任何关于什么是好字体的建议用除了那个？我也试过 'Trebuchet MS'，它看起来很棒文档，但不是真的在页面上。

首选哪些字体？这是一个棘手的问题。有三个主要的计算平台，每个平台都有自己的一组基本字体。然后，一些软件，如 Adobe Creative Suite、Microsoft Office 套件，甚至像 XP 的 Powerpoint 2007 查看器这样简单的软件，都会为用户安装字体。网上有很多图表都列出了commonly used fonts。

对于网站，您将需要使用清晰的字体。网络上常用的大多数屏幕字体都非常清晰。例如，您提到的字体就是很好的例子。屏幕上最清晰的字体是 Verdana，尽管它通常被认为是丑陋的。 Arial 始终是一个安全的选择。

但请注意 Segoe UI 声明：如果 Windows XP 用户使用该字体，则在禁用抗锯齿的情况下可能无法辨认。

对于标题，您可以自定义并使用 sIFR 和 Cufon 等技术将文本替换为非本地系统字体。

关于大小的快速说明：大多数网站倾向于设置非常小的字体大小。 13 像素确实是长文本的最小值（请参阅relative readibility）。像 Times 这样的 x 高度较小的字体只能用于标题或足够大的字体（例如 15+ 像素）。

2) 使用 CSS 为每个字体指定不同字体大小的任何方式特定的字体系列？就像'Segoe UI - 9px'，Tahoma - 8px 等。这是可能不可能，但也许有有什么技巧吗？

不，这是不可能的。您可以对人们通过 Javascript 运行的浏览器和操作系统做出假设，从而对他们安装的字体做出假设，但为了获得相对较小的收益，需要做很多工作。我建议不要这样做。

【讨论】：

【解决方案4】：

回复。你的字体选择，我会认为可用性是一个关键要求（除非你想要一种刻意的样式格式）。

Neilson 制作了 study，发现 Verdana 或 Arial 是易读性方面的最佳选择。

【讨论】：

【解决方案5】：

CSS3 将本机支持可下载字体（不会提示您下载，它们会即时运行），因此您可以使用任何您想要的字体。我们只需要等待它，但因为它仅在 Firefox 3.5 和 Opera 10 中可用。

您还可以使用经典字体，例如：Arial/Helvetica、Verdana、Georgia，甚至 Times Roman，以获得出色的视觉效果。您只需要找到合适的字体大小并与页面上的其他元素进行对比。

【讨论】：

【解决方案6】：

就个人而言，我喜欢 Verdana 和 Georgia，尽管它们只是 Mac/Windows-“安全”。在您的情况下，最好选择与您的首选字体具有相同指标的第二选择字体。

【讨论】：

【解决方案7】：

大多数主流浏览器已经支持@font-face，因此您可以使用任何公开可用的字体。
Google Web Fonts 提供一些免费字体供您选择：

还有像Typekit 这样的付费网站会为您托管付费字体并让您购买：

【讨论】：

+1 表示指向 google webfonts 的指针。 Coo，这个问题已经很老了。