这种网页渲染的效果是怎么实现的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3683 天前的主题，其中的信息可能已经有所发展或是发生改变。

11 条回复 • 2014-11-23 10:57:11 +08:00

ZhaoMiing

2014-11-22 21:31:40 +08:00

这个真的不是浏览器的bug吗？

xupefei

2014-11-22 21:33:46 +08:00

这是 WebFont 还没加载的时候吧。
Chrome 直接把字符留空， Firefox会先用默认字体显示着，等加载完了再换。

yukirock

2014-11-22 21:38:49 +08:00 via iPhone

我来抖机灵啊。

* { color: rgba(0,0,0,0) !important; }

Biwood

2014-11-22 21:41:58 +08:00

@ZhaoMiing 这。。。我不知道说什么好，凭我做前端的直觉，应该不是bug

helone

2014-11-22 21:42:16 +08:00

是因为CSS里调用的网页字体，但是加载的字体文件还没下载完造成的

Biwood

2014-11-22 21:47:50 +08:00

@helone 貌似解释得通

kmvan

2014-11-22 21:53:41 +08:00

字体而已。
php.net 的html结构，非常不错，值得学习。

Keinez

2014-11-22 23:16:21 +08:00

你的网速太慢了字体没下载出来。进入chrome调试模式模拟低速然后清除缓存刷新即可看到效果。

Starduster

2014-11-23 05:04:42 +08:00 via iPhone

@Keinez 也不一定是网速慢，也可能是墙的问题
我访问很多网站不挂ss就这效果，大概是用了谷歌字体
不过也取决于浏览器的渲染策略，Safari会有楼主这情况，chrome即使显示错误的字体也会优先把内容显示出来

iscraft

2014-11-23 08:47:29 +08:00

chrome://flags/
启用DirectWrite

pandada8

2014-11-23 10:57:11 +08:00

@Starduster 谷歌不会……
Anyway一般这种时候按下停止一般都行
以及对于加载了谷歌CSS或JS的页面菊花很久的时候也可以尝试下停止，有时有奇效