Question

我在这里经历了一系列问题而且我没有看到为什么我正在做的事情不起作用 - 但事实并非如此。我想在一个网站中使用一些非标准字体，通过css嵌入。

以下是我从FontSquirrel获得的CSS的样子：

@font-face {
    font-family: 'CrimsonRoman';
    src: url('Crimson-Roman-webfont.eot');
    src: url('Crimson-Roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('Crimson-Roman-webfont.woff') format('woff'),
         url('Crimson-Roman-webfont.ttf') format('truetype'),
         url('Crimson-Roman-webfont.svg#CrimsonRoman') format('svg');
    font-weight: normal;
    font-style: normal;

这是我在主css样式表中引用的地方：

p {
  margin: 0 0 9px;
  font-family: 'CrimsonRoman', Garamond, Times, Times New Roman, serif;
  font-size: 13px;
  line-height: 18px;
}

现在所有东西都在同一个目录中，所以我甚至还没有处理目录导航。 “p”声明本身似乎有效，因为如果我将第一个术语更改为“Crimson”，即字体在我的计算机上的名称，它会加载它（或者如果我将其切换为我在本地安装的任何其他字体）。无论问题是什么，我都没有看到它。

两张表都在我的html文档中成功链接，并且字体在主文件之前链接。

我正在使用Firefox进行测试。

Answer 1

确保您的目录路径正确并指向您的字体在服务器上的文件夹。

例如

@font-face {
    font-family: 'CrimsonRoman';
    src: url('/fonts/Crimson-Roman-webfont.eot');
    src: url('/fonts/Crimson-Roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Crimson-Roman-webfont.woff') format('woff'),
         url('/fonts/Crimson-Roman-webfont.ttf') format('truetype'),
         url('/fonts/Crimson-Roman-webfont.svg#CrimsonRoman') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 2

结果是Dreamweaver呈现页面或读取CSS等等。我最终将所有内容上传到网站，这样我就可以向几个人展示发生了什么以及神秘加载的字体。因此，今晚我的教训是将Dreamweaver的设计视图视为一个可能不准确的草图，并在我花费数小时试图修复未破坏的东西之前，先看看它们究竟在哪里。：\

Answer 3

不是你要找的答案，但我真的想建议使用Cufon。 (Direct link to Cufon)

尽管@ font-face越来越受到像IE这样的浏览器的支持，但它仍然无法在每台计算机上完美运行。正如我们所说，Cufon支持：

Internet Explorer 6,7和8
Internet Explorer 9 beta（自1.09i起）
Mozilla Firefox 1.5+
Safari 3+
Opera 9.5+（从1.10开始为9.01+）
Google Chrome 1.0+
iOS 2.0+
Opera Mini（在某种程度上）

...并在旁边给出更酷的字体选项。

通过CSS嵌入字体;似乎什么都没有用

3 个答案: