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中运行，但不能在使用IE渲染引擎的eclipse中运行... o.O

顺便说一下，firefox因安全问题而出现问题：See here

Answer 1

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

macOS 10.12.4（iMac）上的Safari 10.1和Firefox 52.0.2
Windows 7（PC）上的Internet Explorer 11.0和Firefox 52.0.1以及Google Chrome 52.0和Opera 53.0
iOS 10.3.1（iPhone）上的Safari
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

根据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类型列表中。

Answer 3

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

@ font-face url指向本地文件

3 个答案: