3

我有一些遵循微软 Metro 风格的 Web 应用程序（即：新前景）。但是我在使用我使用的字体时遇到了问题。默认字体是“Segoe”系列，当用户在具有桌面字体 Segoe UI 的系统中输入应用程序时，一切正常。但在某些情况下，用户使用的 Mac 或 Ubuntu 没有“Segoe UI”，并且导航器使用辅助字体（在我的例子中是 Tahoma）。

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

有些人跟我说话使用网络字体，但我没有找到任何地方（我在很多网络字体网站上搜索过）Segoe 家族的网络字体。

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

4

3 回答 3

8

首先，每个浏览器都有不同类型的字体。为确保它适用于所有浏览器，您至少需要放置 3 种类型：eot、ttf、woff（和 svg）。获得这些的最佳方法是使用以下链接之一：http://www.fontsquirrel.com/fontface/generator，http://fontface.codeandmore.com/

这非常简单，您将获得一套现成的字体。下载您的字体集后，您将找到示例文件，您将在其中了解如何使用您的新字体。

在您的情况下，它可以是：

@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（iPhone、iPad for iOS < 4.2）、Android 浏览器

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

Segoe.eot- 和其他是那些字体文件的链接（在这种情况下是相对的）。

编辑

因为fontsquirrel.com不渲染某些字体，并且fontface.codeandmore.com有时已更改为商业字体您将不得不谷歌搜索其他字体online font generator。

编辑

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

于 2013-01-23T08:22:05.460 回答
1

使用 CSS 指定字体在操作系统中不可用时可以下载的位置。将此添加到 CSS 文件的开头：

@font-face {
    font-family: Segoe;
    src: url('/fonts/segoe.ttf');
}

ttf 格式适用于大多数浏览器。对于 IE，将 eot 版本的位置添加到条件 IE 样式表中：

@font-face {
    font-family: Segoe;
    src: url('/fonts/segoe.eot');
}
于 2013-01-23T08:14:51.913 回答
0

我们的用户面临与 Segoe 相同的问题。解决方案是使用 Fontforge 删除 TTF Names 中的字体外语

http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/

于 2013-11-20T17:53:59.140 回答