项目因为安全需要,切换到了https协议。这就要求网站中不能有http协议的外站链接,但实际操作中没有想象的那么简单,今天在IE9下面就发现个奇怪的问题。

平台:Windows 7,IE9,https
问题:通过鼠标点击一个链接加载的页面可以显示@font-face定义的字体,但是再刷新这个页面字体就不见了。

是不是字体设置有问题?
在IE9下打开控制台查看网络请求,发现请求了3个不同类型的字体(.eot、.woff、.ttf),但是最终却没有显示字体出来。css代码如下:

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?#iefix');
    src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
         url('fonts/icomoon.woff') format('woff'),
         url('fonts/icomoon.ttf') format('truetype'),
         url('fonts/icomoon.svg#icomoon') format('svg');
}

查找资料,看到了这篇文章,里面说到了一种hack的方式,于是将上面的css改成下面这样:

@font-face {
    font-family:'icomoon';
    src: url('icomoon.eot');
    src: local('☺︎'),
         url("icomoon.woff") format("woff"),
         url("icomoon.ttf") format("truetype"),
         url("icomoon.svg#icomoon") format("svg");
}

但还是不行,继续吧。终于找到一篇文章问题相同,思路是采用base64编码字体到css中。

@font-face {
    font-family:'icomoon';
    src: url('icomoon.eot');
    src: local('☺︎'),
         url("data:application/x-font-woff;charset=utf-8;base64,[BYTE64_STRING]") format("woff");
}

本地有一个icomoon.woff的字体文件,怎样转成base64编码的字符串?
马上想到了比较熟悉的node.js。把icomoon.woff、index.js、run.bat 这3个文件放在同一个目录。

index.js里面的代码:

var fs = require('fs');
var str = fs.readFileSync('icomoon.woff', {encoding:'base64'}).toString();
fs.writeFileSync('base64.txt', str);

run.bat 里面的代码:

@echo off
node index
pause

运行run.bat,会在这个目录里面生成一个base64.txt文件,然后copy里面的内容,按照上面介绍的格式替换[BYTE64_STRING]
data:application/x-font-woff;charset=utf-8;base64,[BYTE64_STRING]

css文件虽然大了一点,但是问题解决了。

相关资源:
Bulletproof @font-face Syntax
@Font-Face won't load via https in IE
Prevent caching when you download active documents over SSL
Font-face not loading in IE8 and IE9 when accessing web via SSL