折腾了一下 web font - www.undozen.com

[undozen]

效果见我的个人主页 http://www.undozen.com
请先忽略一下这个暴丑的版面设计吧

会先以默认字体打开，加载完字体后再替换成我选的那个字体。因为有点大（2M+），可能要花一点时间下载，只需下载一次，完成后以后刷新都不用再下载。

原理是把字体转成 base64，然后用 ajax 取下来存到 localStorage（如果连 localStorage 都不支持，就别跟我说 webfont 了），以后如果 localStorage 有字体的话就直接用了。默认的 localStorage 有 5M 空间呢。不用白不用。

解决了 FOUT（Flash Of unstyled Text）问题（有没有这样的体验，访问 web font 的网页时如果网速慢，文字半天不出来）。现在不太好的体验是可能你阅读文章到一半，字体下好了，文字都会闪一下。

不知怎么解决好。要不第一次就完全只用默认字体，只是把个性化字体保存下来，第二次开始再使用这个字体？或者加载字体时给个提示让用户有个“将会闪一下”的心理准备？

[undozen]

现在把字体 json 做成 jsonp 放到又拍云，速度块一点了。普通网页上在加上很多图之类的，感觉应该就不明显。这应该是一个可用的方案——如果非要用 web fonts 甚至用中文字体的话。

[msg7086]

FontSubset 用于筛选字符精简字体的工具。供参考。

http://www.sapikachu.net/用于mkv内嵌的字体精简工具2011-12-03更新/

[P233]

多谢楼主，准备也折腾一下 :)

[wxm4ever]

为什么不用 google 的 webfont loader?
然后中文字体的话可以通过工具来把字库精简下.

[undozen]

@wxm4ever webfont loader 还是无法避免 FOUT 吧。
并且即便 HTTP 上有 cache，也还是需要发起请求，仍然比不上直接用 localStorage 缓存

[aeryen]

@undozen 我前几天试用了一下 webfont loader，似乎可以做到在字体未加载时隐藏内容，加载后激活事件将内容显示，就避免了FOUT。

[undozen]

GBK 版的字体收到了，有 11M，转成 woff 也有 6M，再按这个方法用不了。真要想想 @msg7086 提供的工具要怎样用起来。

[kurtrossel]

笔记本直接停止响应2分钟

字体挺好看

[undozen]

@kurtrossel 汗……这……
我还是上 application cache 吧

[kurtrossel]

实际上不知道你对我的本子做了什么

笔记本i3 2.1G，4G内存，win7 64位，按理说不应该卡的连我都不认了

你可以看看其他人什么反应

[undozen]

@kurtrossel 就是把文件用 base64 存取。是 IE 吗？
看来在某些操作系统和浏览器上还是会有性能问题。

[kurtrossel]

搜狗浏览器，高速模式，应该是chrome内核吧？

[leonardoleung]

10秒，chrome 28

[wxm4ever]

webfont loader 可以在字体未下载完毕时用默认字体显示,然后等待下载完毕后会更新页面显示.

[bsbgong]

我这儿一点卡顿都没有
但好像没感觉到字体有变化
win7 64bit, chrome
localstorage里你的域名下倒是有两个key: song, verilyserifmono
LZ是不是可以加一栏，以展示前后字体的对比

[undozen]

@bsbgong 我现在是中文和 mono 存 localStorage，英文存 sessionStorage（两个都存 localStorage 存不下），两个都加载完才换字体。不知道是不是 sessionStorage 这边出了问题。

[otakustay]

只想吐槽没有localStorage就别提webfont是啥意思，webfont从ie6一路支持到ie11，怎么就肯定要有localStorage了- -

另外webfont设了缓存还要发请求是不是缓存没搞好，有用Expires头么？