我尝试了几种不同的方法在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;
}
