Метроподобный шрифт для использования на сайте

Ответ 1

Шрифт, используемый с брендом Metro, Segoe UI. К сожалению, как отмечали другие, он недоступен в качестве бесплатной загрузки.

Хотя, даже если у вас есть Segoe, другие пользователи вашего webapp не могут. Следовательно, чтобы он отображался последовательно вашим пользователям, вам нужно @font-face его. Но, увы, из-за лицензирования было бы против закона просто размещать его на вашем сервере и шрифтовать. Единственный законный способ использования пользовательского интерфейса Segoe - купить лицензию для ее использования.

Но вам нужен бесплатный вариант, поэтому давайте посмотрим на некоторые Segoe lookalikes.

Segoe UI невероятно похож на Frutiger - настолько похоже, что Microsoft была привлечена к суду Linotype над ней - но, конечно, этот шрифт также не является бесплатным.

Если вы специально хотели использовать шрифт Google, популярным Open Sans может быть ваш лучший выбор, хотя есть несколько заметных различий между это и Segoe.

Возможно, вам повезло найти шрифты, которые не все так хорошо известны, но в значительной степени вдохновлены известными, дорогими (некоторые из них могут назвать их бесстыдными тиражами). Два примера: CartoGothic Std и интерфейс WeblySleek. Для большинства пользователей вы обнаружите, что различия между этими шрифтами незаметны. И вам повезло, так как на момент написания этого сообщения вы можете свободно размещать эти шрифты, чтобы предоставить их через @font-face (Отказ от ответственности: я рекомендую вам ознакомиться с информацией о лицензиях, прежде чем делать это. Они могут быть изменены).

Хотите быстрое сравнение? Вот некоторые изображения, как показано в Photoshop на OSX. Размер шрифта составляет около 10pt. И все они настроены на нормальный или книжный вес.

Как вы можете видеть, самая большая разница между первыми тремя шрифтами и Open Sans - это нижний регистр g. Я уверен, что между буквами верхнего регистра больше различий, и я рекомендую вам изучить эти детали.

Segoe UI

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

Фрутигер

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

CartoGothic STD

Картогенный STD http://jmeas.com/stackoverflow/cartogothic.jpg

WeblySleek UI

Картографический STD http://so.jmeas.com/weblysleek.jpg

Открыть без

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

Я надеюсь, что один из них соответствует вашим потребностям.

Ответ 2

Если вы хотите, чтобы это было точно как метро, ​​вы можете использовать http://www.fontsquirrel.com/ и загрузить шрифт.

ПРИМЕЧАНИЕ.. Убедитесь, что у вас есть лицензия на шрифт, если вы используете fontsquirrel, как указано в комментариях.

В противном случае может быть Helvetica или Arial. Это шкафы Web Safe, о которых я могу думать.

Новый шрифт Metro - шрифт без засечек, а Arial всегда был шрифтом Sans Serif, наиболее тесно связанным с Windows.

Также я использую этот шрифт google с логотипом шрифта метро, ​​и я чувствую, что они очень похожи.

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

Также проверьте сайт Microsoft. Они используют это семейство шрифтов. font-family: segoe ui, verdana, arial, sans-serif;

http://windows.microsoft.com/en-US/windows/home

Также проверьте этот пост, похоже, очень похожи. https://superuser.com/info/336031/what-font-is-used-on-windows-8-or-windows-phone-7