33

我需要在 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

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

编辑:

我发现不同网址的列表似乎不起作用!如果我将[...].ttfurl 放在首位,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 中工作...... oO

顺便说一句,firefox 由于安全问题而出现问题:请参阅此处

4

3 回答 3

17

您只需要一个 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 (iPhone) 上的 Safari
  4. Android 5.0.2(Asus 平板电脑)上的 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;
..

无需担心 Embedded OpenType (EOT) 字体文件,因为它们仅在 IE9 (2011) 和 IE10 (2012) 中需要。无需担心可缩放矢量图形 (SVG) 字体,因为自 iOS 5.0 起不再需要它们

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

于 2017-04-17T16:26:16.450 回答
3

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

于 2012-08-04T21:33:18.213 回答
3

根据 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

编辑:Font Squirrel 页面的另一件事是,如果您使用的是 IIS 服务器,则需要将文件类型添加到 MIME 类型列表中。

于 2012-08-04T23:36:05.367 回答