@ font-face url指向本地文件 [英] @font-face url pointing to local file

问题描述

我需要在html文件中包含字体（OpenSymbol），字体文件位于本地文件夹中（我知道它的绝对路径）。如果我使用@ font-face像这样：

I need to include a font (OpenSymbol) in a html file and the font file is in a local folder (I know the exact absolute path to it). If I use @font-face like this:

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

它适用于Chrome，Opera和Safari，

It works in Chrome, Opera and Safari, but not in Firefox neither IE9. Other @font-face usage works perfectly fine in all browsers.

Btw，在Chrome中，我收到警告：

Btw, in Chrome, I get a warning:

Resource interpreted as Font but transferred with MIME type application/octet-stream

我可以怎么做才能在操作系统上清楚地包含本地存储的未安装的字体？

What can I do to cleanly include a locally stored font which is not installed on the OS?

：

我发现不同网址的列表似乎无法正常工作！如果我把 [...]。ttf url放在第一位，而不是其他地方，Chrome会加载字体！

I found out that the listing of different urls seems not to work! Chrome loads the font if I put the [...].ttf url in the first place, but not if it's somewhere else!

第二编辑：

我可以在除Firefox外的所有浏览器中使用：

I got it to work in all browsers except 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中，引擎... oO

Anyway, it does work in IE but not in eclipse, which uses IE's rendering engine... o.O

Btw，firefox由于安全问题而出现问题：

Btw, firefox has problems because of security issues: See here

推荐答案

根据Font Squirrel的示例字体页面，IE 9和Firefox都要求字体文件从与加载到的页面相同的域中提供。所以使用@ font-face，你唯一的选择是找到你正在尝试使用的字体文件，并将其上传到网站，然后使用类似以下代码：

According to a sample font page from Font Squirrel, Both IE 9 and Firefox require font files to be served from the same domain as the page they are loaded into. So with @font-face, your only option is to find the font file(s) you are trying to use and upload them to the site, and then use code similar to the following:

@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列表类型。

One more thing from the Font Squirrel page, if you are using an IIS server, the file types need to be add to the list of MIME types.

这篇关于@ font-face url指向本地文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！