这是一个创建于 3945 天前的主题，其中的信息可能已经有所发展或是发生改变。
出问题的是这个页面： http://kelvinh.github.io
问题描述：在Chrome下，打开页面的一瞬间，字体很大，然后等页面加载完成之后，字体回归到正常大小。
如果第一次没注意，可以后面用Ctrl + F5强制刷新，即可看到现象。
个人感觉是CSS的问题，烦请各位前端高手帮忙看看，非常感谢~~
问题描述：在Chrome下，打开页面的一瞬间，字体很大，然后等页面加载完成之后，字体回归到正常大小。
如果第一次没注意，可以后面用Ctrl + F5强制刷新，即可看到现象。
个人感觉是CSS的问题，烦请各位前端高手帮忙看看，非常感谢~~
 |
1
AWSAM 2014-02-23 14:11:09 +08:00  1
css 小白。。
html { font-size: 62.5%; } 是因为html作为跟节点用%的缘故么。。 |
 |
2
chairuosen 2014-02-23 14:15:26 +08:00 1
我觉得是css属性可能会在标签读取完全的情况下才渲染，然后你页脚加的js是同步方式阻塞了页面读取，这样读到这时候htmlbody还没关门呢，其他字体不知道根字号是多少，就按100%算了。js完成后才按62.5算。证据是在js打个断点，字号就一直那么大了。解决办法是给js套个window.onload或者用异步加载js
|
 |
3
kfll 2014-02-23 14:23:20 +08:00 1
...是因为楼主有个好名字
|
 |
4
hewigovens 2014-02-23 14:28:53 +08:00 1
打开如果不操作的话一直是很大的字体
|
 |
5
sneezry 2014-02-23 14:30:08 +08:00 1
确实只有Chrome是不一样的。首先说一下，问题出在root element font size。楼主看下，字体变大了，是不是变大的字体是以16px为基底的。没错，html已经指定了62.5%的字号了，也就是12*62.5%=10px，但是为什么Chrome还是以16px为基底呢？再观察一下，网站的标题和下面的首页两个字大小是正常的吧？也就是h1、h2和h3是正常的，而剩下的就不正常了，那么问题到底出在哪里呢？就是@media。出问题的DOM都是在@media定义的（先吐槽小楼主css中@media逻辑写得好混乱）。所以总结一下，这个问题我猜是Chrome的BUG，@media中root element的字号没有正确解析出来而使用了默认的16px，而@media外的样式则成功解析出了html的字号为62.5%。现在rem还是有很多问题的，建议和em及px配合使用（btw，lz连margin和width都用rem做单位简直是暴力至极了）
|
|
6
sneezry 2014-02-23 14:41:19 +08:00 1
|
 |
7
ini OP @AWSAM
@chairuosen @kfll @hewigovens @sneezry 谢谢各位的热心回复，感谢已送出。确实如各位所说，和html结点的字体定义以及rem的使用有关，应该是触发了Chrome的bug :-D @sneezry 大哥，你太diao了，你这么diao，你家里知道么？ :-p |
Select Language