自定义字体显示很奇怪

从一开始我就需要说我知道我正在尝试做的不是“正确的做法”，但我正在拼命工作的客户端需要这个特定的字体。自定义字体显示很奇怪

因此，我需要在客户的网站上使用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; 
}

而且，通常情况下，我期望看到的一切工作就像一个魅力。

但它不是...

下面是它看起来应该像：

https://lh.rs/8M9Q7EvRBapv

这是我的版本：

https://lh.rs/Lbini5YbQZlX

任何想法？

来源

2013-03-23 chris_so