@fontface 不起作用答案

【问题标题】：@fontface doesn't work@fontface 不起作用
【发布时间】：2012-08-15 14:40:28
【问题描述】：

@font-face {
    font-family: 'CodeLight';
    src: url("font/CODE_Light.eot"); /* IE9 Compat Modes */
    src: url("font/CODE_Light.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
         url("font/CODE_Light.woff") format("woff"), /* Modern Browsers */
         url("font/CODE_Light.ttf")  format("truetype"), /* Safari, Android, iOS */
         url("font/CODE_Light.svg#svgFontName") format("svg"); /* Legacy iOS */
    }

我正在尝试使用@font face 加载上面的字体，但是当我在 chrome 开发人员工具中检查它时它给出了 404。谁能解释一下这有什么问题。

【问题讨论】：

我猜所有文件都存在于/font?
可能是其他人所说的部分问题。如果您可以提供指向您网站的链接，以帮助我们进行诊断。
你能添加文件树吗？例如。 css 样式表或字体文件夹在哪里取决于 index.html 文件（根文件夹）？

标签： asp.net html visual-studio-2010 css

【解决方案1】：

如果它给你 404，你为你的字体指定了一个错误的 url...

如果你有这样的目录结构：

~
    css
           style.css
    fonts
           font1.eot
           font2.ttf

显然你必须这样设置：

src: url('../fonts/font1.eot")

【讨论】：

是的，但我使用了双引号而不是单引号。
@Joshua，引号的类型在这里无关紧要:) 如果您习惯使用双引号，这不是问题。很高兴它有帮助。

【解决方案2】：

您可以提供“字体”目录的完整路径，或者如果位于根目录中，则在其前面使用“/”。像这样：

src: url("/font/CODE_Light.eot");
...

【讨论】：