3

I dont understand whats going on here because when I had this code on its own it was working (in FireFox):

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

Then I added a second font in exactly the same manner, but only the first one was working:

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

Then I used a font-generator to get an EOT file for IE9 and generate the @font-face code for me, but now neither font is working in any browser (I tried IE9, FF12, Chrome & Safari5).

I then put the @font-face CSS in its own '/scripts/fonts.css' file so that the fonts and CSS were in the same folder, and I tried to use the URLs both directly ('mmfont.ttf') and by the webroot folder ('/scripts/mmfont.ttf') but still neither way is working at all.

What am I doing wrong?

Correction:

I had a typo when calling the first font 'mmfont' I did this: font-family: mm_font but now that I fixed the typo, once again only the 1st font is working with the code below, and the second font mmfont2 is not working. I tried to re-arrange the order (define the 2nd font first) but it still wont work. So now I believe there is a problem with my font file, so I will try to get another copy and see how that goes.

Update:

There seems to be nothing wrong with the code. I used FireBug to do a Source Edit of the fonts.css file, and when I renamed the url for 'mmfont2' to 'mmfont.ttf' (the URL for the 1st font) it updated the page and the font loaded, however when I renamed it back to 'mmfont2.ttf' it went back to the default font of the browser. So I am now sure it is a problem with the font file rather than the code.

It looks like this 2nd font I'm using isn't a web-compatible font. Funnily, it turns out that all along the same font has another alias "Century Gothic" which is a web-safe font and works in all the browsers without even having to link any files!!

(I don't know if I should have this question closed or deleted)

/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">

directory

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

3 回答 3

1

嘿现在更正你在css中的字体url，就像这样

url('mmfont.eot');

我认为您的字体和 css 文件在一个脚本文件夹中

于 2012-07-05T11:42:08.480 回答
1

我们想不出另一种方法，因为我们在亚马逊上的所有设置似乎都很好。相反，我们只是将字体定义本身嵌入到 data-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");
}
于 2013-02-25T23:34:30.140 回答
1

知道已经过了一年多，但万一有人来看，我敢打赌提问者将他们的网站托管在 AWS 上——你必须创建一个 CORS 规则才能让 AWS 阅读 @font-face 工具包。按照此处所述尝试此修复：http: //blog.blenderbox.com/2012/10/12/serving-font-face-fonts-to-firefox-from-an-s3-bucket/

于 2013-05-25T17:58:16.210 回答