[英]CSS @font-face not working in ie
I have the following CSS that works within Firefox but not IE.我有以下 CSS 可以在 Firefox 中使用,但不能在 IE 中使用。 Obviously, the fonts are within the directory.
显然,字体在目录中。 Any suggestions?
有什么建议?
@font-face {
font-family: "Futura";
src: url("../fonts/Futura_Medium_BT.eot"); /* IE */
src: local("Futura"), url( "../fonts/Futura_Medium_BT.ttf" ) format("truetype"); /* non-IE */
}
body nav {
font-family: Futura, Verdana, Arial, sans-serif;
font-size:1.2em;
height: 40px;
}
I read a lot of tutorials that suggested hacks, so I came up with this solution I think is better... It seems to work fine.我阅读了很多建议 hacks 的教程,所以我想出了这个我认为更好的解决方案......它似乎工作正常。
@font-face {
font-family: MyFont; src: url('myfont.ttf');
}
@font-face{
font-family: MyFont_IE; src: url('myfont.eot');
}
.my_font{
font-family: MyFont, MyFont_IE, Arial, Helvetica, sans-serif;
}
If you're still having troubles with this, here's your solution:如果您仍然遇到此问题,这里是您的解决方案:
http://www.fontsquirrel.com/fontface/generator http://www.fontsquirrel.com/fontface/generator
It works far better/faster than any other font-generator and also gives an example for you to use.它比任何其他字体生成器工作得更好/更快,并且还提供了一个示例供您使用。
For IE > 9 you can use the following solution:对于 IE > 9,您可以使用以下解决方案:
@font-face {
font-family: OpenSansRegular;
src: url('OpenSansRegular.ttf'), url('OpenSansRegular.eot');
}
From http://readableweb.com/mo-bulletproofer-font-face-css-syntax/来自http://readableweb.com/mo-bulletproofer-font-face-css-syntax/
Now that web fonts are supported in Firefox 3.5 and 3.6, Internet Explorer, Safari, Opera 10.5, and Chrome, web authors face new questions: How do these implementations differ?
现在 Firefox 3.5 和 3.6、Internet Explorer、Safari、Opera 10.5 和 Chrome 支持网络字体,网络作者面临新问题:这些实现有何不同? What CSS techniques will accommodate all?
哪些 CSS 技术可以满足所有需求? Firefox developer John Daggett recently posted a little roundup about these issues and the workarounds that are being explored.
Firefox 开发人员 John Daggett 最近发布了一些关于这些问题和正在探索的解决方法的综述。 In response to that post, and in response to, particularly, Paul Irish's work, I came up with the following @font-face CSS syntax.
为了回应那个帖子,特别是为了回应 Paul Irish 的工作,我想出了以下 @font-face CSS 语法。 It's been tested in all of the above named browsers including IE 8, 7, and 6. So far, so good.
它已经在包括 IE 8、7 和 6 在内的所有上述浏览器中进行了测试。到目前为止,一切都很好。 The following is a test page that declares the free Droid font as a complete font-family with Regular, Italic, Bold, and Bold Italic.
以下是一个测试页面,它将免费的 Droid 字体声明为一个完整的字体系列,包括常规、斜体、粗体和粗斜体。 View source for details.
查看源代码了解详细信息。 Alert: Be aware that Readable Web has released it's first @font-face related software utility for creating natively compressed EOT files quickly and easily.
警告:请注意,Readable Web 已经发布了它的第一个 @font-face 相关软件实用程序,用于快速轻松地创建本地压缩的 EOT 文件。 It has it's own web site and, in addition to the utility itself, the download package contains helpful documentation, a test font, and an EOT test page.
它有自己的网站,除了实用程序本身,下载包还包含有用的文档、测试字体和 EOT 测试页面。 It's called EOTFAST If you're working with @font-face, it's a must-have.
它被称为 EOTFAST 如果您正在使用 @font-face,它是必备的。
Here's The Mo' Bulletproofer Code:
这是 Mo' Bulletproofer 代码:
@font-face{ /* for IE */
font-family:FishyFont;
src:url(fishy.eot);
}
@font-face { /* for non-IE */
font-family:FishyFont;
src:url(http://:/) format("No-IE-404"),url(fishy.ttf) format("truetype");
}
Font Squirrel did not work for me. Font Squirrel 对我不起作用。 I uploaded a font for conversion to multiple font format for IE support.
我上传了一种字体以转换为多种字体格式以支持 IE。 It performed onversion, which I was able to download.
它执行了转换,我可以下载。 I then uploaded content to my server per specs.
然后我根据规格将内容上传到我的服务器。 I was only either able to get Firefox or IE to work but not both.
我只能让 Firefox 或 IE 工作,但不能同时工作。 The solution that worked for me was The Mo Bullet Proofer link above.
对我有用的解决方案是上面的 Mo Bullet Proofer 链接。
You could use the Google Font API .您可以使用Google Font API 。 They say it works from IE 6 and up.
他们说它适用于 IE 6 及更高版本。 (I've not tested this.)
(我没有测试过这个。)
Google's serving infrastructure takes care of converting the font into a format compatible with any modern browser (including Internet Explorer 6 and up), ...
Google 的服务基础设施负责将字体转换为与任何现代浏览器(包括 Internet Explorer 6 及更高版本)兼容的格式,...
I have found if the font face declarations are inside a media query IE (both edge and 11) won't load them;我发现字体声明是否在媒体查询 IE 中(边缘和 11)不会加载它们; they need to be the first thing declared in the stylesheet and not wrapped in a media query
它们需要是样式表中声明的第一件事,而不是包含在媒体查询中
Change as per below更改如下
@font-face {
font-family: "Futura";
src: url("../fonts/Futura_Medium_BT.eot"); /* IE */
src: local("Futura"), url( "../fonts/Futura_Medium_BT.ttf" ) format("truetype"); /* non-IE */
}
body nav {
font-family: "Futura";
font-size:1.2em;
height: 40px;
}
1) Try putting an absolute link not relative link to your eot font - somehow old IE just don't know in which folder the css file is 2) make 2 extra @font-face declarations so it should look like this: 1) 尝试将绝对链接而不是相对链接添加到您的 eot 字体 - 不知何故,旧的 IE 只是不知道 css 文件在哪个文件夹中 2) 做 2 个额外的 @font-face 声明,所以它应该是这样的:
@font-face { /* for modern browsers and modern IE */
font-family: "Futura";
src: url("../fonts/Futura_Medium_BT.eot");
src: url("../fonts/Futura_Medium_BT.eot?#iefix") format("embedded-opentype"),
url( "../fonts/Futura_Medium_BT.ttf" ) format("truetype");
}
@font-face{ /* for old IE */
font-family: "Futura_IE";
src: url(/wp-content/themes/my-theme/fonts/Futura_Medium_BT.eot);
}
@font-face{ /* for old IE */
font-family: "Futura_IE2";
src:url(/wp-content/themes/my-theme/fonts/Futura_Medium_BT.eot?#iefix)
format("embedded-opentype");
}
.p{ font-family: "Futura", "Futura_IE", "Futura_IE2", Arial, sans-serif;
This is an example for wordpress template - absolute link should point from where your start index file is.这是 wordpress 模板的示例 - 绝对链接应指向起始索引文件所在的位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.