Css3 @fontface 不适用于 Chrome 17 和 Firefox 10

发布于 2025-01-05 07:27:14 字数 1057 浏览 0 评论 0原文

我正在尝试这段代码对于阿拉伯字体的 @fontface ：

@font-face {
font-family: 'MothnnaFont';
src: url('fonts/mothnna.eot'); /* IE9 Compat Modes */
src: url('fonts/mothnna.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/mothnna.woff') format('woff'), /* Modern Browsers */
    url('fonts/mothnna.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('fonts/mothnna.svg#svgMothnnaFont') format('svg'); /* Legacy iOS */
}

我正在名为 demo 的类中使用该字体：

.demo
{
    font-family:'MothnnaFont',Sans-Serif;
    width:800px;
    margin:10px auto;
    text-align:center;
    border:1px solid #666;
    padding:10px;
    direction: rtl;
}

此代码在 ie 上工作，但在 firefox 10 或 chrome 17 上不起作用

这是一个演示 http://tmr.hyperphp.com/font/demo.html

这是字体的样子

在此处输入图像描述

那么有人可以帮助我使这种字体在所有浏览器中显示吗？

已解决：刚刚下载了字体并再次转换，现在一切正常谢谢大家的帮助

原文

I'm trying this code For the @fontface for an arabic font :

@font-face {
font-family: 'MothnnaFont';
src: url('fonts/mothnna.eot'); /* IE9 Compat Modes */
src: url('fonts/mothnna.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/mothnna.woff') format('woff'), /* Modern Browsers */
    url('fonts/mothnna.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('fonts/mothnna.svg#svgMothnnaFont') format('svg'); /* Legacy iOS */
}

I'm using the font in a class named demo :

.demo
{
    font-family:'MothnnaFont',Sans-Serif;
    width:800px;
    margin:10px auto;
    text-align:center;
    border:1px solid #666;
    padding:10px;
    direction: rtl;
}

This code is working on ie but it's not working on firefox 10 or chrome 17

Here is a demo http://tmr.hyperphp.com/font/demo.html

Here is how the font should look like

enter image description here

So anybody can help me to make this font appear a cross all browsers ?

Solved: just downloaded the font and converted it again and it's all working now
thank you all for helping

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼波传意 2025-01-12 07:27:14

这种嵌入网络字体的语法不再是万无一失的。
尝试使用 Fontspring 语法：

@font-face {
    font-family: 'MothnnaFont';
    src: url('fonts/mothnna.eot?#iefix') format('embedded-opentype'),
         url('fonts/mothnna.woff') format('woff'),
         url('fonts/mothnna.ttf')  format('truetype'),
         url('fonts/mothnna.svg#svgMothnnaFont') format('svg');
}

这只是您必须修复的“src”属性的第一次双重出现。

这将解决您的问题。

有关语法的更多信息，请查看此源。顺便说一句，fontsquirrel 也使用此语法作为默认语法。

This syntax of embedding web-fonts is not bulletproof anymore.
Try using the Fontspring syntax instead:

@font-face {
    font-family: 'MothnnaFont';
    src: url('fonts/mothnna.eot?#iefix') format('embedded-opentype'),
         url('fonts/mothnna.woff') format('woff'),
         url('fonts/mothnna.ttf')  format('truetype'),
         url('fonts/mothnna.svg#svgMothnnaFont') format('svg');
}

It's just the first double appearance of the "src"-attribute you have to fix.

This will solve your problem.

For more information about the syntax, take a look at this source. And by the way, fontsquirrel is also using this syntax as its default.

回复收藏 0 原文

~没有更多了~