Question

Hello社区！

我目前正在开发自己的公司网站，我似乎无法让@ font-face正常工作。这就是css的样子：

@font-face {
    font-family: 'BebasNeue';
    src: url('type/BebasNeue-webfont.eot?') format('eot'),
         url('type/BebasNeue-webfont.woff') format('woff'),
         url('type/BebasNeue-webfont.ttf') format('truetype'),
         url('type/BebasNeue-webfont.svg#webfontj1CI1MAi') format('svg');
}

#nav li {
    display: inline;
    margin-left: 20px;
    font-family: BebasNeue, Impact;
    font-size: 24px;
    color: #333333;
    letter-spacing: 1pt;
    }

@ font-face导入基本上是直接来自Font Squirrel @ font-face生成器。我还没有发现什么是错的，这就是为什么我要伸出援手。我编辑了字体系列名称和字体的位置（../ type /).

感谢任何帮助，请告诉我您是否需要查看可能与此问题相关的任何其他代码。欢呼声。

Answer 1

据我所知，这是实现@ font-face的最通用方式：

@font-face{
    /* for IE only (IE doesn't apear to comprehand normal CSS)*/
    font-family: "my fancy font";
    src: url("/fonts/font.eot");
}

@font-face{
    /* for non CSS-challenged browsers */
    font-family: "my fancy font";
    src: local("☼"),
        url("/fonts/font.eot") format('eot'),
        url("/fonts/font.woff") format('woff'),
        url("/fonts/font.otf") format('otf'),
        url("/fonts/font.ttf") format('truetype'),
        url("/fonts/font.svg") format('svg');
}

两个@ font-face部分和src中不可能是文件名的东西：local（）

Answer 2

如果没有可以浏览的网址，这些类型的问题就无法回答。语法看起来不错，但您可能还有其他问题。例如，您使用IIS服务吗？您是否使用过IE9的开发人员工具来查看字体是否正在加载？

@ font-face问题

2 个答案: