@ font-face url指向本地文件

Question

我需要在html文件中包含一个字体(OpenSymbol),字体文件在本地文件夹中(我知道它的确切绝对路径).如果我像这样使用@ font-face:

@font-face {
  font-family: "OpenSymbol";
  src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}

它适用于Chrome,Opera和Safari,但不适用于Firefox和IE9.其他@ font-face用法在所有浏览器中都可以正常使用.

顺便说一句,在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的渲染引擎... oO

顺便说一句,firefox因安全问题而出现问题:请看这里

Answer 1

您只需要一个Web开放字体格式的字体文件.转到http://www.fontconverter.org转换你的OpenSymbol.tff to OpenSymbol.woff.我是一个跨平台的开发人员,我测试了这个工作正常:

1. macOS 10.12.4(iMac)上的Safari 10.1和Firefox 52.0.2
2. Windows 7(PC)上的Internet Explorer 11.0和Firefox 52.0.1以及Google Chrome 52.0和Opera 53.0
3. iOS 10.3.1上的Safari(iPhone)
4. Android 5.0.2(华硕平板电脑)上的Chrome 57.0和Asus Browser 2.0.3

这在css中:

/* Add the decaration on top */
@font-face { 
font-family: 'OpenSymbol';
src: url('font/OpenSymbol.woff') format('woff');
}
/* in separate css .elements or even the whole body, edit your font properties */ 
body {
font-family: OpenSymbol;
font-weight: normal;
font-style: normal;
..

无需担心嵌入式OpenType(EOT)字体文件,因为IE9(2011)和IE10(2012)只需要它们.无需担心可缩放矢量图形(SVG)字体,因为自iOS 5.0起不再需要它们

自2012年以来,每个已知浏览器都完全支持Web开放字体格式(WOFF).Truetype Fonts(TTF)在iMac和PC上本地使用,也可以在Android和iPhone上本地使用.这就是为什么Web开发人员经常犯这个错误,使用TTF而不是WOFF来访问网站.

Answer 2

可能是浏览器不支持 .ttf 文件。考虑使用fontsquirrel，它将为您生成所有必需的文件（.ttf、.woff、.svg、.eot）和 css，并且适用于所有浏览器。我用它所有的时间...