我尝试了几种不同的方法在CSS中包含正确的字体.我知道我需要eot版本的字体才能在IE上运行,但是我无法识别它.我使用字体squirrel来转换字体,我将.eot文件和.otf文件放在一个名为“fonts”的文件夹中.这是我的CSS:
@font-face { font-family: BebasNeue; src: url('fonts/BebasNeue.eot'); src: url('fonts/BebasNeue.otf') format("opentype"); }
UPDATE
因此,通过以下建议,我被引导到这个网站:http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
我使用CSS:
@font-face { font-family: 'BebasNeue'; src: url('fonts/bebasneue.eot'); /* IE9 Compat Modes */ src: url('fonts/bebasneue.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */ url('fonts/bebasneue.woff') format('woff'),/* Modern Browsers */ url('fonts/bebasneue.ttf') format('truetype'),/* Safari,Android,iOS */ url('fonts/bebasneue.svg#svgBebasNeue') format('svg'); /* Legacy iOS */ }
然后我回到Font Squirrel,再次下载了新的套件,并正确地重命名了一切,并且它有效.
解决方法
您需要为此设置Access-Control-Allow-Origin HTTP标头
看这里:
IE9 blocks download of cross-origin web font
看这里:
IE9 blocks download of cross-origin web font
这有用吗?
@font-face { font-family: 'BebasNeue'; src: url('fonts/BebasNeue.eot'); src: url('fonts/BebasNeue.eot?#iefix') format('embedded-opentype'),url('fonts/BebasNeue.otf') format("opentype"); }
在Fontsquirrel他们这样做
http://www.fontsquirrel.com/fontfacedemo/bebas-neue
从那里下载@ font-face工具包
@font-face { font-family: 'BebasNeueRegular'; src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot'); src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.woff') format('woff'),url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.ttf') format('truetype'),url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。