html – @ font-face url指向本地文件

我需要在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类型列表中.

html – @ font-face url指向本地文件

解决方法

相关文章