css - 如何在不同的导航器和操作系统中呈现 Segoe UI 字体

Question

我有一些 Web 应用程序遵循 Microsoft 的 Metro 风格(即:new outlook)。但是我使用的字体有问题。默认字体是“Segoe”系列，当用户在具有桌面字体Segoe UI的系统中输入应用程序时，一切正常。但在某些情况下，用户使用的 Mac 或 Ubuntu 不附带“Segoe UI”，并且导航器使用辅助字体(在我的例子中是 Tahoma)。

在新的 Outlook 中，无论您使用什么操作系统，它始终使用 Segoe UI 系列(我认为他们使用的是网络字体)

有些人跟我说使用网络字体，但我到处都没有找到(我在很多网络字体网站上搜索)Segoe 家族的网络字体。

有人知道我如何解决这种情况吗？

Answer 1

首先，每种浏览器都有不同类型的字体。为了确保它在每个浏览器中都能正常工作，您需要至少输入 3 种类型:eot、ttf、woff(和 svg)。获得这些的最佳方法是使用以下链接之一:http://www.fontsquirrel.com/fontface/generator , http://fontface.codeandmore.com/

非常简单，您将获得一套随时可用的字体。下载 Your set 后，您将找到示例文件，您将在其中了解如何使用您的新字体。

在你的情况下它可以是这样的:

@font-face {
    font-family: 'Segoe';
    src: url('/font_path/Segoe.eot');
    src: url('/font_path/Segoe.eot?#iefix') format('embedded-opentype'),
         url('/font_path/Segoe.woff') format('woff'),
         url('/font_path/Segoe.ttf') format('truetype'),
         url('/font_path/Segoe.svg#Segoe') format('svg');
    font-weight: normal;
    font-style: normal;
}

/font_path/ 是根据此 css 文件到您的字体的相对路径。通常是 ../fonts/。

为什么你需要所有这些？

ttf、otf - 适用于:FireFox、Chrome < 6、Safari 和 Opera

oet - 适用于:Internet Explorer < 9

svg - 适用于:Safari Mobile(适用于 iOS < 4.2 的 iPhone、iPad)、Android 浏览器

woff - 适用于:Internet Explorer >= 9、FireFox >= 3.6、Chrome >= 6

Segoe.eot - 和其他链接(在本例中是相对的)到这些字体文件。

编辑

因为 fontsquirrel.com 不渲染某些字体，而 fontface.codeandmore.com 有时已更改为商业字体 您将不得不用 google 搜索其他字体 在线字体生成器。

编辑

如果 fontsquirrel.com 没有帮助您尝试使用:http://www.font2web.com/