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

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。这并不赋予您将其复制到其他未捆绑它的计算机的权利。”

我用的方案是用Montserrat代替Avenir，看起来很像。在 Fontsource 上链接到 Montserrat:https://fontsource.org/fonts/montserrat

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