Css 显示自定义字体

从一开始我就需要说，我知道我所尝试的不是“正确的方式”，但我为之工作的客户非常想要这种特定的字体

所以，我需要在客户网站上使用VOGUE使用的确切字体。所以我把.eot和.ttf上传到我的服务器上。然后我添加了CSS定义：

/*fonts fonts for IE*/
@font-face {
    font-family: VogueDidot;
    src: url('font/FBDidotL-Regular.eot') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "VogueDidot Light";
    src: url('font/FBDidotL-Light.eot') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

/*fonts for other browsers*/
@font-face {
    font-family: VogueDidot;
    src: url('font/FBDidotL-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "VogueDidot Light";
    src: url('font/FBDidotL-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

我的元素的CSS是：

.post h1 {
    display: block;
    height: 100%;
    font-family: VogueDidot;
    font-size: 55px;
    text-transform: uppercase;
    overflow: hidden;
    line-height: 58px;
}

而且，通常，我希望看到一切都像一个魅力

但这不是

下面是它的外观：

以下是我的版本：

---

有什么想法吗？

需要注意的是，在所有浏览器上使用自定义字体并不是像素完美的，因为所有浏览器都倾向于以不同的方式呈现字体。另一个问题可能是人们没有在windows中启用ClearType，我确信在这种情况下，不是因为其他读者，我决定包含这些信息

您的字体支持似乎非常有限，因为您只使用.ttf和.eot-为了最大程度地兼容和限制渲染问题，最好使用“全部”5种字体类型，它们是：

• ttf（TrueType字体）
• oft（Adobe/Microsoft开放字体类型，又名OpenType）
• eot（嵌入式OpenType）
• woff（Web开放式字体格式）
• svg（可缩放矢量图形）

理想情况下，您希望尽可能多地使用SVG，因为这提供了最好的质量，SVG在现代版本的Andriod Browser、Firefix、Safari、Opera、Chrome中受支持，但在IE中不受支持

就我个人而言，我会将字体转换成所有这些文件类型，看看结果是否有所改善，浏览器会自动使用他们喜欢的字体类型。您可以使用转换为其他格式，重要的是要注意字体是受版权保护的，您的客户端需要许可，有些字体甚至不允许在web上使用