@font-face指向本地文件的url
我需要在html文件中包含一个字体(OpenSymbol)，而该字体文件位于本地文件夹中(我知道它的确切绝对路径)。如果我像这样使用@font-face：
@font-face {
font-family: "OpenSymbol";
src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}它适用于Chrome、Opera和Safari浏览器，但不适用于火狐和IE9。其他@font-face用法在所有浏览器中都工作得很好。
顺便说一句，在Chrome中，我得到了一个警告：
Resource interpreted as Font but transferred with MIME type application/octet-stream如何才能干净地包含本地存储的字体，该字体是操作系统上未安装的字体( not installed )？
编辑：
我发现列出不同的urls似乎不起作用！如果我把[...].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中工作，但不能在使用IE渲染引擎的eclipse中工作。o.O
顺便说一句，火狐有问题是因为安全问题：See here
回答 3
Stack Overflow用户
发布于 2017-04-18 00:26:16
你只需要一个网页开放字体格式的字体文件。转到http://www.fontconverter.org以转换您的OpenSymbol.tff to OpenSymbol.woff。我是一名跨平台开发人员，我在以下平台上测试了它的运行情况：
(iMac)
- Internet 10.12.4 (iMac)
- Internet Explorer11.0和Firefox 52.0.1以及macOS 7(PC)上的 Chrome 52.0和Opera53.0 iOS 10.3.1 (iPhone)
- Chrome 57.0上的
- Safari和安卓5.0.2 (华硕平板电脑)
上的华硕浏览器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字体文件，因为只有IE9 (2011)和IE10 (2012)才需要它们。不需要为可伸缩矢量图形( Scalable Vector Graphics，SVG)字体而烦恼，因为从iOS 5.0开始不再需要它们
自2012年以来，Web Open Font Format (WOFF)已经被所有已知的浏览器完全支持。Truetype字体在iMac和PC上本地使用，也可以在安卓和iPhone上本地使用。这就是为什么web开发人员经常犯这个错误，使用TTF而不是WOFF来创建站点。
Stack Overflow用户
发布于 2012-08-05 07:36:05
根据font Squirrel的一个示例字体页面，IE9和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类型列表中。
Stack Overflow用户
发布于 2012-08-05 05:33:18
可能是浏览器不支持.ttf文件。考虑使用fontsquirrel，它将为您生成所有必需的文件(.ttf、.woff、.svg、.eot)和css，并且可以在所有浏览器中运行。我一直在用它。
https://stackoverflow.com/questions/11812111
复制相似问题