如何呈现在不同的导航器和操作系统的的Segoe UI字体(How to render Segoe U

我有下面的微软（即：新的Outlook）的Metro风格的一些Web应用程序。但我有与我使用的字体烦恼。默认字体是“濑越”的家庭，当用户在有桌面字体的Segoe UI系统的应用程序中输入，一切正常。但在某些情况下，用户使用的是Mac或Ubuntu不附带“的Segoe UI”和导航使用secundary字体（在我的情况，宋体）。

在新的Outlook使用的是什么操作系统并不重要，它总是使用的Segoe UI家人（我认为他们的网络字体）

有些人对我说使用网络字体，但我没有找到无处在（我在搜索网页字体的网站很多）的Segoe家庭的Web字体。

是否有人有任何想法，我怎么解决这种情况呢？

Answer 1:

首先，有difrent类型为每个浏览器的字体。为了确保它会在每个浏览器你需要把至少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，铬<6，Safari和Opera

OET - 用于：Internet Explorer的<9

SVG - 为：野生移动（的iPhone，iPad为iOS <4.2），Android浏览器

WOFF - 为：的Internet Explorer> = 9，火狐> = 3.6，铬> = 6

Segoe.eot -和其他人的联系（相对在这种情况下）这些字体文件。

编辑

由于fontsquirrel.com不会使某些字体和fontface.codeandmore.com已更改为商业有时你必须谷歌的其他一些online font generator 。

编辑

如果fontsquirrel.com不会帮助你尝试使用： http://www.font2web.com/

Answer 2:

使用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');
}

Answer 3:

我们的用户面临的Segoe同样的问题。解决办法是删除在TTF名称中使用Fontforge字体外语

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

文章来源: How to render Segoe UI font in different navigators and OS's