@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，但不适用于 Firefox 和 IE9.其他@font-face 用法在所有浏览器中都可以正常工作.

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

顺便说一句，在 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 中有效，但在使用 IE 渲染引擎的 Eclipse 中无效...o.O

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

顺便说一句，由于安全问题，firefox 有问题:见这里

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

推荐答案

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

You just need one font file in web open font format. Go to http://www.fontconverter.org to convert your OpenSymbol.tff to OpenSymbol.woff. I am a cross-platform developer and i tested this works okay on:

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

这在 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 起不再需要它们

No need to bother with Embedded OpenType (EOT) fontfiles, because they are only needed for IE9 (2011) and IE10 (2012). No need to bother with Scalable Vector Graphics (SVG) fonts, because they're no longer needed since iOS 5.0

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

Already since 2012 Web Open Font Format (WOFF) is fully supported by every known browser. Truetype Fonts (TTF) are used local on iMac and PC, and can be used local on Android and iPhone as well. That's why web developers often make this mistake, using TTF instead of WOFF for a site.

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