@ font-face完全不工作 [英] @font-face not working at all
问题描述
我不明白这里发生了什么，因为当我有这个代码在它自己的工作（在FireFox）：
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;
}
然后我使用一个字体生成器来获取IE9的EOT文件并生成对我来说，@ font-face代码，但现在没有字体在任何浏览器中工作（我尝试IE9，FF12，Chrome和Safari5）。
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).
@ font-face CSS在自己的/scripts/fonts.css文件中，以使字体和CSS在同一个文件夹，我试图直接（'mmfont.ttf'）和webroot文件夹（'/scripts/mmfont.ttf'），但仍然无法工作。
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.
我做错了什么？
当调用第一个字体'mmfont'时，我有一个错字我这样做： font-family：mm_font 但现在我修正了错字，再次只有第一个字体使用下面的代码，第二个字体 mmfont2 不工作。我试图重新排列顺序（首先定义第二个字体），但它仍然无法工作。所以现在我相信我的字体文件有一个问题，所以我会尝试得到另一个副本，看看怎么回事。
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.
代码似乎没有问题。我使用FireBug做fonts.css文件的源代码编辑，当我将mmfont2的URL重命名为mmfont.ttf（第一个字体的URL）时，它更新了页面和加载的字体，我将其重命名为mmfont2.ttf，它回到浏览器的默认字体。所以我现在确定这是一个与字体文件而不是代码的问题。
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.
看起来像我使用的第二个字体不是一个web兼容字体。有趣的是，事实证明，所有的相同的字体有另一个别名世纪哥特式，这是一个网络安全的字体，工作在所有浏览器，甚至不必链接任何文件!!
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)
@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
/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
推荐答案
我们无法想出另一种方法，因为它似乎在亚马逊上的所有设置都很好。相反，我们只是将字体定义本身嵌入到数据uri调用中，如下所示。在StackOverflow中，大部分的字体定义都被省略了大小限制的答案，但是这应该给你一个好的想法我们的方法。
We couldn't figure out another way around, as it appeared all of our settings on Amazon were fine. Instead, we just embedded the font definition itself into a data-uri call, as seen below. Much of the font definition has been omitted to size constraints of answers in StackOverflow, but this should give you a good idea of our approach.
@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");
}
这篇关于@ font-face完全不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
