@字体面并不工作(@font-face not working at all)

2019-09-19 03:29发布

我不明白什么怎么回事,因为我对自己的这是工作(在FireFox)这样的代码:

@font-face {
    font-family: 'mmfont';
    src: url('/scripts/mmfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

然后我在完全相同的方式加入的第二字体,但只有第一个是工作:

@font-face {
    font-family: 'mmfont2';
    src: url('/scripts/mmfont2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

然后,我使用的字体发生器获得了IE9的EOT文件,并生成@字体面的代码对我来说,现在既不字体工作在任何浏览器(我试过IE9,FF12,铬,Safari5)。

然后我把@字体面CSS在自己的“/scripts/fonts.css”文件,这样字体和CSS在同一个文件夹中,我试图用的网址都直接(“mmfont.ttf”)和通过Web根目录文件夹(“/scripts/mmfont.ttf”),但仍然没有办法正常工作的。

我究竟做错了什么?

更正:

:调用第一个字体“mmfont”我这样做时,我有一个错字font-family: mm_font但现在,我固定的错字,再次只有第一字体正在与下面的代码,而第二字体mmfont2不工作。 我试图重新安排的顺序(先定义第二字体),但它仍然不会工作。 所以,现在我相信这是与我的字体文件有问题,所以我会尝试让另一个副本,并看到如何继续下去。

更新:

似乎是没有错的代码。 我用萤火做fonts.css文件的源代码编辑,当我改名为“mmfont2”到“mmfont.ttf”(网址为第1字体)的URL它更新了页面,并加载的字体,但是当我给它改名回“mmfont2.ttf”这又回到了浏览器的默认字体。 所以,我现在相信这是字体文件,而不是代码中的问题。

它看起来像我使用这第二字体不是网络兼容的字体。 有趣地,事实证明,所有沿着相同的字体有另一个别名“世纪的哥特式”,这是一个网络安全的字体和甚至无需连接任何文件中的所有浏览器上运行!

(我不知道我是否应该关闭或删除这个问题)


/scripts/fonts.css

@CHARSET "ISO-8859-1";
@font-face {
    font-family: 'mmfont';
    src: url('/scripts/mmfont.eot');
    src: url('/scripts/mmfont.eot?#iefix') format('embedded-opentype'),
         url('/scripts/mmfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'mmfont2';
    src: url('/scripts/mmfont2.eot');
    src: url('/scripts/mmfont2.eot?#iefix') format('embedded-opentype'),
         url('/scripts/mmfont2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/index.html

<link rel="StyleSheet" href="/scripts/fonts.css" type="text/css">

目录

/  
/index.html  
/scripts/  
/scripts/mmfont.ttf  
/scripts/mmfont.eot  
/scripts/mmfont2.ttf  
/scripts/mmfont2.eot
/scripts/fonts.css

Answer 1:

我们不能左右想出另一种方式,因为它似乎我们所有的在Amazon的设置都很好。 相反,我们只是嵌入字体定义本身到数据URI呼叫,如下图所示。 大部分字体定义的省略了在StackOverflow的答案大小的限制,但是这应该给你我们的做法是一个好主意。

@font-face {
    font-family: "PFDinTextPro-Light";
    src: url("233cd7_2_0-webfont.eot");
}
@font-face {
    font-family: "PFDinTextPro-Light";
    font-style: normal;
    font-weight: normal;
    src: url("233cd7_2_0-webfont.eot?#iefix") format("embedded-opentype"), url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAFq4ABEAAAAAmrQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABgAAAABwAAAAcYqvy...dRcDMyMXA5M2mM+m4LqJvRPKYQVy2CKhHBYgh9USyuGAaJOCaeMESnLMgHAYN3BBDecFinIdZ9LeyOxWBuTyALm8+XAuN5DLEwjn8oGM5Kr/zwAX4Qcq4HsC5woAufy1MG7kBhFtANGLRQMAAVB7j+oAAA==") format("woff"), url("233cd7_2_0-webfont.ttf") format("truetype");
}


Answer 2:

嘿,现在正确的在CSS您的字体URL作为这样

url('mmfont.eot');

我觉得你的字体和CSS文件脚本的一个文件夹中



Answer 3:

知道这是在一年后,但只是柜面任何人来寻找,我打赌提问收容了他们的网站上AWS - 你必须创建一个CORS规则获得AWS阅读@字体面对面套件。 这里描述试试这个修复: http://blog.blenderbox.com/2012/10/12/serving-font-face-fonts-to-firefox-from-an-s3-bucket/



文章来源: @font-face not working at all