折腾了一下 web font - www.undozen.com
undozen · undoZen · 2013-07-14 18:25:48 +08:00 · 5044 次点击这是一个创建于 4149 天前的主题，其中的信息可能已经有所发展或是发生改变。
效果见我的个人主页 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