14

对于像 Metro Windows 8 这样风格的网站，您会建议什么字体（免费用于商业用途）？如果它在谷歌字体等上会最好。

4

2 回答 2

45

与“Metro”品牌一起使用的字体是Segoe UI。不幸的是，正如其他人所提到的，它不能免费下载。

但是，即使您碰巧拥有 Segoe，您的 web 应用程序的其他用户也可能没有。因此，要使其始终如一地显示给您的用户，您将需要@font-face它。但是，唉，由于许可，将其简单地托管在您的服务器上并对其进行字体处理是违法的。使用 Segoe UI 的唯一合法方式是购买使用它的许可证。

但是你想要一个免费的选项，所以让我们看看一些 Segoe 相似的东西。

Segoe UI 与Frutiger非常相似——事实上，如此相似，以至于微软被 Linotype 告上了法庭——当然，这种字体也不是免费的。

如果你特别想使用谷歌字体，流行的Open Sans可能是你最好的选择，尽管它和 Segoe 之间有一些明显的区别。

你可能会更幸运地找到那些不是那么有名但深受著名的昂贵字体启发的字体（有些人可能会称它们为无耻的抄袭）。两个例子是CartoGothic Std和WeblySleek UI。对于大多数用户来说，您会发现这些字体之间的差异是难以察觉的。而且您很幸运，因为在撰写本文时，您可以自己托管这些字体以通过以下方式提供它们@font-face（免责声明：我建议您在执行此操作之前阅读许可证以了解详细信息。它们受改变）。

想要快速比较？这是一些图像，在 OSX 上的 Photoshop 中呈现。字体大小都在 10pt 左右。它们都设置为正常或书本重量。

如您所见，前三种字体与 Open Sans 最大的区别在于小写g。我确信大写字母之间存在更多差异，我鼓励您探索这些细节。

世高用户界面

Segoe UI http://jmeas.com/stackoverflow/segoe.jpg

果子

Segoe UI http://jmeas.com/stackoverflow/frutiger.jpg

CartoGothic STD

Cartogothic STD http://jmeas.com/stackoverflow/cartogothic.jpg

WeblySleek 用户界面

Cartoothic STD http://so.jmeas.com/weblysleek.jpg

打开 Sans

打开 Sans http://jmeas.com/stackoverflow/open-sans.jpg

我希望其中之一适合您的需求。

于 2012-10-08T20:39:02.273 回答
2

如果您希望它与 Metro 完全一样，您可以使用http://www.fontsquirrel.com/并上传字体。

注意：如果使用 fontsquirrel，请确保您拥有该字体的许可证，如评论中所述。

否则可能是 Helvetica或Arial。这些是我能想到的壁橱网络安全字体。

新的 Metro 字体是 Sans Serif 字体，而 Arial 一直是与 Windows 最密切相关的 Sans Serif 字体。

我也在使用这个带有地铁字体标志的谷歌字体，我觉得它们非常相似。

<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400' rel='stylesheet" type="text/css">

还可以查看微软的网站。他们正在使用这个字体系列..font-family: segoe ui, verdana, arial, sans-serif;

http://windows.microsoft.com/en-US/windows/home

另请查看此帖子，似乎非常相似。 https://superuser.com/questions/336031/what-font-is-used-on-windows-8-or-windows-phone-7

于 2012-10-08T20:21:01.637 回答