Question

从一开始我就要说我知道我要做的不是“正确的做法”，但我正在努力工作的客户迫切需要这种特定的字体。

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

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

但它不是......

以下是它的外观：

https://lh.rs/8M9Q7EvRBapv

这是我的版本：

https://lh.rs/Lbini5YbQZlX

有什么想法吗？

Answer 1

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

看起来你的字体支持非常有限，因为你只使用.ttf和.eot - 为了最大限度地兼容和限制渲染问题，最好使用'ALL'5字体类型：

ttf（TrueType字体）
oft（Adobe / Microsoft Open字体类型，AKA OpenType）
eot（Embedded OpenType）
woff（网页开放字体格式）
svg（可缩放矢量图形）

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

我个人将字体转换为所有这些文件类型，看看结果是否有所改进，浏览器会自动使用他们喜欢的字体类型。您可以使用Font 2 Web转换为其他格式，重要的是要注意字体受版权保护且您的客户端需要许可，某些字体甚至不允许使用网络。

自定义字体显示奇怪

1 个答案: