Использование шрифта @font-face для шрифта Segoe UI

Ответ 1

Как отмечают другие ответы, пользовательский интерфейс Segoe недоступен для использования в веб-приложениях, не созданных Microsoft или их агентами. Однако, чтобы ответить на заголовок вашего вопроса, я хотел бы указать, что сами Microsoft используют пользовательский интерфейс Segoe в своих веб-приложениях через @font-face, например, из Microsoft Surface 2 CSS:

@font-face {
    font-family: 'Segoe UI';
    src: url('/surface/Assets/css/fonts/all/normal/segoeui.eot');
    src: url('/surface/Assets/css/fonts/all/normal/segoeui.eot?#iefix') format('embedded-opentype'),
         url('/surface/Assets/css/fonts/all/normal/segoeui.woff') format('woff'),
         url('/surface/Assets/css/fonts/all/normal/segoeui.svg#SegoeUI') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Semibold';
    src: url('/surface/Assets/css/fonts/all/semibold/seguisb.eot');
    src: url('/surface/Assets/css/fonts/all/semibold/seguisb.eot?#iefix') format('embedded-opentype'),
         url('/surface/Assets/css/fonts/all/semibold/seguisb.woff') format('woff'),
         url('/surface/Assets/css/fonts/all/semibold/seguisb.svg#SegoeUISemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Bold';
    src: url('/surface/Assets/css/fonts/all/bold/segoeuib.eot');
    src: url('/surface/Assets/css/fonts/all/bold/segoeuib.eot?#iefix') format('eot'), /* Wrong format will tell IE9+ to ignore and use WOFF instead. MSHAR-2822 */
         url('/surface/Assets/css/fonts/all/bold/segoeuib.woff') format('woff'),
         url('/surface/Assets/css/fonts/all/bold/segoeuib.svg#SegoeUIBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Light';
    src: url('/surface/Assets/css/fonts/all/light/segoeuil.eot');
    src: url('/surface/Assets/css/fonts/all/light/segoeuil.eot?#iefix') format('embedded-opentype'),
         url('/surface/Assets/css/fonts/all/light/segoeuil.woff') format('woff'),
         url('/surface/Assets/css/fonts/all/light/segoeuil.svg#SegoeUILight') format('svg');
    font-weight: normal;
    font-style: normal;
}

Даже такие проекты, как Metro UI - похожий на Windows 8 - используйте OpenSans:

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzJ1r3JsPcQLi8jytr04NNhU.woff) format('woff');
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff) format('woff');
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 800;
  src: local("Open Sans Extrabold"), local("OpenSans-Extrabold"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hp1r3JsPcQLi8jytr04NNhU.woff) format('woff');
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans"), local("OpenSans"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

Я бы порекомендовал OpenSans.

Ответ 2

Вы не можете лицензировать пользовательский интерфейс Segoe из Microsoft без прямого контакта, вы можете лицензировать монофонический шрифт от Ascender Corp, который связан с веб-страницей Microsoft для пользовательского интерфейса Segoe, однако это не то же самое, что пользовательский интерфейс Segoe.

Я бы предложил Open Sans в качестве альтернативы шрифту Segoe UI, он очень похож и имеет гораздо более открытое лицензирование для использования в качестве webfont (эта ссылка на самом деле является версией шрифта, размещенной в Google). Таким образом, вы могли бы использовать Segoe как основной шрифт, затем откройте Open Sans в системах, отличных от Windows 7+.

Ответ 3

Вы можете технически создать веб-шрифт, используя любой шрифт в папке "C:\Windows\Fonts \". В большинстве случаев (включая пользовательский интерфейс Segoe) вам не разрешается делать это из-за ограничений лицензирования. Вместо этого я рекомендовал бы Open Sans как хорошую альтернативу пользовательскому интерфейсу Segoe.

Однако, если вам разрешено это сделать, вы можете выполнить следующие действия:

• Извлеките свой шрифт из папки "C:\Windows\Fonts \". (Windows)
• Преобразование шрифта в любые другие форматы, которые вы хотите для совместимости (TTF, EOT, SVG, WOFF)

• Создайте в нем CSS файл со следующим кодом:

  @font-face{
      font-family: 'FontName';
      src: url('path/to/webfont.eot');
      src: url('path/to/webfont.woff'),
           url('path/to/webfont.ttf'),
           url('path/to/webfont.svg')
  }
  

• Теперь в вашем основном файле CSS используйте тег "font-family", чтобы выбрать свой веб-шрифт.

Я снова заявляю о важности наличия действительной лицензии для веб-шрифта, при покупке лицензии убедитесь, что у вас есть права на использование шрифта в Интернете. Некоторые шрифты могут поставляться с веб-шрифтом с CSS и шрифтами, уже подготовленными для вас.

Ответ 4

Это не тот же шрифт на этой странице. Шрифт на этой странице - Segoe UI Mono. Насколько мне известно, Segoe UI должен появиться только в Microsoft Windows.