校正：

Question

我不明白这里发生了什么，因为当我自己拥有这个代码时，它正在工作（在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文件并为我生成@ font-face代码，但现在任何浏览器都没有这种字体（我试过IE9，FF12，Chrome和Safari5）。

然后我将@ font-face CSS放在它自己的'/scripts/fonts.css'文件中，这样字体和CSS就在同一个文件夹中，我试着直接使用这些URL（'mmfont.ttf '）和webroot文件夹（'/ scripts / mmfont.ttf'），但仍然没有办法。

我做错了什么？

校正：

我在调用第一个字体“mmfont”时输了一个拼写错误：font-family: mm_font但是现在我修复了拼写错误，再次只有第一个字体使用下面的代码，第二个字体{ {1}}无效。我试图重新安排订单（首先定义第二个字体），但它仍然无法正常工作。所以现在我相信我的字体文件存在问题，所以我会尝试另一个副本，看看情况如何。

更新

代码似乎没有任何问题。我使用FireBug对fonts.css文件进行源编辑，当我将'mmfont2'的url重命名为'mmfont.ttf'（第一种字体的URL）时，它更新了页面和加载的字体，但是当我将其重命名为'mmfont2.ttf'，它又回到了浏览器的默认字体。所以我现在确定它是字体文件而不是代码的问题。

看起来我使用的第二种字体不是与网络兼容的字体。有趣的是，事实证明，所有相同的字体都有另一个别名“Century Gothic”，它是一种网络安全字体，适用于所有浏览器，甚至无需链接任何文件!!

（我不知道是否应该关闭或删除此问题）

/scripts/fonts.css

mmfont2

/index.html

@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;
}

我们无法找到另一种方式，因为看起来我们在亚马逊上的所有设置都很好。相反，我们只是将字体定义本身嵌入到数据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 3

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

@ font-face根本不工作

校正：

更新

/scripts/fonts.css

/index.html

目录

3 个答案: