为什么@ font-face只能在localhost中工作？

Question

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

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

Answer 1

Shad发现问题：“你有一个规则主体，按钮，输入，选择，进一步向下设置字体为sans serif的textarea”。

谢谢！

Answer 2

你的字体familly名称可能是错的.. 试试这个

FONT-FAMILY： 'ColaborateThinRegular';

http://www.fontsquirrel.com/fontfacedemo/Colaborate 看看页面的源代码。

Answer 3

在调试您的网站时，您可能想要更轻松地阅读css脚本以帮助查找一些问题。压缩应该只在所有事情都按照你的意图行事时完成。

现在你可以复制/粘贴在这个网站上，以看得更清楚： http://www.digitalcoding.com/tools/css-beautifier.html

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

正如Ettiene所说，有几个位置代码将字体设置为Lucida Grande和Courier的不同元素。这些位置是您应该引用所需字体名称ColThin的位置。您如何命名它们也很重要，请检查从松鼠上下载的文件（如果您有字体）。是包含在HTML文件演示了一些CSS它展示了如何使用@字体面字体：

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

你缺少引号，所以CSS可能无法注册新的字体名称。同样，在html上设置它，然后在代码中使用其他字体名称替换html设置。唯一重要的名字是你如何指定@ font-face名字。你可以指定它'smashed-font'，如果你把它称为'smashed-font'，它会引用你指定为'smashed-font'的文件。 'ColThin'应该没问题。

从我所看到的情况来看，您已将字体文件复制到正确的位置，但您想如何使用它们并不完全正确。

保罗·海耶斯3D实验的顺利使用，BTW。 http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/

请记住它可能无法正常上几种浏览器的工作，因此有某种的人谁是不够幸运，有WebKit浏览器，或包括替代品，如-moz和-o和回退一个不包含-webkit的css版本，以防这些转换使其成为css3规范。

如果这是令人生畏的事情，请考虑它是一种学习体验。通过您自己的工作来抛弃这些错误将使您的服务对潜在客户更有价值。