用于网站的类似Metro的字体

Question

对于像Metro Windows 8这样的网站,您建议使用哪种字体(免费用于商业用途)？如果它在Google字体等上最好.

Answer 1

与'Metro'品牌一起使用的字体是Segoe UI.不幸的是,正如其他人所提到的那样,它无法免费下载.

虽然,即使您碰巧有Segoe,但您的webapp的其他用户可能不会.因此,为了能够始终如一地向用户显示,您需要@font-face它.但是,唉,由于许可,将它直接托管在您的服务器上并且面对它是违法的.使用Segoe UI的唯一合法方式是购买使用它的许可证.

但是你想要一个免费的选择,所以让我们看看一些Segoe的外观.

Segoe UI与Frutiger非常相似- 事实上,类似于微软被Linotype带到了法院 - 但是,当然,这种字体也不是免费的.

如果您特别想使用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

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

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

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

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

另外，我正在使用带有 Metro 字体徽标的谷歌字体，我觉得它们非常相似。

<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