0

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

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

有任何想法吗？

4

1 回答 1

0

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

看起来您的字体支持非常有限，因为您只使用 .ttf 和 .eot - 为了最大程度地兼容并限制渲染问题，最好使用“所有”5 种字体类型，它们是：

  • ttf（TrueType 字体）
  • 经常（Adobe/Microsoft 开放字体类型，AKA OpenType）
  • eot（嵌入式 OpenType）
  • woff（Web 开放字体格式）
  • svg（可缩放矢量图形）

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

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

于 2013-03-23T14:41:29.457 回答