CSS @font-face 即问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9705327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@font-face ie problems
提问by radleybobins
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:
我尝试了几种不同的方法来在 CSS 中包含正确的字体。我知道我需要 eot 版本的字体才能在 IE 上工作，但我无法识别它。我使用 font squirrel 转换字体，并将 .eot 文件和 .otf 文件放在名为“fonts”的文件夹中，这是我的 CSS：
@font-face {
font-family: BebasNeue;
src: url('fonts/BebasNeue.eot');
src: url('fonts/BebasNeue.otf') format("opentype");
}
UPDATESo through suggestions from below, I was led to this site: http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
更新所以通过下面的建议，我被带到了这个网站：http: //www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax
I used the CSS:
我使用了 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 */
}
Then I went back to Font Squirrel, downloaded the kit fresh again, and renamed everything correctly, and it worked.
然后我回到 Font Squirrel，再次下载全新的工具包，并正确重命名所有内容，并且它工作正常。
回答by yunzen
You need to set Access-Control-Allow-Origin HTTP Header for this
See here:
IE9 blocks download of cross-origin web font
您需要为此设置 Access-Control-Allow-Origin HTTP Header
请参见此处：
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");
}
On Fontsquirrel they do it this way
http://www.fontsquirrel.com/fontfacedemo/bebas-neue
在 Fontsquirrel 他们这样做
http://www.fontsquirrel.com/fontfacedemo/bebas-neue
Download the @font-face kit from there
从那里下载@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;
}
回答by Alaa Badran
This code should make it work.. if not, check your font URL (if it exists).
这段代码应该让它工作......如果没有，请检查您的字体 URL（如果存在）。
@font-face {
font-family: 'BebasNeue';
src: url('fonts/BebasNeue.eot');
src: local('BebasNeue'), local('BebasNeue'), url('fonts/BebasNeue.eot') format('embedded-opentype');
}
回答by Devon Huxtable
This is the css I have for Bebas on our site (not Neue), but note the URL:
这是我在我们网站（不是 Neue）上为 Bebas 使用的 css，但请注意 URL：
@font-face {
font-family: 'Bebas';
src: url('../fonts/bebas-webfont.eot');
src: url('../fonts/bebas-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/bebas-webfont.ttf') format('truetype'),
url('../fonts/bebas-webfont.svg#bebasregular') format('svg');
font-weight: normal;
font-style: normal;
}
回答by Alaa Badran
Sometimes when you convert font type (other that TTF) the font doesn't work.. Try to use TTF font and convert it..
有时，当您转换字体类型（除 TTF 之外）时，字体不起作用.. 尝试使用 TTF 字体并将其转换..
I didn't experience that with TTF fonts.. but i did with other font types.
我在使用 TTF 字体时没有遇到过这种情况……但我使用了其他字体类型。
