Css 适合网站使用的Metro字体

对于像Metro Windows 8这样的网站，您建议使用什么字体（免费商业使用）？最好是在谷歌字体上，等等。

如果你想让它完全像metro一样，你可以使用并上传字体

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

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

新的metro字体是无衬线字体，Arial一直是与Windows最密切相关的无衬线字体

此外，我使用这个谷歌字体与地铁字体标志，我觉得他们非常相似

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

也可以查看微软的网站。他们正在使用这个字体系列<代码>字体系列：segoe ui、verdana、arial、无衬线字体

也看看这篇文章，似乎很相似。

---

Metro品牌使用的字体为。不幸的是，正如其他人所提到的，它不能免费下载

尽管如此，即使你碰巧有Segoe，你的webapp的其他用户也可能没有。因此，为了让它一致地显示给用户，您需要

@font-face

它。但是，唉，由于许可的原因，仅仅将其托管在您的服务器上并以字体显示是违法的。使用Segoe UI的唯一合法方法就是使用它

但是你想要一个免费的选择，所以让我们看看Segoe的长相

SegoeUI与之极其相似——事实上非常相似——但当然，这种字体也不是免费的

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

你可能会更幸运地找到那些不那么出名的字体，但它们的灵感来源于那些著名的、昂贵的字体（有些人可能称之为无耻的剽窃）。两个例子是和。对于大多数用户，您会发现这些字体之间的差异是难以察觉的。您很幸运，因为在撰写本文时，您可以自行托管这些字体，通过

@font-face

（免责声明：我建议您在执行此操作之前阅读许可证的详细信息。这些字体可能会发生更改）

想快速比较一下吗？以下是一些在OSX上的Photoshop中渲染的图像。字体大小都在10磅左右。它们都设置为正常重量或书本重量

如您所见，前三种字体与开放式SAN之间的最大区别在于小写字母g。我确信大写字母之间有更多的区别，我鼓励你去探索这些细节

Segoe用户界面

弗鲁泰格

卡通哥特式标准

WeblySleek用户界面

开放式SAN

---

我希望其中一种适合您的需要。

字体是由浏览器选择的，而不是在服务器上。为什么我发现谷歌字体上不太可能有Metro风格的字体（由Microsoft创建）呢？请尝试dafont.com下载字体。您不能将任何字体上载到font Squirrel。你需要一个许可证才能使用它，而且这个许可证必须允许用作webfont。这个看起来也很不错。也许你可以把它加到你的答案中：好建议，安德烈亚斯。粗略地看一眼，我就知道这是一个很好的SegoeUI替代品。我会进一步检查并更新我的答案。我在我的网站上测试了它，它看起来几乎一样。我还测试了开放式SAN，但直到看到另一种字体，我才完全满意@安德烈亚斯，是的，开放式SAN充其量只能让人隐约联想到SegoeUI。我真的只是把它作为一个选项，因为提问者在问题中提到了谷歌字体。卡通哥特式和Webly时尚似乎是更好的选择！