我需要在html文件中包含一个字体(OpenSymbol),并且字体文件在本地文件夹中(我知道它的确切的绝对路径).如果我这样使用@ font-face：
@font-face {
font-family: "OpenSymbol";
src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}
它适用于Chrome,Opera和Safari,但不能在Firefox中都是IE9.其他@ font-face使用在所有浏览器中都能完美地运行.
Btw,在Chrome中,我发出警告：
Resource interpreted as Font but transferred with MIME type application/octet-stream
我可以做些什么来干净地包括一个本地存储的字体,这个字体是不是安装在操作系统上？
编辑：
我发现不同网址的列表似乎不起作用！如果我将[…] .ttf网址放在第一位,Chrome会加载字体,但如果它在别的地方,则加载字体
第二编辑：
我得到它除了firefox以外的所有浏览器工作：
@font-face {
font-family: 'OpenSymbol';
src: url('file:<path>/openSymbol.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSymbolEOT';
src: url('file:<path>/openSymbol.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
...
接着
.element {
font-family: OpenType,OpenTypeEOT,[...];
}
无论如何,它在IE中工作,但不在eclipse中,它使用IE的渲染引擎… o.O
Btw,firefox有问题,因为安全问题：See here
解决方法
根据Font Squirrel的样本字体页面,IE 9和Firefox都需要从与其加载的页面相同的域中提供字体文件.所以用@ font-face,你唯一的选择是找到你要使用的字体文件,并将其上传到网站,然后使用类似于以下的代码：
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
url('webfont.woff') format('woff'),/* Modern Browsers */
url('webfont.ttf') format('truetype'),/* Safari,Android,iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
取自http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
编辑：如果您使用的是IIS服务器,则来自“Font Squirrel”页面的另一件事情是,需要将文件类型添加到MIME类型列表中.
