我有一些 Web 应用程序遵循 Microsoft 的 Metro 风格(即:new outlook)。 但是我使用的字体有问题。 默认字体是“Segoe”系列,当用户在具有桌面字体Segoe UI的系统中输入应用程序时,一切正常。但在某些情况下,用户使用的 Mac 或 Ubuntu 不附带“Segoe UI”,并且导航器使用辅助字体(在我的例子中是 Tahoma)。
在新的 Outlook 中,无论您使用什么操作系统,它始终使用 Segoe UI 系列(我认为他们使用的是网络字体)
有些人跟我说使用网络字体,但我到处都没有找到(我在很多网络字体网站上搜索)Segoe 家族的网络字体。
有人知道我如何解决这种情况吗?
最佳答案
首先,每种浏览器都有不同类型的字体。为了确保它在每个浏览器中都能正常工作,您需要至少输入 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/
关于css - 如何在不同的导航器和操作系统中呈现 Segoe UI 字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14399484/