html - @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

我该怎么做才能干净地包含操作系统上未安装的本地存储字体？

编辑:

我发现列出不同的 url 似乎不起作用!如果我将 [...].ttf url 放在首位，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 中确实有效，但在使用 IE 渲染引擎的 eclipse 中无效...o.O

顺便说一句，firefox 存在安全问题:See here

Answer 1

您只需要一个网络开放字体格式的字体文件。转到 http://www.fontconverter.org将您的 OpenSymbol.tff 转换为 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 (iPhone) 上的 Safari
4. Android 5.0.2 上的 Chrome 57.0 和 Asus Browser 2.0.3(Asus 平板电脑)

这在 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。