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

渲染

网页

效果

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

1

ZhaoMiing

Nov 22, 2014

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

2

xupefei

Nov 22, 2014

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

3

yukirock

Nov 22, 2014 via iPhone

我来抖机灵啊。

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

4

Biwood

OP

Nov 22, 2014

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

5

helone

Nov 22, 2014

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

6

Biwood

OP

Nov 22, 2014

@helone 貌似解释得通

7

kmvan

Nov 22, 2014

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

8

Keinez

Nov 22, 2014

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

9

Starduster

Nov 23, 2014 via iPhone

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

10

iscraft

Nov 23, 2014

chrome://flags/
启用DirectWrite

11

pandada8

Nov 23, 2014

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