网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法


Posted in Javascript onNovember 24, 2016

网站发布到IIS后,发现网站使用的Bootstrap框架所引用的woff字体无法正常显示。于是跟踪http请求,发现woff字体请求出现GET .woff 404 (Not Found)的问题,但是项目中woff字体的文件并未丢失。后经排查,原来是服务器上IIS没有添加woff字体的MIME类型,导致发送HTTP请求时,IIS无法处理和识别此类型的文件。

解决方法1:在Web.config配置文件中添加woff字体的MIME类型

解放方法2:在IIS中添加woff字体的MIME类型
woff字体简介
MIME类型简介

解决方法一:在Web.config配置文件中添加woff字体的MIME类型

如果网站是使用ASP.NET 或者ASP.NET MVC 编写的,可以很方便的直接使用配置文件进行woff字体的配置。只要在Web.config中的system.webServer节点添加下面的配置可以了。

<system.webServer> 
 <staticContent>
  <remove fileExtension=".woff" />
  <mimeMap fileExtension=".woff" mimeType="font/x-font-woff" />  
 </staticContent>
 </system.webServer>

这里要注意下的是这个配置,添加此节点是防止出现这个错误:“在唯一密钥属性“fileExtension”设置为“.woff”时,无法添加类型为“mimeMap”的重复集合项”,这个问题可以点击此链接查看解决方法。如果只添加下面的这个节点,而且没有报这个错误的话,remove节点可以不用添加。另外”font/x-font-woff”是woff字体的MIME类型值。

将该节点添加到网站的配置文件后,在重新打开网站即可正常显示woff字体。此方法可用于没有权限操作IIS管理器的时候作为解决方案。

解放方案二:在IIS中添加woff字体的MIME类型

如果可以直接操作IIS管理器的话,也可以直接在IIS上添加woff字体的mime type。只要打开当前的IIS,打开MIME类型的配置,最后添加一个新的MIME类型就可以了,这里woff字体的扩展名是.woff, MIME类型为:”font/x-font-woff“。具体操作如下所示:

打开控制面板中的IIS管理器,选择当前IIS,打开MIME类型配置;

在IIS中添加.woff截图;

点击MIME类型右边操作的栏的添加功能;

添加.woff的MIME类型截图;

弹出的添加MIME类型对话框中,文件扩展名填写.woff,MIME类型可填写 font/x-font-woff 或者application/x-font-woff;

设置文件扩展名和类型;

点击确定后成功添加了.woff扩展名的MIMI TYPE,现在打开网站请求WOFF字体就不会出现404 NOT FOUND错误了。

woff字体简介

Web开放字体格式(Web Open Font Format,简称WOFF) 是一种网页所采用的字体格式标准。此字体格式发展于2009年,现在正由万维网联盟的Web字体工作小组标准化,以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小,并且不包含加密也不受DRM(数位著作权管理)限制。

在2010年4月8日,Mozilla基金会、Opera软件公司和微软提交WOFF之后,万维网联盟发表评论指,希望WOFF不久能成为所有浏览器都支持的、“单一、可互操作的(字体)格式”。[6]2010年7月27日,万维网联盟将WOFF作为工作草案发布。

WOFF的MIME类型是:application/x-font-woff(font/x-font-woff也可以),目前的IIS7里面默认没有这个MIME类型,如果要让网站支持这个,请在IIS7里面的MIME类型里面添加woff

MIME类型简介

MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型,既设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 #Javascript
BootStrap树状图显示功能
Nov 24 #Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 #Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 #Javascript
微信小程序-详解数据缓存
Nov 24 #Javascript
如何实现json数据可视化详解
Nov 24 #Javascript
BootStrap 可编辑表Table格
Nov 24 #Javascript
You might like
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
js实现日历与定时器
2017/02/22 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
js读取本地文件的实例
2017/12/22 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
人力资源主管职责范本
2014/03/05 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
篮球社团活动总结
2014/06/27 职场文书
好的促销活动方案
2014/08/21 职场文书
新员工入职感想
2015/08/07 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
Python自动化测试PO模型封装过程详解
2021/06/22 Python
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python