使用 @font-face 来应用 Segoe UI 字体

Question

使用 @font-face 来应用 Segoe UI 字体

fonts

23

我已经在Google上搜索了一个小时，但是我无法找到有关是否可以使用Segoe UI字体来使用@font-face的答案。有人知道这种字体的许可证是否允许我这样做吗？

- omnix

4

此问题似乎不适合本站，因为它涉及许可证条款。 - Jukka K. Korpela

2

2016年：微软现在提供了一个名为Selawik的开源版本：https://github.com/winjs/winstrap/tree/master/dist/fonts - Bijan

4个回答

11

如果没有直接联系，你无法从Microsoft获取Segoe UI的许可证，你可以从与Microsoft网页中的Segoe UI相关联的Ascender Corp获得单色字体的许可证，但它并不与Segoe UI相同。

我建议使用Open Sans作为Segoe UI字体的替代品，它非常相似，并且具有更加开放的许可证可用于作为Web字体使用（该链接实际上是Google托管版本的字体） - 因此您可以将Segoe作为主要字体，然后在非Windows 7+系统上切换到Open Sans。

- Ryan McDonough

3

您可以在"C:\Windows\Fonts\"文件夹中使用任何字体从技术上创建网络字体。但是，在大多数情况下(包括Segoe UI)，由于许可限制，您没有权限这样做。相反，我建议使用Open Sans作为Segoe UI的良好替代品。

但是，如果您被允许这样做，您可以按照以下步骤操作：

Retrieve your font from your "C:\Windows\Fonts\" folder. (Windows)
Convert the font into any other formats that you desire for compatibility (TTF, EOT, SVG, WOFF)

Create a CSS file with the following code in it:

@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')
}

Now in your main CSS file, use the "font-family" tag to select your web font.

我再次强调，在购买许可证时，拥有有效的网络字体许可证的重要性。请确保您拥有在Web上使用字体的权利。一些字体可能会带有Web字体包，其中包含已经为您准备好的CSS和字体。

- Rob Farr

0

那个页面上的字体不一样。那个页面上的字体是Segoe UI Mono。据我所知，Segoe UI应该只出现在Microsoft Windows上。

- Liero

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mikemaccana · Accepted Answer

正如其他答案所指出的那样，Segoe UI 不能在未由 Microsoft 或其代理制作的 Web 应用程序中使用。然而，为了回答您问题的标题，我想指出微软自己通过 @font-face 在其 Web 应用程序中使用 Segoe UI，例如来自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字体。