【问题标题】：@font-face not working at all@font-face 根本不工作
【发布时间】：2013-05-26 01:58:16
【问题描述】：

我不明白这里发生了什么，因为当我自己拥有这段代码时它正在工作（在 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 但现在我修正了错字，再次只有第一个字体与下面的代码一起使用，第二个字体 mmfont2不管用。我试图重新排列顺序（首先定义第二个字体），但它仍然无法正常工作。所以现在我认为我的字体文件有问题，所以我会尝试获取另一个副本，看看情况如何。

更新：

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

我使用的第二种字体似乎不是网络兼容字体。有趣的是，事实证明，同一种字体一直都有另一个别名“Century Gothic”，这是一种网络安全字体，可以在所有浏览器中使用，甚至无需链接任何文件！！

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

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

您能否发布一个JS Fiddle 或类似的演示，让我们看到它的实际效果？不过，显然你必须链接到你的字体文件。因此可能存在（潜在的）许可问题。
可能不是解决方案，但在<link>标签中添加type=text/css。
另外，从 /scripts 文件夹中已经存在的 css 文件中删除 /scripts 目录指示。
@poepje 哎呀，我补充了，但是是的，它不是解决方案。是的，正如我在帖子中提到的那样，我确实删除了 URL 的 /scripts/ 部分
@DavidThomas 我目前在本地主机上工作，所以我无法上传字体，它是一种有许可证的字体，所以我无法上传它

标签： html css fonts font-face

【解决方案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");
}

【讨论】：

您的帖子被系统标记为内容过长 - 我认为使用数据 URI 嵌入字体就足够了。
@BoltClock 我已经从 URI 中删除了大部分数据，如果帖子仍然显示过长，请告诉我。
不再是 - 我们假设您自己编辑答案而取消了该标志 :) 为了完整起见，您需要用简单的英语解释这里发生的事情，以帮助其他读者一目了然您的答案是什么。

【解决方案2】：

嘿，现在纠正你在 css 中的字体网址，就像这样

url('mmfont.eot');

我认为您的字体和 css 文件位于 scripts

的一个文件夹中

【讨论】：

@hcharge 如果您完全阅读了我的帖子，我已经尝试过了，但仍然无法加载字体
嗨，现在fontsquirrel.com/fontface/generator uplod .ttf 字体和 ganrate 到 css 套件所有浏览器并习惯了这个
@RohitAzad 我已经使用 font-squirrel 来获取该代码......它来自 font-squirrel
你能告诉我你页面的实时路径而不是你应用这个字体吗
@RohitAzad 我正在本地主机上离线工作......但我将所有相关代码放在我的帖子中。字体在那里，因为当我去 localhost:3333/scripts/mmfont.ttf 它要求我下载字体

【解决方案3】：

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

【讨论】：

更正：

更新：

/scripts/fonts.css

/index.html

目录