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

Question

我实际上现在有两个问题：

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等。这可能不可能，但也许有一些技巧？

我也知道我现在会收到很多评论来使用相对字体大小，但我不希望这样。我的设计中有一些不可拉伸的图形。如果用户或浏览器默认导致以不同大小呈现的字体，则设计很快就会崩溃。我更喜欢将字体大小限制的设计完全没有设计。

Answer 1

1）网站首选哪些字体？

请参阅此页面，了解safe web fonts。

2）是否可以通过CSS为每个特定字体系列指定不同的字体大小？

不。

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

在此之前，请查看Cufón或sIFR。

Answer 2

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

• “排版的存在是为了纪念内容。”
• “选择适合任务和主题的面孔。”

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

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

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

Answer 3

  

1）网站首选哪些字体？现在我真的很喜欢   'Segoe UI'，但它只适用于   最新的Windows系统，如Vista和   2008 Server。所以我定义了一个   sequence：font-family：'Segoe UI'，   Tahoma，Arial，Helvetica，Sans-Serif;   我真的不喜欢这一切   其中除了'Segoe UI'。任何   关于什么好字体的建议   除此之外还用过吗？我也试过了   'Trebuchet MS'，它看起来很棒   文档，但不是真正在页面上。

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

对于网站，您将要使用易读的字体。网络上常用的大多数屏幕字体都非​​常清晰。你提到的字体就是很好的例子。最清晰的屏幕字体是Verdana，虽然它通常被认为是丑陋的。 Arial永远是一个安全的选择。

请注意Segoe UI声明：如果Windows XP用户使用该字体，则禁用抗锯齿功能可能无法清晰显示。

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

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

  

2）用CSS指定不同字体大小的任何方法   特别是font-familiy？就像'Segoe   UI - 9px'，Tahoma - 8px等。这是   可能不可能，但也许在那里   是一些技巧？

不，这是不可能的。您可以通过Javascript对浏览器和操作系统进行假设，从而对他们安装的字体进行假设，但是相对较小的增益需要做很多工作。我会反对它。

Answer 4

重新。你的字体选择，我会认为可用性是一个关键要求（除非你想采用刻意设计的格式）。

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

Answer 5

CSS3本身会支持可下载的字体（你不会被要求下载，它们只是即时工作），所以你将能够使用你想要的任何字体。我们只需要等待它，但因为它只能在Firefox 3.5和Opera 10中使用。

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

Answer 6

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

Answer 7

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

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