自定义字体显示奇怪

Question

从一开始我就要说我知道我想要做的不是＆＃34;正确的做法＆＃34;，但是我正在努力工作的客户真的想要这个特定的字体。

因此，我需要在客户端网站上使用VOGUE使用的确切字体。所以我拿了.eot＆amp; .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;
}

而且，通常情况下，我希望看到一切都像魅力一样。

但它不是......

以下是它的样子：

这就是我在网站上的样子：

有什么想法吗？

Answer 1

看起来浏览器正在尝试显示粗体字体并重复彼此相邻的灰色像素（从细线）。尝试使用font-weight: normal（font-weight:bold继承自h1元素。）