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文件创建的，则可能没有任何提示，而且它们也可能不会获得网络使用许可。

我会

• 将您的网站在同一浏览器中的呈现与MyFonts网站上的实时网络字体预览进行比较。
• 如果情况更好，请考虑从Fonts.com或MyFonts获得具有更好提示的网络特定版本的Avenir或Avenir Next（字体家族的更新版本）。他们应该提供WOFF和WOFF2

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

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

希望有帮助！