html - CSS3 字体嵌入

Question

我正在尝试简单地嵌入我已上传到服务器的字体。

一切都正确加载，但显示错误的字体。我知道这种情况正在发生，因为当我删除 @font-face 代码时，呈现的 HTML 字体会发生变化。

这是我的代码，在过去的一个小时里我玩了很多不同的东西，所以大声喊出你认为可行的任何东西。我也尝试过 .TTF 文件。

@font-face {
    font-family: Joan;
    src: url("../fonts/joan.otf") format('font/opentype');
}
body {
    background: url('../images/bg.gif');
    font-family: Joan;
}

Answer 1

http://www.fontsquirrel.com/fontface/generator

到目前为止，在我的相关冒险中为我赢得了胜利。

这是我正在用它开发的一个网站：http: //bigballoon.businesscatalyst.com/

Answer 2

您可能必须将字体名称放在引号中。此外，为了兼容 MSIE，您需要将字体转换为 .eot 格式。这是paulirish.com的“防弹”@font-face 。您可能需要根据完整/后记字体名称进行调整：

@font-face {
   font-family: 'Joan';
   src: url('../fonts/joan.eot');
   src: local('Joan Regular'), local('Joan'), 
        url('../fonts/joan.otf') format('opentype'); 
}