Html @font-face url 指向本地文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11812111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@font-face url pointing to local file
提问by Cedric Reichenbach
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:
我需要在 html 文件中包含字体 (OpenSymbol)，并且字体文件位于本地文件夹中（我知道它的确切绝对路径）。如果我像这样使用@font-face：
@font-face {
font-family: "OpenSymbol";
src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}
It works in Chrome, Opera and Safari, but not in Firefox neither IE9. Other @font-face usage works perfectly fine in all browsers.
它适用于 Chrome、Opera 和 Safari，但不适用于 Firefox 和 IE9。其他@font-face 用法在所有浏览器中都可以正常工作。
Btw, in Chrome, I get a warning:
顺便说一句，在 Chrome 中，我收到一条警告：
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 installedon the OS?
我该怎么做才能干净地包含未安装在操作系统上的本地存储字体？
Edit:
编辑：
I found out that the listing of different urls seems not to work! Chrome loads the font if I put the [...].ttfurl in the first place, but not if it's somewhere else!
我发现列出不同的网址似乎不起作用！如果我将[...].ttfurl 放在首位，Chrome 会加载字体，但如果它在其他地方则不会！
2nd Edit:
第二次编辑：
I got it to work in all browsers except firefox:
我让它在除 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;
}
...
and then
进而
.element {
font-family: OpenType, OpenTypeEOT, [...];
}
Anyway, it does work in IE but not in eclipse, which uses IE's rendering engine... o.O
无论如何，它在 IE 中有效，但在使用 IE 渲染引擎的 Eclipse 中无效...... oO
Btw, firefox has problems because of security issues: See here
顺便说一句，由于安全问题，firefox 有问题：见这里
回答by Geert Jan
You just need one font file in web open font format. Go to http://www.fontconverter.orgto convert your OpenSymbol.tff to OpenSymbol.woff. I am a cross-platform developer and i tested this works okay on:
您只需要一个网络开放字体格式的字体文件。转到http://www.fontconverter.org将您的OpenSymbol.tff to OpenSymbol.woff. 我是一名跨平台开发人员，我测试了它在以下方面的工作正常：
- Safari 10.1 and Firefox 52.0.2 on macOS 10.12.4 (iMac)
- Internet Explorer 11.0 and Firefox 52.0.1 and Google Chrome 52.0 and Opera 53.0 on Windows 7 (PC)
- Safari on iOS 10.3.1 (iPhone)
- Chrome 57.0 and Asus Browser 2.0.3 on Android 5.0.2 (Asus tablet)
- 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
This goes in the css:
这在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;
..
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
无需理会嵌入式 OpenType (EOT) 字体文件，因为它们仅在 IE9 (2011) 和 IE10 (2012) 中需要。无需理会可缩放矢量图形 (SVG) 字体，因为自 iOS 5.0 起不再需要它们
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.
自 2012 年以来，每个已知浏览器都完全支持 Web 开放字体格式 (WOFF)。Truetype 字体 (TTF) 在 iMac 和 PC 上本地使用，也可以在 Android 和 iPhone 上本地使用。这就是为什么 Web 开发人员经常犯这个错误，在网站上使用 TTF 而不是 WOFF。
回答by Greg Rozmarynowycz
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 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 */
}
Taken from http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
取自http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
EDIT: 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 Squirrel 页面中的另一件事，如果您使用的是 IIS 服务器，则需要将文件类型添加到 MIME 类型列表中。
回答by Pevara
It might be the browser is just not supporting the .ttf file. Consider working with fontsquirrel, it will generate all required files (.ttf, .woff, .svg, .eot) and css for you, and works in all browsers. I use it all the time...
可能是浏览器不支持 .ttf 文件。考虑使用fontsquirrel，它将为您生成所有必需的文件（.ttf、.woff、.svg、.eot）和 css，并且适用于所有浏览器。我用它所有的时间...
