当前位置:站长啦网站目录 » 站长资讯 » 站长新闻 » 技术文档 » 文章详细 订阅RssFeed

网站图标不显示?为IIS增加svg和woff等字体格式的MIME(2003、2008)

来源:svg和woff 浏览:1229次 时间:2017-09-14
简介:雨过天晴工作室在实际安装网站过程发现,部分网站的图标不显示,但是本地测试又是可以显示的,原因在于IIS下的MIME类型没有支持对应字体后缀,一般情况你只要在IIS下的MIME类型增加以下后缀就行了 .svg image/svg+xml .woff application/font-woff .eot application/vnd.ms-fontobject .otf applicatio

网站图标不显示?为IIS增加svg和woff等字体格式的MIME(2003、2008)

雨过天晴工作室在实际安装网站过程发现,部分网站的图标不显示,但是本地测试又是可以显示的,原因在于IIS下的MIME类型没有支持对应字体后缀,一般情况你只要在IIS下的MIME类型增加以下后缀就行了

.svg image/svg+xml
.woff application/font-woff

.eot application/vnd.ms-fontobject
.otf application/octet-stream
.ttf application/octet-stream



现在字体图标已经渐渐代替了图片了,移动端用起来也很方便。

使用了字体文件来显示矢量的图标,为了能在IIS上正常显示图标,可以通过增加iis的MIME-TYPE来支持图标字体文件

下面就把IIS增加svg、eot 、woff、otf 、ttf 等字体格式文件的MIME。

增加以下两种文件类型即可:

.svg image/svg+xml
.woff application/font-woff

我把其它几种也写在下面,供以后学习:

.eot application/vnd.ms-fontobject
.otf application/octet-stream
.ttf application/octet-stream

(完)

今天测试的一个代码,在本地一切正常,可是上传到服务器上之后就发现一些图标不显示了。图片存在,但是也访问不了,就百度了下,这个.svg的图片想要在iis上能正常打开,还需要做一下映射才行。

1、先打开IIS-找到你网站点右键属性-HTTP头-点击MIME类型

2、单击新建,按照如下内容输入
扩展名:.svg
MIME类型:image/svg+xml

全部添加完成后点击确定 保存退出 刷新网页看看显示是否正常,如果还不行就检测你是否哪里少了标点符号.

同样IIS6也是可以支持WOFF/WOFF2的,正确的MIME信息应该是这么写:
 
扩展名:.woff 
MIME类型:application/x-font-woff
扩展名:.woff2 
MIME类型:application/x-font-woff

 
  添加后重启该站点即可看见效果. 

最近公司的几个WordPress网站从AWS搬家到Windows环境下,又折腾了好一阵子。今天新鲜出炉一个新的问题,发现网站上的woff字体又报404了。在确认文件已经上传到正确路径下后,再回想一下之前碰到的IIS环境下找不到字体文件的问题,感觉应该又是没有给字体文件添加MIME类型的原因。Windows Azure并非虚拟主机,所以也不会给我一个IIS让我配置,只能想其他办法。

所幸的是在网站的根目录找到了一个web.config文件,印象中这应该是ASP.NET的应用程序的配置文件。虽然WordPress用的是PHP语言,但对于文件类型的管理,应该不牵涉到网站用什么语言的范畴,只要正确配置服务器环境即可。

打开web.config,这是一个XML文件,里面已经带一条svg文件的MIME类型信息,和之前在IIS里面配置的内容很像:

<mimeMap fileExtension=".svg" mimeType="image/svg+xml"/>
之前IIS里面对于几个字体文件的MIME类型设置如下:

依样画葫芦的在web.config里面追加这两条:

<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
整个文件里面关于MIME类型的标签结构应该是这样的:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml"/>
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
    </staticContent>
    <rewrite>...</rewrite>
  </system.webServer>
</configuration>

当然你可以通过iis7.5中设置

完成之后再刷新网页,woff等字体又能顺利加载了


分享一下更健康,本文地址: http://www.cnzzla.com/artinfo/43887.html

推荐站点

  • 站长啦工具箱-站长喜欢的网站工具大全站长啦工具箱-站长喜欢的网站工具大全

    站长啦工具箱提供二维码生成,dns解析查询,短网址生成,icp备案查询,ip定位,全民k歌解析,在线ping,端口扫描,子域名扫描,QQ在线状态,在线运行,时间戳转换,ua查询,whois查询,字符加解密等优质的小工具,站长喜欢的网站工具大全

    www.cnzzla.com/gongjuxiang/
  • 天晴主机_代理价格买主机天晴主机_代理价格买主机

    天晴主机,提供虚拟主机,网站建设,景安云主机,腾讯云,阿里云,百度云,VPS云主机|动态拨号ADSL等全球知名云计算产品。IDC服务器租用,服务器托管等,高防服务器IDC代理加盟等,我们以高性价比、一流服务和强大的管理功能赢得数十万客户!Hlapi晏宇科技 嘉和云计算管理平台

    zhuji.42824.com
  • 官网之家官网之家

    官网之家-官方网站大全收录企业、品牌、机构、团体或个人的官方网站,通过这里网民可以直接登陆官方网站,让网民的网络生活远离钓鱼网站,每一个官方网址都附有相关的图片和文字介绍。认准官方网站jd27.com,谨防钓鱼欺骗!

    jd27.com
  • Msvod魅思CMS V10|Msvod魅思CMS V10|

    Msvod魅思CMS V10,MSVOD v10,魅思视频系统V10演示网站msvod魅思视频系统,msvod v10 小视频系统合适用于各种教育、培训、教程、直销、搞笑、自拍、福利、写真、素材、广告、美容、健身、料理等N多视频行业的网站投入使用。 一个后台管理N个网站数据互通,每个网站可以单独绑定域名,单独设置SEO信息,单独设置LOGO,单独广告等 视频打赏 用户可以对视频上传作者进行各种礼物打赏,打赏所得金额作者可拿到对应的提成收入,所得收入可人民币提现 三级分销 三级分销商可以拥有独立的分销商网站独立的管理后台,并且可以自定义绑定域名,可统计每天收益基本设置等 多线路播放 支持多服务器线路播放视频,不同的会员级别可指定观看不同的播放线路解决宽带负荷,从而提高会员的积极消费 视频上传提成 用户在线上传的视频,如该视频被其他用户比如10个金币消费了,发布视频者可得到如3个金币的奖励 视频试看限制 PC端可自定义设置视频试看时间超出时间提示购买VIP,手机采取每天试看次数超出次数提示购买VIP 自动转码 结合云转码软件实现站长/用户上传视频支持任意格式转码,生成视频图片、名称、播放地址、完全自动 防盗链加密 结合云转码可现实防盗链,从而不用担心自己视频资源被盗链,除此之外播放地址我们还做了加密使资源更安全 每天签到 用户每天签到可得到系统自动奖励的金币,24小时允许签到一次,从而提高用户对网站的黏贴度哦 分享奖励 用户登陆会员中心获取宣传地址分享到QQ、论坛、微信等,不同IP被点击一次奖励指定的消费金币 卡密充值 用户可凭卡密在会员中心进行充值获取金币,后台可生成卡密的金币数直接到发卡平台销售 播放器广告 整合Ckplay播放器,后台可控制加入播放前载入广告,暂停播放广告可开启/关闭广告 支付体系 整合流行支付接口,比如微信支付,支付宝支付等以及第三方支付平台 APP应用 封装安卓APP应用以及苹果APP应用,封装手机端数据同步自动更新 会员在线上传 用户可通过电脑、手机端在线上传视频以及发布图片小说等,实时分享到网站 上传视频奖励 用户上传视频一经站长后台审核通过,该用于将得到系统奖励的金币 MSVOD V10 功能远不止这些,以上只是介绍较为特色的功能简介,更详细的功能体验请亲自体验~!

    v10.meisivod.com
  • 有的看有的看

    有的看提供最新电影在线观看,手机电影在线播放,VIP电影免费观看,同时还有电视剧、动漫、综艺等在线观看

    udkan.42824.com