CSS 网站使用的类似地铁的字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12788789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Metro-like font for website use
提问by Adarchy
What font would you advise (free for commercial use) for a website styled like Metro Windows 8? Would be best if it's on Google Fonts etc.
对于 Metro Windows 8 风格的网站，您建议使用什么字体（免费用于商业用途）？如果它在谷歌字体等上会最好。
回答by jamesplease
The font used with the 'Metro' branding is Segoe UI. Unfortunately, as others have mentioned, it isn't available as a free download.
与“Metro”品牌一起使用的字体是Segoe UI。不幸的是，正如其他人所提到的，它不能免费下载。
Though, even if you happen to have Segoe, other users of your webapp might not. Consequently, for it to display consistently to your users you would need to @font-faceit. But, alas, due to licensing, it'd be against the law to simply host it on your server and font-face it. The only legal way to use Segoe UI is to purchase a licenseto use it.
不过，即使您碰巧拥有 Segoe，您的 web 应用程序的其他用户也可能没有。因此，为了向您的用户一致地显示它，您需要@font-face它。但是，唉，由于许可，简单地将它托管在您的服务器上并对其进行字体处理是违法的。使用 Segoe UI 的唯一合法方式是购买使用许可。
But you want a free option, so let's look at some Segoe lookalikes.
但是你想要一个免费的选择，所以让我们看看一些 Segoe 的相似之处。
Segoe UI is incredibly similar to Frutiger– so similar, in fact, that Microsoft was taken to court by Linotype over it– but, of course, that font isn't free either.
Segoe UI 与Frutiger极其相似——事实上如此相似，以至于微软因此被 Linotype 告上法庭——但是，当然，这种字体也不是免费的。
If you specifically wanted to use a Google Font, the popular Open Sansmight be your best bet, though there are a few noticeable differences between it and Segoe.
如果你特别想使用谷歌字体，流行的Open Sans可能是你最好的选择，尽管它和 Segoe 之间有一些明显的区别。
You might have more luck finding fonts that aren't all that well-known but are heavily inspired by the famous, expensive ones (some might call them shameless rip-offs). Two examples are CartoGothic Stdand WeblySleek UI. For most users, you'll find that the differences between these fonts are imperceptible. And you're in luck, as, at the time of writing this, it happens that you're free to host these fonts yourself to provide them via @font-face(Disclaimer: I recommend you read the licenses for details before doing this. They are subject to change).
你可能会更幸运地找到那些不是那么出名但深受著名的、昂贵的字体启发的字体（有些人可能会称它们为无耻的剽窃）。两个例子是CartoGothic Std和WeblySleek UI。对于大多数用户来说，您会发现这些字体之间的差异是难以察觉的。而且您很幸运，因为在撰写本文时，您可以自行托管这些字体以通过以下方式提供它们@font-face（免责声明：我建议您在执行此操作之前阅读许可证以获取详细信息。它们是受改变）。
Want a quick comparison? Here are some images, as rendered in Photoshop on OSX. The font sizes are all about 10pt. And they're all set to normal or book weight.
想要快速比较？这是一些图像，在 OSX 上的 Photoshop 中呈现。字体大小都在 10pt 左右。它们都设置为正常或书本重量。
As you can see, the biggest difference between the first three fonts and Open Sans is the lower case g. I'm sure there are more differences between the upper case letters, and I encourage you to explore those details.
如您所见，前三种字体与 Open Sans 的最大区别在于小写的g。我确信大写字母之间存在更多差异，我鼓励您探索这些细节。
Segoe UI
用户界面
Segoe UI http://jmeas.com/stackoverflow/segoe.jpg
Segoe 用户界面 http://jmeas.com/stackoverflow/segoe.jpg
Frutiger
弗鲁蒂格
Segoe UI http://jmeas.com/stackoverflow/frutiger.jpg
Segoe 用户界面 http://jmeas.com/stackoverflow/frutiger.jpg
CartoGothic STD
CartoGothic STD
Cartogothic STD http://jmeas.com/stackoverflow/cartogothic.jpg
Cartogothic STD http://jmeas.com/stackoverflow/cartogothic.jpg
WeblySleek UI
WeblySleek 用户界面
Cartogothic STD http://so.jmeas.com/weblysleek.jpg
Cartogothic STD http://so.jmeas.com/weblysleek.jpg
Open Sans
打开 Sans
Open Sans http://jmeas.com/stackoverflow/open-sans.jpg
打开 Sans http://jmeas.com/stackoverflow/open-sans.jpg
I hope one of those fits your needs.
我希望其中之一适合您的需求。
回答by Kris Hollenbeck
If you want it to be exactly like metro you could use http://www.fontsquirrel.com/and upload a font.
如果您希望它与地铁完全一样，您可以使用http://www.fontsquirrel.com/并上传字体。
NOTE:Make sure you have a license for the font if using fontsquirrel, as mentioned in the comments.
注意：如果使用 fontsquirrel，请确保您拥有该字体的许可证，如评论中所述。
Otherwise maybe Helveticaor Arial. Those are the closets Web Safe fonts that I can think of.
否则可能是Helvetica或Arial。这些是我能想到的壁橱 Web 安全字体。
The new metro font is a Sans Serif font and Arial has always been the Sans Serif font most closely related to Windows.
新的 Metro 字体是一种 Sans Serif 字体，而 Arial 一直是与 Windows 关系最密切的 Sans Serif 字体。
Also I am using this google font with a metro font logo and I feel like they are pretty similar.
此外，我正在使用这种带有地铁字体徽标的谷歌字体，我觉得它们非常相似。
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400' rel='stylesheet" type="text/css">
Also check out Microsoft's website. They are using this font family.. font-family: segoe ui, verdana, arial, sans-serif;
还可以查看 Microsoft 的网站。他们正在使用这个字体系列..font-family: segoe ui, verdana, arial, sans-serif;
http://windows.microsoft.com/en-US/windows/home
http://windows.microsoft.com/en-US/windows/home
Also Check out this post, seems to be very similar. https://superuser.com/questions/336031/what-font-is-used-on-windows-8-or-windows-phone-7
也看看这个帖子，似乎非常相似。 https://superuser.com/questions/336031/what-font-is-used-on-windows-8-or-windows-phone-7
