@ font-face ie问题 [英] @font-face ie problems
问题描述
我已经尝试过几种不同的方法来在CSS中包含正确的字体。我知道我需要的eot版本的字体在IE上工作,但我不能让它识别它。我使用字体squirrel来转换字体,我把.eot文件和.otf文件放在一个名为fonts的文件夹下面是我的CSS:
I have tried a few different ways to include the correct fonts in the CSS. I know that I need the eot version for the font to work on IE, but I can't get it to recognize it. I have used font squirrel to convert the fonts, and I have placed the .eot file and .otf file in a folder called "fonts" Here is my 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,
Then I went back to Font Squirrel, downloaded the kit fresh again, and renamed everything correctly, and it worked.
推荐答案
您需要设置Access-Control-Allow-Origin HTTP此标题
请参阅这里:
IE9阻止下载跨源网页字体
You need to set Access-Control-Allow-Origin HTTP Header for this
See here:
IE9 blocks download of cross-origin web font
这是否有效? >
Does this work?
@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套件
Download the @font-face kit from there
@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;
}
这篇关于@ font-face ie问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!