网站发布后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 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
微信小程序实现打卡签到页面
Sep 21 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写的资源下载防盗链类分享
2014/05/12 PHP
php中JSON的使用方法
2015/04/30 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
vuejs指令详解
2017/02/07 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
小学生读书活动总结
2014/06/30 职场文书
励志演讲稿600字
2014/08/21 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
Mysql中常用的join连接方式
2022/05/11 MySQL
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技