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

EN

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

它非常简单，您将获得一组可供使用的字体。下载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/。

你为什么需要这些？

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

oet - for: Internet Explorer <9

svg -用于: Safari Mobile (iPhone，适用于iOS <4.2的iPad )，安卓浏览器

适用于: 3.6 >= 9、FireFox >= 3.6、Chrome >= 6

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

编辑

因为fontsquirrel.com不会渲染某些字体，而fontface.codeandmore.com已经变成了商业字体，所以有时你不得不去谷歌找一些其他的online font generator。

编辑

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

如果该字体在操作系统中不可用，请使用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');
}

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

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