css - 通过 CSS 嵌入字体；似乎没有任何效果

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;
}