CSS远程加载微软雅黑/微米黑字体的方法

作者:stoat 发布时间:2013-03-20 分类:技术

以前的老数据,刚好需要,然后通过快照找到了,然后copy下来。。只能说国产搜索引擎都是垃圾,都半年了现在居然还能找到之前的数据。。


如何通过使用CSS远程加载微软雅黑/微米黑字体


自vista系统以后,Windows都默认搭配了微软雅黑字体,但是xp系统除非你去安装此字体,否则网页默认显示的就是比较‘丑陋’的宋体了。嗯,微软雅黑的字体库是15.65M,对于中国的带宽来说还是太大了点吧,我找了一个替代字体但是跟微软雅黑非常相近,而且大小只有5M都不到哦,它的名字叫做文泉驿微米黑。这里需要做一个判断,如果访问网页的客户机上有安装微软雅黑或者文泉驿微米黑字体就直接使用客户机器上的字体,否则,加载网页上的文泉驿微米黑字体。


body {font-family:'微软雅黑','微米黑'}
@font-face {
font-family:微米黑;
src: url('微米黑.eot'); /* IE9 Compat Modes */
src: url('微米黑.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('微米黑.woff') format('woff'), /* Modern Browsers */
        url('微米黑.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('微米黑.svg#微米黑') format('svg'); /* Legacy iOS */
}

字体下载:
微米黑http://www.everbox.com/f/HkMtNXW1WXmSS2AFfYhDGuNUuA
微软雅黑http://www.everbox.com/f/HkMtNXW1WXmSS2AFfYhDGuNUuA

原文地址:CSS远程加载微软雅黑/微米黑字体的方法 by 雪鼬博客

标签:css 网站开发

评论已关闭