首先,每个浏览器都有不同类型的字体。为了确保在每个浏览器中都能正常工作,您需要至少放置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
eot - 用于: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
有时会变成商业字体,您将不得不搜索其他一些在线字体生成器
。
编辑
如果fontsquirrel.com
无法帮助您,请尝试使用:http://www.font2web.com/