css – Metro-like字体为网站使用

你会建议一个像Metro Windows 8这样的网站的字体(免费用于商业用途)？如果它是谷歌字体等会是最好的

解决方法

与’Metro’品牌使用的字体是 Segoe UI.不幸的是,正如其他人所说,它不可用作免费下载.

虽然,即使您恰好有Segoe,您的webapp的其他用户也许不会.因此,为了向用户一直显示,您需要@ font-face它.但是,唉,由于许可,在服务器和字体面上简单地托管它是违法的.使用Segoe UI的唯一合法方法是使用purchase a license.

但是你想要一个免费的选项,所以让我们来看看一些Segoe的lookalikes.

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

开不了

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