WOFF 字体在 Internet Explorer 中不起作用答案

【问题标题】：WOFF fonts not working in Internet ExplorerWOFF 字体在 Internet Explorer 中不起作用
【发布时间】：2017-07-21 22:00:16
【问题描述】：

我有一个使用 Avenir 字体的页面。它适用于所有浏览器（Firefox、Opera、Chrome）——但在 Internet Explorer 11 中不显示此字体。我正在使用此代码附加字体（它似乎关心 Internet Explorer）：

<style type="text/css">
@font-face { font-family:"Avenir LT Std 35 Light"; src:url("./Fonts/Avenir LT Std 35 Light.eot"); } /* for IE */
@font-face { font-family:"Avenir LT Std 35 Light"; src:url("./Fonts/Avenir LT Std 35 Light.woff") format("woff"); } /* Works only in WOFF-enabled browsers */
.ft0{font-family:"Avenir LT Std 35 Light";font-size:16.67px;color:#BFBFBF}
.ft1{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#BFBFBF}
.ft2{font-family:"Avenir LT Std 35 Light";font-size:12.50px;color:#BFBFBF}
.ft3{font-family:"Avenir LT Std 35 Light";font-size:12.50px;color:#292C31}
.ft4{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#FE4A5E}
.ft5{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#000000}
.ft6{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#00B0F0}
.ft7{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#262626}
.ft8{font-family:"Avenir LT Std 35 Light";font-size:15.33px;color:#0D0D0D}

</style>

不知道为什么它不工作......你能看看吗？

戴夫

【问题讨论】：

标签： html css fonts webfonts woff

【解决方案1】：

试试这样：

@font-face { 
  font-family:"Avenir LT Std 35 Light"; 
  src: url("./Fonts/Avenir LT Std 35 Light.eot");
  src: url("./Fonts/Avenir LT Std 35 Light.eot?#iefix") format("embedded-opentype"),  
       url("./Fonts/Avenir LT Std 35 Light.woff") format("woff"); 
}

顺便说一句：所有这些逗号大小都将四舍五入到下一个完整像素 - 也许 IE 也有问题（？ - 不确定）

【讨论】：

感谢您的回复....由于某种原因，此代码在本地文件中有效，当我将其上传到网站时无效....我应该将 Avenir 字体发送给您吗？看看？
dropbox.com/s/o158s9c5z7a56ai/…
dropbox.com/s/e8vtp1b76dab8uq/…
请将这些附加到任何文件中，看看它们是否适合您
也许您应该尝试重命名字体文件，用下划线或类似符号替换所有这些空格，然后相应地更改该链接。