在 Windows 操作系统上的任何浏览器上打开的网页上都无法正确显示 Avenir 字体

Question

我在我的网站上使用了各种 Avenir 字体。在 Linux、Mac、Ipad、Iphone、Andriod Phone 中打开时，它在浏览器上看起来不错。但是当在 Windows 中的任何浏览器上打开时。因此字体看起来不清晰，部分文本不可见。

以下是 Windows 操作系统中浏览器上字体呈现方式的两个屏幕截图：

Windows 屏幕截图 1：

Windows 屏幕截图 2：

以下是 2 个屏幕截图，显示了字体在 Linux 操作系统中在浏览器上的呈现方式：

Linux 截图 1：

Linux 截图 2：

以下是所有字体的font-face CSS代码。

@font-face {font-family: 'AvenirNext-Bold';
font-weight: normal;font-style: normal;
src: url('../fonts/AvenirNext-Bold/AvenirNext-Bold.eot');
src: url('../fonts/AvenirNext-Bold/AvenirNext-Bold.eot') format('embedded-opentype'),
    url('../fonts/AvenirNext-Bold/AvenirNext-Bold.woff2') format('woff2'),
    url('../fonts/AvenirNext-Bold/AvenirNext-Bold.woff') format('woff'),
    url('../fonts/AvenirNext-Bold/AvenirNext-Bold.ttf') format('truetype');} 

@font-face {font-family: 'AvenirNext-BoldItalic';
font-weight: normal;font-style: normal;
src: url('../fonts/AvenirNext-BoldItalic/AvenirNext-BoldItalic.eot');
src: url('../fonts/AvenirNext-BoldItalic/AvenirNext-BoldItalic.eot') format('embedded-opentype'),
    url('../fonts/AvenirNext-BoldItalic/AvenirNext-BoldItalic.woff2') format('woff2'),
    url('../fonts/AvenirNext-BoldItalic/AvenirNext-BoldItalic.woff') format('woff'),
    url('../fonts/AvenirNext-BoldItalic/AvenirNext-BoldItalic.ttf') format('truetype');} 

@font-face {font-family: 'AvenirNext-DemiBold';
font-weight: normal;font-style: normal;
src: url('../fonts/AvenirNext-DemiBold/AvenirNext-DemiBold.eot');
src: url('../fonts/AvenirNext-DemiBold/AvenirNext-DemiBold.eot') format('embedded-opentype'),
    url('../fonts/AvenirNext-DemiBold/AvenirNext-DemiBold.woff2') format('woff2'),
    url('../fonts/AvenirNext-DemiBold/AvenirNext-DemiBold.woff') format('woff'),
    url('../fonts/AvenirNext-DemiBold/AvenirNext-DemiBold.ttf') format('truetype');} 

@font-face {font-family: 'AvenirNext-DemiBoldItalic';
font-weight: normal;font-style: normal;
src: url('../fonts/AvenirNext-DemiBoldItalic/AvenirNext-DemiBoldItalic.eot');
src: url('../fonts/AvenirNext-DemiBoldItalic/AvenirNext-DemiBoldItalic.eot') format('embedded-opentype'),
    url('../fonts/AvenirNext-DemiBoldItalic/AvenirNext-DemiBoldItalic.woff2') format('woff2'),
    url('../fonts/AvenirNext-DemiBoldItalic/AvenirNext-DemiBoldItalic.woff') format('woff'),
    url('../fonts/AvenirNext-DemiBoldItalic/AvenirNext-DemiBoldItalic.ttf') format('truetype');} 

@font-face {font-family: 'AvenirNext-Heavy';
font-weight: normal;font-style: normal;
src: url('../fonts/AvenirNext-Heavy/AvenirNext-Heavy.eot');
src: url('../fonts/AvenirNext-Heavy/AvenirNext-Heavy.eot') format('embedded-opentype'),
    url('../fonts/AvenirNext-Heavy/AvenirNext-Heavy.woff2') format('woff2'),
    url('../fonts/AvenirNext-Heavy/AvenirNext-Heavy.woff') format('woff'),
    url('../fonts/AvenirNext-Heavy/AvenirNext-Heavy.ttf') format('truetype');} 

@font-face {font-family: 'AvenirNext-HeavyItalic';
font-weight: normal;font-style: normal;
src: url('../fonts/AvenirNext-HeavyItalic/AvenirNext-HeavyItalic.eot');
src: url('../fonts/AvenirNext-HeavyItalic/AvenirNext-HeavyItalic.eot') format('embedded-opentype'),
    url('../fonts/AvenirNext-HeavyItalic/AvenirNext-HeavyItalic.woff2') format('woff2'),
    url('../fonts/AvenirNext-HeavyItalic/AvenirNext-HeavyItalic.woff') format('woff'),
    url('../fonts/AvenirNext-HeavyItalic/AvenirNext-HeavyItalic.ttf') format('truetype');} 

@font-face {font-family: 'AvenirNext-Italic';
font-weight: normal;font-style: normal;
src: url('../fonts/AvenirNext-Italic/AvenirNext-Italic.eot');
src: url('../fonts/AvenirNext-Italic/AvenirNext-Italic.eot') format('embedded-opentype'),
    url('../fonts/AvenirNext-Italic/AvenirNext-Italic.woff2') format('woff2'),
    url('../fonts/AvenirNext-Italic/AvenirNext-Italic.woff') format('woff'),
    url('../fonts/AvenirNext-Italic/AvenirNext-Italic.ttf') format('truetype');} 

@font-face {font-family: 'AvenirNext-Medium';
font-weight: normal;font-style: normal;
src: url('../fonts/AvenirNext-Medium/AvenirNext-Medium.eot');
src: url('../fonts/AvenirNext-Medium/AvenirNext-Medium.eot') format('embedded-opentype'),
    url('../fonts/AvenirNext-Medium/AvenirNext-Medium.woff2') format('woff2'),
    url('../fonts/AvenirNext-Medium/AvenirNext-Medium.woff') format('woff'),
    url('../fonts/AvenirNext-Medium/AvenirNext-Medium.ttf') format('truetype');} 

@font-face {font-family: 'AvenirNext-MediumItalic';
font-weight: normal;font-style: normal;
src: url('../fonts/AvenirNext-Medium/AvenirNext-Medium.eot');
src: url('../fonts/AvenirNext-Medium/AvenirNext-Medium.eot') format('embedded-opentype'),
    url('../fonts/AvenirNext-Medium/AvenirNext-Medium.woff2') format('woff2'),
    url('../fonts/AvenirNext-Medium/AvenirNext-Medium.woff') format('woff'),
    url('../fonts/AvenirNext-Medium/AvenirNext-Medium.ttf') format('truetype');} 

@font-face {font-family: 'AvenirNext-Regular';
font-weight: normal;font-style: normal;
src: url('../fonts/AvenirNext-Regular/AvenirNext-Regular.eot');
src: url('../fonts/AvenirNext-Regular/AvenirNext-Regular.eot') format('embedded-opentype'),
    url('../fonts/AvenirNext-Regular/AvenirNext-Regular.woff2') format('woff2'),
    url('../fonts/AvenirNext-Regular/AvenirNext-Regular.woff') format('woff'),
    url('../fonts/AvenirNext-Regular/AvenirNext-Regular.ttf') format('truetype');} 

@font-face {font-family: 'AvenirNext-UltraLight';
font-weight: normal;font-style: normal;
src: url('../fonts/AvenirNext-UltraLight/AvenirNext-UltraLight.eot');
src: url('../fonts/AvenirNext-UltraLight/AvenirNext-UltraLight.eot') format('embedded-opentype'),
    url('../fonts/AvenirNext-UltraLight/AvenirNext-UltraLight.woff2') format('woff2'),
    url('../fonts/AvenirNext-UltraLight/AvenirNext-UltraLight.woff') format('woff'),
    url('../fonts/AvenirNext-UltraLight/AvenirNext-UltraLight.ttf') format('truetype');} 

@font-face {font-family: 'AvenirNext-UltraLightItalic';
font-weight: normal;font-style: normal;
src: url('../fonts/AvenirNext-UltraLightItalic/AvenirNext-UltraLightItalic.eot');
src: url('../fonts/AvenirNext-UltraLightItalic/AvenirNext-UltraLightItalic.eot') format('embedded-opentype'),
    url('../fonts/AvenirNext-UltraLightItalic/AvenirNext-UltraLightItalic.woff2') format('woff2'),
    url('../fonts/AvenirNext-UltraLightItalic/AvenirNext-UltraLightItalic.woff') format('woff'),
    url('../fonts/AvenirNext-UltraLightItalic/AvenirNext-UltraLightItalic.ttf') format('truetype');} 

分配给上述描述的CSS如下：

.description{
    font-size: 22px;
    color: #000000;
    font-family: "AvenirNext-DemiBold";
}

根据媒体查询和设备大小，字体大小从 13px 变为 22px

Answer 1

我遇到了同样的问题，字体在我的 Mac 上看起来很棒，但在 Windows 设备上根本没有出现。看起来该字体根本没有获得在 Windows 设备上显示的许可。在此处查看更多信息：https://www.quora.com/Why-do-I-have-a-font-Avenir-on-my-Mac-but-not-on-my-PC-The-font-is-not-in-TypeKit-which-I-am-still-trying-o-figure-out-I-looked-online-and-its-250-to-350-Can-I-pop-it-into-Dropbox-and-add-it-to-my-PC-that-way

来自 Quora 的回答：“字体系列 Avenir 与您的操作系统或应用程序一样获得许可。现在，在这种情况下，它与操作系统捆绑在一起，因此您的 macOS 许可证也涵盖了它。Monotype 拥有 Avenir，并已将其授权给 Apple，Apple 已通过 macOS 将其授权给您。这并不赋予您将其复制到未捆绑它的其他计算机的权利。”

我使用的解决方案是将 Avenir 替换为 Montserrat，看起来非常相似。 Fontsource 上的蒙特塞拉特链接：https://fontsource.org/fonts/montserrat

您还可以在此处找到 Avenir 的其他替代品：https://learnui.design/blog/avenir-similar-fonts.html