如何在不同的导航器和操作系统中渲染Segoe UI字体

Question

我有一些遵循微软地铁风格的网络应用程序(即:新的展望).但是我遇到了我使用的字体问题.默认字体是"Segoe"系列,当用户在具有桌面字体Segoe UI的系统中输入应用程序时,一切都会正常.但在某些情况下,用户使用的Mac或Ubuntu不带"Segoe UI",导航器使用secundary字体(在我的情况下,Tahoma).

在新的Outlook中,无论您使用的是什么操作系统,它总是使用Segoe UI系列(我认为他们使用的是Web字体)

有些人跟我说使用网络字体,但我没有找到(我搜索了很多网页字体网站)Segoe家族的网络字体.

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

Answer 1

首先,每种浏览器都有不同类型的字体.要确保它在每个浏览器中都有效,您需要至少设置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 - for:FireFox,Chrome <6,Safari和Opera

oet - for:Internet Explorer <9

svg - for:Safari Mobile(iPhone,iPad for iOS <4.2),Android浏览器

woff - for:Internet Explorer> = 9,FireFox> = 3.6,Chrome> = 6

Segoe.eot - 和其他人是这些字体文件的链接(在这种情况下相对).

编辑

因为fontsquirrel.com不渲染某些字体,并且fontface.codeandmore.com有时候已经改为商业化,你将不得不谷歌其他一些online font generator.

编辑

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