css - 自定义字体显示奇怪

Question

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

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

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

但这不是...

它应该是这样的：

这就是它在我的网站上的外观：

有任何想法吗？

Answer 1

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