我是@font-face第一次使用并从fontsquirrel下载了一个字体套件
他们建议在我的CSS中插入的代码是:
@font-face {
font-family: 'junctionregularRegular';
src: url('Junction-webfont.eot');
src: local('?'),
url('Junction-webfont.woff') format('woff'),
url('Junction-webfont.ttf') format('truetype'),
url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}
Run Code Online (Sandbox Code Playgroud)
现在,笑脸的事让我难过.但是src中的url数量也是如此 - 为什么他们推荐这么多文件,并且在呈现页面时它们都会被发送到浏览器?删除除.ttf以外的所有内容有什么害处吗?
我需要在html文件中包含一个字体(OpenSymbol),字体文件在本地文件夹中(我知道它的确切绝对路径).如果我像这样使用@ font-face:
@font-face {
font-family: "OpenSymbol";
src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}
Run Code Online (Sandbox Code Playgroud)
它适用于Chrome,Opera和Safari,但不适用于Firefox和IE9.其他@ font-face用法在所有浏览器中都可以正常使用.
顺便说一句,在Chrome中,我收到警告:
Resource interpreted as Font but transferred with MIME type application/octet-stream
Run Code Online (Sandbox Code Playgroud)
我该怎么做才能干净地包含一个未安装在操作系统上的本地存储字体?
编辑:
我发现不同网址的列表似乎不起作用!如果我把[...].ttf网址放在首位,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;
}
...
Run Code Online (Sandbox Code Playgroud)
然后
.element {
font-family: OpenType, OpenTypeEOT, [...];
}
Run Code Online (Sandbox Code Playgroud)
无论如何,它确实在IE中工作,但不在eclipse中,它使用IE的渲染引擎... oO
顺便说一句,firefox因安全问题而出现问题:请看这里