Internet Explorer 9,Firefox支持@ font-face规则 Opera,Chrome和Safari。
但是,Internet Explorer 9仅支持.eot类型字体 Firefox,Chrome,Safari和Opera支持.ttf和.otf类型的字体。
注意:Internet Explorer 8及更早版本,不支持 @ font-face rule。
此文本来自here。因此,为了使用IE9的@ font-face,我应该只指定EOT字体文件:
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}
特别是我使用Myriad Pro,我有OTF字体。我如何将它们转换为EOT类型?
关于IE7和IE8应该使用什么技巧/黑客来获得所需的结果?
答案 0 :(得分:9)
我认为这几乎完全是跨浏览器
@font-face {
font-family: 'Name';
src: url('location.eot');
src: url('location.eot#iefix') format('embedded-opentype'),
url('location.woff') format('woff'),
url('location.ttf') format('truetype'),
url('location.svg#Name') format('svg');
font-weight: normal;
font-style: normal;
}
位置是服务器上的路径,名称是字体的名称
答案 1 :(得分:3)
首先,您没有嵌入大多数字体的版权 - 任何人都可以下载它们,因此将字体放在您的服务器上供别人下载没有什么不同。
我的建议是使用此处的字体squirrel工具:http://www.fontsquirrel.com/fontface/generator为您生成文件和代码。
小心不要分享您没有权利使用的字体。
答案 2 :(得分:0)
Jacktheripper已经发布了一个很好的字体,
我建议您阅读以下关于该主题的好文章:
就个人而言,我使用Google Web Fonts并对此非常满意。使用各种可用字体,您无需转换字体,嵌入正确的代码以及担心版权问题。
答案 3 :(得分:0)
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome.woff2') format('woff2'),
url('/fonts/awesome.woff') format('woff'),
url('/fonts/awesome.ttf') format('truetype'),
url('/fonts/awesome.eot') format('embedded-opentype');
}
local()指令允许您引用,加载和使用本地安装的字体。
url()指令允许您加载外部字体,并允许包含可选格式()提示