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

渲染

网页

效果

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

ZhaoMiing

Nov 22, 2014

1

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

xupefei

Nov 22, 2014

2

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

yukirock

Nov 22, 2014 via iPhone

3

我来抖机灵啊。

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

Biwood

OP

Nov 22, 2014

4

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

helone

Nov 22, 2014

5

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

Biwood

OP

Nov 22, 2014

6

@helone 貌似解释得通

kmvan

Nov 22, 2014

7

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

Keinez

Nov 22, 2014

8

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

Starduster

Nov 23, 2014 via iPhone

9

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

iscraft

Nov 23, 2014

10

chrome://flags/
启用DirectWrite

pandada8

Nov 23, 2014

11

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