这是一个创建于 4542 天前的主题，其中的信息可能已经有所发展或是发生改变。
效果见我的个人主页 http://www.undozen.com
请先忽略一下这个暴丑的版面设计吧
会先以默认字体打开，加载完字体后再替换成我选的那个字体。因为有点大（2M+），可能要花一点时间下载，只需下载一次，完成后以后刷新都不用再下载。
原理是把字体转成 base64，然后用 ajax 取下来存到 localStorage（如果连 localStorage 都不支持，就别跟我说 webfont 了），以后如果 localStorage 有字体的话就直接用了。默认的 localStorage 有 5M 空间呢。不用白不用。
解决了 FOUT（Flash Of unstyled Text）问题（有没有这样的体验，访问 web font 的网页时如果网速慢，文字半天不出来）。现在不太好的体验是可能你阅读文章到一半，字体下好了，文字都会闪一下。
不知怎么解决好。要不第一次就完全只用默认字体，只是把个性化字体保存下来，第二次开始再使用这个字体？或者加载字体时给个提示让用户有个“将会闪一下”的心理准备？
请先忽略一下这个暴丑的版面设计吧
会先以默认字体打开，加载完字体后再替换成我选的那个字体。因为有点大（2M+），可能要花一点时间下载，只需下载一次，完成后以后刷新都不用再下载。
原理是把字体转成 base64，然后用 ajax 取下来存到 localStorage（如果连 localStorage 都不支持，就别跟我说 webfont 了），以后如果 localStorage 有字体的话就直接用了。默认的 localStorage 有 5M 空间呢。不用白不用。
解决了 FOUT（Flash Of unstyled Text）问题（有没有这样的体验，访问 web font 的网页时如果网速慢，文字半天不出来）。现在不太好的体验是可能你阅读文章到一半，字体下好了，文字都会闪一下。
不知怎么解决好。要不第一次就完全只用默认字体，只是把个性化字体保存下来，第二次开始再使用这个字体？或者加载字体时给个提示让用户有个“将会闪一下”的心理准备？
17 条回复 1970-01-01 08:00:00 +08:00
 | 1 undozen OP 现在把字体 json 做成 jsonp 放到又拍云，速度块一点了。普通网页上在加上很多图之类的，感觉应该就不明显。这应该是一个可用的方案如果非要用 web fonts 甚至用中文字体的话。 |
 | 2 msg7086 2013-07-14 19:34:42 +08:00 |
 | 3 P233 2013-07-14 19:40:26 +08:00 多谢楼主，准备也折腾一下 :) |
 | 4 wxm4ever 2013-07-14 20:40:39 +08:00 为什么不用 google 的 webfont loader? 然后中文字体的话可以通过工具来把字库精简下. |
| 5 undozen OP @wxm4ever webfont loader 还是无法避免 FOUT 吧。 并且即便 HTTP 上有 cache，也还是需要发起请求，仍然比不上直接用 localStorage 缓存 |
 | 6 aeryen 2013-07-14 22:02:20 +08:00 @undozen 我前几天试用了一下 webfont loader，似乎可以做到在体未加载时隐藏内容，加载后激活事件将内容显示，就避免了FOUT。 |
| 7 undozen OP GBK 版的字体收到了，有 11M，转成 woff 也有 6M，再按这个方法用不了。真要想想 @msg7086 提供的工具要怎样用起来。 |
 | 8 kurtrossel 2013-07-15 10:49:19 +08:00 笔记本直接停止响应2分钟 字体挺好看 |
| 9 undozen OP @kurtrossel 汗……这…… 我还是上 application cache 吧 |
| 10 kurtrossel 2013-07-15 14:49:20 +08:00 实际上不知道你对我的本子做了什么 笔记本i3 2.1G，4G内存，win7 64位，按理说不应该卡的连我都不认了 你可以看看其他人什么反应 |
| 11 undozen OP @kurtrossel 就是把文件用 base64 存取。是 IE 吗？ 看来在某些操作系统和浏览器上还是会有性能问题。 |
| 12 kurtrossel 2013-07-15 15:38:55 +08:00 搜狗浏览器，高速模式，应该是chrome内核吧？ |
 | 13 leonardoleung 2013-07-15 16:03:19 +08:00 10秒，chrome 28 |
| 14 wxm4ever 2013-07-16 14:11:01 +08:00 webfont loader 可以在字体未下载完毕时用默认字体显示,然后等待下载完毕后会更新页面显示. |
 | 15 bsbgong 2013-07-17 09:13:55 +08:00 我这儿一点卡顿都没有 但好像没感觉到字体有变化 win7 64bit, chrome localstorage里你的域名下倒是有两个key: song, verilyserifmono LZ是不是可以加一栏，以展示前后字体的对比 |
| 16 undozen OP @bsbgong 我现在是中文和 mono 存 localStorage，英文存 sessionStorage（两个都存 localStorage 存不下），两个都加载完才换字体。不知道是不是 sessionStorage 这边出了问题。 |
 | 17 otakustay 2013-07-17 23:05:46 +08:00 只想吐槽没有localStorage就别提webfont是啥意思，webfont从ie6一路支持到ie11，怎么就肯定要有localStorage了- - 另外webfont设了缓存还要发请求是不是缓存没搞好，有用Expires头么？ |
Select Language