使用 @font-face 作为 Segoe UI 字体

发布于 2024-09-27 05:26:20 字数 1456 浏览 2 评论 0 原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

撕心裂肺的伤痛 2024-10-04 05:26:20

正如其他答案所指出的,Segoe UI 不可在非 Microsoft 或其代理制作的 Web 应用程序中使用。不过,为了回答您的问题的标题,我想指出 Microsoft 本身通过 @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。

As the other answers note, Segoe UI is not available for use in web apps not made by Microsoft or their agents. To answer the title of your question, however, I'd like to point out that Microsoft themselves use Segoe UI in their web apps via @font-face, eg, from the 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;
}

Even projects like Metro UI - that look exactly like Windows 8 - use 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');
}

I would recommend OpenSans.

ぶ宁プ宁ぶ 2024-10-04 05:26:20

如果没有直接联系,您无法从 Microsoft 获得 Segoe UI 许可,您可以从 Ascender Corp 获得单色字体许可,该字体从 Microsoft Segoe UI 网页链接到,但它与 Segoe UI 不同。

我建议 Open Sans 作为 Segoe UI 字体的替代品,它非常相似,并且有更多的开放许可用作网络字体(该链接实际上是 Google 托管的字体版本) - 所以你可以将 Segoe 作为主要字体字体然后在非 Windows 7+ 系统上回退到 Open Sans。

You can't license Segoe UI from Microsoft without direct contact, you can license the mono font from Ascender Corp who are linked to from Microsoft webpage for Segoe UI, however it is not the same as Segoe UI.

I would suggest Open Sans as an alternative to the Segoe UI font, it is quite similar and has much more open licensing for using as webfont (that link is actually to Google's hosted version of the font) - So you could have Segoe as the main font then fall back to Open Sans on non Windows 7+ Systems.

厌味 2024-10-04 05:26:20

从技术上讲,您可以使用“C:\Windows\Fonts\”文件夹中的任何字体创建网络字体。
在大多数情况下(包括 Segoe UI),由于许可限制,您不能执行此操作。相反,我会推荐 Open Sans 作为 Segoe UI 的良好替代方案。

但是,如果允许您这样做,您可以按照以下步骤操作:

  1. 从“C:\Windows\Fonts\”文件夹中检索字体。 (Windows)
  2. 将字体转换为您希望兼容的任何其他格式(TTF、EOT、SVG、WOFF)
  3. 创建一个包含以下代码的 CSS 文件:

    <前><代码>@font-face{
    字体系列:'字体名称';
    src: url('路径/to/webfont.eot');
    src: url('路径/to/webfont.woff'),
    url('路径/到/webfont.ttf'),
    url('路径/到/webfont.svg')
    }

  4. 主 CSS 文件中,使用“font-family”标签选择您的网络字体。

我将再次声明拥有有效的网络字体许可证的重要性,购买许可证时确保您有权在网络上使用该字体。某些字体可能附带网络字体包,其中包含已为您准备好的 CSS 和字体。

You can technically create a web font using any font in your "C:\Windows\Fonts\" folder.
In most circumstances (including Segoe UI), you aren't allowed to do this due to licensing restrictions. Instead, I would recommend Open Sans as a good alternative to Segoe UI.

However, if you are allowed to do this, you can follow these steps:

  1. Retrieve your font from your "C:\Windows\Fonts\" folder. (Windows)
  2. Convert the font into any other formats that you desire for compatibility (TTF, EOT, SVG, WOFF)
  3. 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')
    }
    
  4. Now in your main CSS file, use the "font-family" tag to select your web font.

I will state again the importance of having a valid license for the web font, when purchasing a license make sure that you have the rights to use the font on the web. Some fonts may come with a web font package with the CSS and fonts already prepared for you.

宁愿没拥抱 2024-10-04 05:26:20

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

It's not the same font on that page. The font on that page is Segoe UI Mono. As far as I know, Segoe UI is supposed to appear only on Microsoft Windows.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文