@font-face 在任何浏览器中都不起作用

Question

我知道，这不完全是一个新主题，但通读所有与@font-face 相关的帖子，我仍然无法找到我的问题的答案。

我是新手，所以我假设我没有看到一个非常令人尴尬的主要/基本错误，或者我方面存在一些概念上的误解。

非常感谢任何帮助！

这是我的样式表中的内容（连同所有其他样式定义）：

   @font-face {
    font-family:'CorporateSBQ-Light';
    src:url('/fonts/CorporateSBQ-Light.eot');
    src:url('/fonts/CorporateSBQ-Light.eot?#iefix') format('embedded-opentype'),
    url('/fonts/CorporateSBQ-Light.woff') format('woff'),
    url('/fonts/CorporateSBQ-Light.ttf') format('truetype'),
    url('/fonts/CorporateSBQ-Light.svg#CorporateSBQ-Light') format('svg');
    font-weight:normal;
    font-style:normal;
    font-variant:normal;
    }
    html, body 
    {
    background-color:#FFFFFF;
    margin-top:auto;
    margin-right:auto;
    margin-bottom:auto;
    margin-left:auto;
    font-family:"CorporateSBQ-Light", Helvetica Light, Arial, sans-serif;
    font-size:16px;
    color:#9FAD9E;
    height:100%;
    width:100%;
    overflow-y:scroll;
    }

我觉得我有正确目录的正确路径和正确的拼写等，但即使经过几天尝试不同的路径，重新转换字体（在 Fontsquirrel 和另一个基于 Web 的转换器服务）等，由于某种原因，所需的字体将无法正确显示，无论是在本地 DM 或浏览器中，还是在上传时在任何浏览器中。相反，我得到的是 Helvetica 或 Arial。

我还尝试在转换之前给字体一个完全不同的名称，这只是将它转换回原始名称。转换后重命名也无济于事。

“字体”文件夹放置在根文件夹中。我也尝试将字体直接放在根文件夹中（没有任何文件夹保存它们），并且我在所有可以想到的变体中使用“CorporateSBQ-Light”和“CorporateSBQ-Light” - 没有成功。

谢谢！！

Answer 1

在字体定义之前您还有其他样式定义吗？ 如果没有尝试将它们添加为第一行。

我还记得遇到过这种麻烦，当字体与 CSS 位于不同的文件夹时，也许这也值得一试。

这些是我最近购买的一些字体的说明，在任何浏览器中都可以正常工作：

将字体上传到与 CSS 文件相同的文件夹中并复制 将代码写入您的 CSS：

/* first for IE 4–8 */
@font-face {
  font-family: Family-Name;
  src: url("Family-Name.eot");
}

/* then for WOFF-capable browsers */
@font-face {
  font-family: Family-Name;
  src: url("Family-Name.woff") format("woff");
}

/* go on with normal style definitions */
body { 
  font-family: Family-Name;
}

Answer 2

或者你可以试试

 @font-face {
    font-family:'CorporateSBQ-Light';
    src:url('../fonts/CorporateSBQ-Light.eot');
    src:url('../fonts/CorporateSBQ-Light.eot?iefix') format('truetype'),
    url('../fonts/CorporateSBQ-Light.woff') format('woff'),
    url('../fonts/CorporateSBQ-Light.ttf') format('truetype'),
    url('../fonts/CorporateSBQ-Light.svg') format('svg');
    font-weight:normal;
    font-style:normal;
    font-variant:normal;
    }