Question

对于像Metro Windows 8这样的网站，您会建议使用哪种字体（免费用于商业用途）？如果它在Google字体等上最好。

Answer 1

“Metro”品牌使用的字体为Segoe UI。不幸的是，正如其他人所提到的那样，它无法免费下载。

虽然，即使您碰巧拥有Segoe，但您的webapp的其他用户可能不会。因此，要始终向用户显示，您需要@font-face它。但是，唉，由于许可，将它直接托管在您的服务器上并且面对它是违法的。使用Segoe UI的唯一合法方式是purchase a license使用它。

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

Segoe UI与Frutiger非常相似 - 实际上与Microsoft was taken to court by Linotype over it非常相似 - 但当然，该字体也不是免费的。

如果您特别想使用Google字体，那么受欢迎的Open Sans可能是您最好的选择，尽管它与Segoe之间存在一些明显的差异。

你可能会更幸运地找到并非众所周知的字体，但却受到着名的昂贵的字体的启发（有些人可能称之为无耻的剽窃）。两个示例是CartoGothic Std和WeblySleek UI。对于大多数用户，您会发现这些字体之间的差异是难以察觉的。而且你很幸运，因为在撰写本文时，您可以自由托管这些字体以通过@font-face提供这些字体（免责声明：我建议您在执行操作之前阅读许可证这个。它们可能会发生变化。）

想快速比较一下吗？以下是一些在OSX上的Photoshop中渲染的图像。字体大小都是10pt左右。而且他们都已恢复正常或预定体重。

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

Segoe UI

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

FRUTIGER

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

CartoGothic STD

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

WeblySleek UI

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

打开Sans

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

我希望其中一个符合您的需求。

Answer 2

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

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

否则可能 Helvetica 或 Arial 。这些是我能想到的壁橱Web Safe字体。

新的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">

另请查看Microsoft的网站。他们正在使用此字体系列.. 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

用于网站的类似Metro的字体

2 个答案: