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

Question

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

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

Windows屏幕截图1：

Windows屏幕截图2

以下是2个屏幕截图，展示了Linux OS中浏览器的字体呈现方式：

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