CSS - 字体在 Firefox 中无法正确呈现离线数据

Question

http://ocw.mit.edu/courses/mathematics/18-06sc-linear-algebra-fall-2011/download-course-materials/ 尝试从此链接下载课程。

当我在 Firefox 中离线查看页面时，从 zip 文件夹中字体未正确呈现，您可以通过在两种浏览器中以离线模式打开课程来将其与 chrome 和 IE 进行比较。

我尝试在 @font-face src 中使用 local()：但没有影响，不能使用 .htaccess 选项，因为课程在下载后可以离线使用，并且可能不需要在机器上安装 apache。

我尝试在 about:config 的 firefox 中更改 fileURI，但它不是一个完美的解决方案，因为有很多用户，他们不能这样做。 请提出一些解决方案。

base.css 的代码：

     @font-face {
 font-family: TitilliumText22LLight;
     src: local("TitilliumText22LLight"), url('../webfonts/TitilliumText22L002- webfont.eot');
     src: local("TitilliumText22LLight"), url('../webfonts/TitilliumText22L002-webfont.eot?#iefix') format("embedded-opentype"),
 url('../webfonts/TitilliumText22L002-webfont.otf') format("otf"),
     url('../webfonts/TitilliumText22L002-webfont.woff') format("woff"),
     url('../webfonts/TitilliumText22L002-webfont.ttf') format("truetype"),
     url('../webfonts/TitilliumText22L002-webfont.svg#TitilliumText22LLight') format("svg");
     font-weight: normal;
     font-style: normal;
     }


     @font-face {
 font-family: TitilliumText22LRegular;      /* Titillium Regular */
     src: local("TitilliumText22LRegular"), url('../webfonts/TitilliumText22L003-webfont.eot');
     src: local("TitilliumText22LRegular"), url('../webfonts/TitilliumText22L003-webfont.eot?#iefix') format("embedded-opentype"),
 url('../webfonts/TitilliumText22L002-webfont.otf') format("otf"),
     url('../webfonts/TitilliumText22L003-webfont.woff') format("woff"),
     url('../webfonts/TitilliumText22L003-webfont.ttf') format("truetype"),
     url('../webfonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format("svg");
     font-weight: normal;
     font-style: normal;
     }

     @font-face {
 font-family: TitilliumText22LBold;     /* Titillium Bold */
     src: local("TitilliumText22LBold"), url('../webfonts/TitilliumText22L005-webfont.eot');
     src: local("TitilliumText22LBold"), url('../webfonts/TitilliumText22L005-webfont.eot?#iefix') format("embedded-opentype"),
 url('../webfonts/TitilliumText22L005-webfont.otf') format("otf"),
     url('../webfonts/TitilliumText22L005-webfont.woff') format("woff"),
     url('../webfonts/TitilliumText22L005-webfont.ttf') format("truetype"),
     url('../webfonts/TitilliumText22L005-webfont.svg#TitilliumText22LBold') format("svg");
     font-weight: bold;
     font-style: normal;
     }`

Courses_new.css 的代码：

    #course_nav li a,
    #course_nav li a:visited {
font-family: TitilliumText22LBold, Verdana;
color: #666;
font-size: 1.2em;
text-decoration: none;
text-transform: uppercase;
margin: inherit;
padding: inherit;
width: 125px;
    }

在上述场景中 course_new.css 正在从 base.css 调用 TitilliumText22LBold 类，但它不适用于离线模式下的文本，当您从 zips 打开页面时，您可以在左侧导航面板中看到这一点。

当我删除 verdana 时，它正在应用 TitilliumText22LBold，但字体仍然与在线模式下的字体不同。

请建议下一步应该做什么，以便在离线模式下也可以应用此字体。

Answer 1

我自己使用了自定义字体。我的代码在双方都有效，无论是在线还是离线。 这是我在我的 css 文件的第一行中添加的 CSS 规则：

@font-face { font-family: BebasNeue; src: url('../fonts/BebasNeue.otf'); } 

然后我就这样在我的 css 中调用它们：

h1 {
    font-family: BebasNeue;
}

希望对你有帮助。

而且，我给你的建议是使用 .otf 文件！我了解到 TTF 文件不会在本地加载。这也可能是你的问题:)