@font-face 指向本地文件的 url

Posted 2023-03-06

【中文标题】@font-face 指向本地文件的 url

【英文标题】：@font-face url pointing to local file

【发布时间】：2012-08-02 11:16:14

【问题描述】：

我需要在 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 中确实可以工作，但在 Eclipse 中却不行，它使用 IE 的渲染引擎...o.O

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

【问题讨论】：

“本地”文件到底是什么意思？用户文件系统上的本地 URL？

据我所知，该警告没有多大意义（如果我错了，请告诉我）。这只是意味着调用该字体的服务器发送了带有该字体的错误标头。据我所知，您唯一能做的就是编辑服务器设置以更改它为 .otf 文件发送的标头（我相信这是扩展名）。只要字体显示正确，那么从经验上来说没什么大不了的。

@Pekka：是的，没错。例如（在 Windows 上）：file:/C:/path/to/folder/openSymbol.ttf

如果用户有字体，那么就没有理由使用@font-face，如果他们没有，那么你的CSS就不能工作。 IE 9也需要@font-face的特殊实现，我认为IE中加载的字体必须是.eot。

不，用户没有字体！在一个带有html界面的eclipse插件中使用，字体文件是插件的一部分。我用.eot? 试过了，没有帮助... :(

【参考方案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 和华硕浏览器 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。

【讨论】：

浏览器支持：creativemarket.com/blog/the-missing-guide-to-font-formats

【参考方案2】：

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

【讨论】：

真的吗？这可能意味着该字体已获得许可，甚至可能不允许您将其用作网络字体...

IE 和 Firefox 对字体文件有相同的域限制

我将不得不对其进行详细测试，但是采用 fontsquirrel 字体和 @font-face（当然是替换路径）会产生与以前相同的结果...

检查过：它甚至在 fontsquirrel 提供的示例中都不起作用！

而且来自 fontsquirrel 的字体无法使用，甚至 chrome 中的 .ttf 也无法使用！我以前的本地人确实有效。

【参考方案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 类型列表中。

【讨论】：

我没有使用服务器，一切都在文件系统本地运行。

把字体文件和样式表放在同一个目录下，用相对路径加载看看是否有效。