html - Firefox 和 Safari 浏览器的字体不工作问题

Question

我用过的字体:

• Avenir LT 标准书
• Avenir LT Std Roman
• Avenir LT 标准灯

我使用的 CSS 代码:

@font-face {
    font-family: 'Avenir LT Std Roman';
    src: url('fonts/AvenirLTStd-Roman.woff2') format('woff2'), url('fonts/AvenirLTStd-Roman.woff') format('woff'), url('fonts/AvenirLTStd-Roman.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir LT Std Book';
    src: url('fonts/AvenirLTStd-Book.woff2') format('woff2'), url('fonts/AvenirLTStd-Book.woff') format('woff'), url('fonts/AvenirLTStd-Book.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir LT Std Light';
    src: url('fonts/AvenirLTStd-Light.woff2') format('woff2'), url('fonts/AvenirLTStd-Light.woff') format('woff'), url('fonts/AvenirLTStd-Light.otf') format('otf');
    font-weight: 300;
    font-style: normal;
}

Chrome 截图:

Firefox 截图:

Answer 1

我想知道这是否是字体的 hinting 的问题.提示可以包含在字体中，向某些平台建议应如何在像素网格上呈现字形轮廓。

并非所有字体和所有版本的字体都有提示，也不是所有平台都使用提示。了解您使用的是哪个版本的 Windows 和 Firefox，以及您使用的是哪个版本的 Avenir(例如，它是从哪里来的？)会很有帮助。

通常，该文件的 OTF 版本未获得网络使用许可，因此您可能首先要将其删除。如果 WOFF 和 WOFF2 文件是从 OTF 文件创建的，则可能没有任何提示，并且它们可能也不会获得 Web 使用许可。

我会:

• 将同一浏览器中您网站上的呈现与 MyFonts 上的实时网络字体预览进行比较网站。
• 如果更好，请考虑从 Fonts.com 获得网络特定版本的 Avenir 或 Avenir Next(字体系列的更新版本)的许可或 MyFonts那个有更好的暗示。他们应该提供 WOFF 和 WOFF2

或者，如果它只发生在您本地的 Windows + Firefox 副本上，这些链接也可能是相关的:

• https://support.mozilla.org/en-US/questions/1179694
• https://support.mozilla.org/en-US/questions/1233884

希望对您有所帮助!