@font-face 个性化页面字体

为网页个性化字体让网页显示起来更接近设计预期。当然IE是个棘手的问题。

基本使用方法：

@font-face{
 font-family:myFontName;
 src:url(’myFontName.eot’);
 src: local(’O’),
    url(’myFontName.eot?#iefix’) format(’embedded-opentype’),
    url(’myFontName.otf’) format(’opentype’),
    url(’myFontName.woff’) format(’woff’),
    url(’myFontName.ttf’) format(’truetype’),
    url(’myFontName.svg#helveticaneueblackcond’) format(’svg’);
 font-weight: normal;
 font-style: normal;
}

p {font-family:myFontName;}

“myFontName” 是字体的名称, 分别根据浏览器引入了eot格式、otf格式、woff格式、ttf格式、svg格式的字体。如此之后网页就正常了，IE8、IE7、IE6就没这么好心了。虽然网上有人说“src:url(’myFontName.eot’)”就可以解决问题，但是我怎么弄它就是没反应。

最喜欢的字体格式转换工具：http://www.font2web.com/  (一个文件包含我所有想要的格式)

or onlinefontconverter

除了IEtester颇有些让人不放心的IE测试工具推荐netrenderer

想了解更多其它：

How to Embed Webfonts Properly and How to Solve the Ambiguous “CSS3111: @font-face encountered unknown error”

RF1001: 各浏览器对 ’@font-face’ 规则支持的字体格式不同，IE 支持 EOT 字体，Firefox Safari Opera 支持 TrueType 等字体

更新时间:2013-03-21 18:31:03