css - 为什么@font-face 只能在本地主机上工作？

Question

我在我的新网站上使用了@font-face，它在 FF 和 Chrome 的本地主机上都工作正常。但是，当我将它上传到我的服务器时，我在 FF 或 Chrome 中看不到字体。可能的原因是什么？

我的网站是http://leojiang.me

Answer 1

在调试您的网站时，您可能希望有一个更易于阅读的 css 脚本来帮助发现一些问题。仅当一切按您预期的方式运行时才应进行压缩。

现在您可以将其复制/粘贴到此站点以更清楚地查看它: http://www.digitalcoding.com/tools/css-beautifier.html

我有点怀疑@media 打印品和后来的@page 打印品。我不确定这些设置是否正确。我建议首先通过注释掉打印细节来专注于网站，以帮助您解决网络呈现问题。您可能想要设置一个测试 html 页面，其中包含您希望使用的所有各种元素，并确保它们在合并 3d 形状之前正常工作。只需制作一个 html 文件并删除这些类，这样您就可以看到所有内容如何呈现为基本网页。

正如 Ettiene 所说，代码在多个位置将不同元素的字体设置为 Lucida Grande 和 Courier。这些位置是您应该引用所需字体名称 ColThin 的地方。你如何命名它们也很重要，检查从 font squirrel 下载的文件(如果你在那里有字体)。包含的 html 演示文件有一些 css，显示如何使用 @font-face 字体:

p.style1 {font: 18px/27px 'ColaborateThinRegular', Arial, sans-serif;}

您缺少引号，因此 css 可能未注册新字体名称。同样，将其设置为 html 并在之后的代码中使用其他字体名称替换 html 设置。唯一重要的名称是如何指定 @font-face 名称。您可以将其指定为“smashed-font”，如果您将其引用为“smashed-font”，它将引用您指定为“smashed-font”的文件。 “ColThin”应该没问题。

据我所知，您已将字体文件复制到正确的位置，但您希望如何使用它们并不完全正确。

很好地利用了 Paul Hayes 3d 实验，顺便说一句。 http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/

请记住，它可能无法在多种浏览器上正常工作，因此对于那些没有足够幸运拥有 webkit 浏览器的人来说，有某种后备方案，或者包括替代方案，例如 -moz 和 -o 以及一个版本不包含 -webkit 的 css，以防万一这些转换使其进入 css3 规范。

如果这令人生畏，请将其视为一种学习经历。通过您自己的工作弥补这些错误将使您的服务对您的潜在客户更有值(value)。