在IIS服务器上部署svg/woff/woff2字体

标题起的比较诡异,部署网站的字体和服务器IIS有什么关系?如果你的职责只限于一名前端开发,那么你可能很“幸福”地与这些问题擦肩而过,浑然不觉。可是本人一直都是孤军奋战,连开发环境都要自己搭建,这次又踩了新的坑,发现网站所用的woff、svg等字体压根就没被页面加载。反复排摸都不得其解,用浏览器访问服务器上的这些字体url,全都报404错误,只有ttf的字体能被访问到…

事情还得起源于Google被墙这事,在几个月前我改用了360提供的字体库,一直也运行稳定。今天发现360的字体库失效了,网站字体又变回系统字体,而且一直在尝试加载360的字体库,页面变得很慢,和当初加载不到Google字库的时候一个德性…看来没有永远靠得住的服务啊,要想用字体,还得靠自己…

于是我把网站要用的“Open Sans”字体给下载下来(找字体百度一大堆下载地址),下载下来的字体是ttf格式。到 fontsquirrel 这个网站把字体转换一下,下载它自动生成的压缩包,解压得到这些字体文件:
在IIS服务器上部署svg/woff/woff2字体

然后一股脑都上传到服务器上,注意刚刚解压的文件里面已经生成了加载字体的CSS代码,在文件stylesheet.css里,直接拷贝过来把font-family改成我要的“Open Sans”,放到自己网站加载的样式表中即可:

1
2
3
4
5
6
7
8
9
10
11
@font-face {
	font-family: 'Open Sans';
	src: url('font/opensans-webfont.eot');
	src: url('font/opensans-webfont.eot?#iefix') format('embedded-opentype'),
		url('font/opensans-webfont.woff2') format('woff2'),
		url('font/opensans-webfont.woff') format('woff'),
		url('font/opensans-webfont.ttf') format('truetype'),
		url('font/opensans-webfont.svg#open_sansregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

本以为大功告成了,刷新网站,字体还是不对。检查发现在url没错的前提下,字体文件都报404错误。

于是再百度谷歌一堆方案,发现原来是IIS不认SVG,WOFF/WOFF2这几个文件类型,得给她们加MIME类才行:
远程登录主机,打开IIS,找到网站,右键属性,打开“HTTP头”,找到右下角的“MIME类型…”
在IIS服务器上部署svg/woff/woff2字体

新建如下3条:
.svg image/svg+xml
.woff application/x-font-woff
.woff2 application/x-font-woff
在IIS服务器上部署svg/woff/woff2字体
完成后点应用。

回到浏览器再刷新页面,字体终于完美加载了。

注:本文所描述的运行环境是IIS6。在IIS7或更高版本中,“MIME类型”所在的位置会有所不同,但添加的参数一致。IIS7中如何配置可以参考我的另一篇博客:在Windows Azure/IIS7环境下部署svg/woff/woff2字体,添加MIME类型

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/682.html。百度和各类采集站皆不可信,搜索请谨慎鉴别。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以查看本文的最新版本。

如本文对你有用,请在页面右侧栏扫码领取我的支付宝红包,作为打赏吧 (喂到底是我赏你还是你赏我啊-_-!)

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

5 关于 “在IIS服务器上部署svg/woff/woff2字体” 的评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注