logo标签列表

选择适合网站的字体全攻略

cssfonts
18

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

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

我知道现在我会得到很多关于使用相对字体大小的评论，但我不想这样做。 我的设计中有一些图形是不可拉伸的，如果用户或浏览器默认导致字体呈现出不同的大小，那么设计很快就会崩溃。 我更喜欢限制字体大小的设计而不是根本没有设计。

相关：http://stackoverflow.com/questions/554055/web-programming-grand-challenges/554175#554175 - Greg Mattes
你可以在这里找到相关字体堆栈的良好概述：http://cssfontstack.com/ - Martin Buberl
我想补充一点，将Helvetica放在Arial之前并没有太多意义，因为几乎所有的计算机都会有Arial，但拥有Helvetica的计算机则较少（尽管仍然可能是大多数），因此Arial作为备选项更合理。 - Joshua Bambrick
7个回答
16

1) 什么字体在网站上更受欢迎？

参见此页面有关安全网络字体。

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

不可以。

很快，@font-face将被所有主流浏览器支持，您将能够在您的网站上使用任何字体。

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

不幸的是，所有主要浏览器的支持并不意味着所有客户端都支持。传统浏览器（IE6我在看着你）将继续阻碍一些事情（CSS，JS等）。幸运的是，如果浏览器不支持@font-face，则应该忽略它，因此您仍然可以设置优雅降级。 - Jonathan Fingland
1
@Mathius，但它只支持EOT专有格式。要获得跨浏览器支持，您必须提供两种格式的格式：http://randsco.com/index.php/2009/07/04/p680 - AaronLS
3
@AaronLS说得对，我从未否认那不是真的。我并不认为这是个问题，因为你可能正在使用Font Squirrel的@font-face生成器（该生成器有一个选项可以自动生成.eot文件）来生成你的网络字体文件。 - Mathias Bynens
2
我从未说过你说的那不是真的 :) 我也看不出有什么问题，我只是在帖子中添加了我认为有用的信息。通常，有人会尝试第一次使用@font-face，并认为它在IE中无法工作，因为他们不知道它只支持EOT格式，所以我认为将链接到那篇文章可能会是有用的信息。 - AaronLS
7

为您的网站使用合适的字体并不像说“这是网站最好的字体”那么简单。以下是来自Robert Bringhurst的"排版风格要素"的两个引用（原则）：

  • "排版存在是为了尊重内容。"
  • "选择适合任务和主题的字体。"

另外，除非衬线字体真的适合该网站，否则无衬线字体更适合数字媒体。

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

此外，请查看字体矩阵（1.5年前）和这些深思熟虑的字体堆栈。
5

1) 网站上使用哪种字体更好？我目前非常喜欢'Segoe UI'，但它仅适用于最新的Windows系统，如Vista和2008 Server。因此，我定义了一个序列：font-family: 'Segoe UI'，Tahoma，Arial，Helvetica，Sans-Serif; 除了'Segoe UI'之外，我并不真的喜欢它们的外观。有没有关于还可以使用哪种漂亮的字体的建议？我也尝试过'Trebuchet MS'，在文档中看起来很棒，但在页面上并不是这样。

哪种字体更好？这是一个艰难的问题。有三个主要的计算平台，每个平台都有自己的基本字体集。然后，一些软件（如Adobe Creative Suite、Microsoft Office套件，甚至像Powerpoint 2007查看器这样简单的软件）会为用户安装字体。网上有很多图表列出常用字体。

对于一个网站，你需要使用易读的字体。在网络上常用的大多数屏幕字体都很易读，你提到的字体就是很好的例子。最易读的屏幕字体是Verdana，尽管它通常被认为很丑陋。Arial始终是一个安全的选择。
但是要小心Segoe UI声明：如果Windows XP用户有该字体，则禁用反锯齿可能无法阅读。
对于标题，您可以自定义并使用技术（如sIFR和Cufon）来替换非本地系统字体的文本。
关于大小的快速说明：大多数网站倾向于设置非常小的字体大小。对于长文本，13像素确实是最小值（请参见relative readibility）。像Times这样具有较小x高度的字体应仅用于标题或足够大的大小（例如15个以上像素）。

2) 有没有办法使用CSS为每个特定的字体系列指定不同的字号？比如“Segoe UI-9px”，Tahoma-8px等。这可能不可能，但也许有一些技巧吗？

不，这是不可能的。您可以通过JavaScript推断出人们正在运行的浏览器和操作系统，并因此推断出他们安装的字体，但这需要大量工作才能获得相对较小的收益。我建议不要这样做。

4

关于您的字体选择，我认为易用性是一个关键要求（除非您正在选择有意风格化的格式）。

尼尔森 进行了一项研究，发现Verdana或Arial在可读性方面是最佳选择。

2
CSS3将原生支持可下载字体（您不需要提示下载，它们会立即起作用），因此您可以使用任何字体。我们只需要稍等一下，因为它仅在Firefox 3.5和Opera 10中可用。
您还可以使用经典字体，如：Arial / Helvetica，Verdana，Georgia或甚至Times Roman，以获得出色的视觉效果。您只需要找到正确的字体大小并与页面上的其他元素进行对比即可。
2

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

2

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

Google Web Fonts

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

enter image description here

1
+1 指向 Google Webfonts 的指针。这个问题相当古老了。 - icabod
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接