从一开始我就要说我知道我想要做的不是"正确的做法",但是我正在努力工作的客户真的想要这个特定的字体。
因此,我需要在客户端网站上使用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;
}
而且,通常情况下,我希望看到一切都像魅力一样。
但它不是......
以下是它的样子:
这就是我在网站上的样子:
有什么想法吗?
答案 0 :(得分:4)
看起来浏览器正在尝试显示粗体字体并重复彼此相邻的灰色像素(从细线)。尝试使用font-weight: normal
(font-weight:bold
继承自h1元素。)