2010/04/20：

116

中文版 Chrome 下煎蛋页面很囧，求 CSS Hack 方案

sein , 09:00 pm / 10,113 pv / 分享到微博

今天无意打开了我从来不用的 Chrome，发现煎蛋页面用 Chrome 看起来很粗鲁。仔细辨别是某些字体被放大了，使劲 ctrl+0 都没用。如下图：
中文版 Chrome 下煎蛋页面很囧，求 CSS Hack 方案

这个惊人发现让我郁闷的心情更加郁闷。上网搜了一下，原来是中文版 Chrome 的 bug，对中文用户将所有网页最小字体强行限制在12px。目前已知的解决方案只有 Hack Chrome 自身，据说解决方案是：

打开路径 "Documents and Settings\用户名\Local Settings\Application Data\Google\Chrome\User Data\Default\"下的 Preferences 文件，在 "webkit" 的 "webprefs" 里面增加两行：
"minimum_font_size": 8,
"minimum_logical_font_siz": 12,

但是我觉得这事异常诡异。这么牛逼的浏览器，居然有这么搞笑的 bug，这叫广大 Chrome 党情何以堪；对于不知情的 Chrome 党，这叫煎蛋 ER 情何以堪。指望 Chrome 修正升级暂时不可能，我相信一定有 CSS Hack 办法。祈求你给我们力量，感谢你给我们力量，我们尊敬的、亲爱的大地母亲! 谢谢大家!

# update：2010.10.14 / evansdiy 留言提示 -webkit-text-size-adjust:none; 证实可行。这个问题居然就解决了！ ₪

[ 上 ] [ 下 ]已有116条评论

  1. hszts @ 2010-04-20 21:03:38 #1

    我一直以为是这么大……悲剧的沙发

    oo (16) / xx (0)
  2. living @ 2010-04-20 21:04:20 #2

    ……………一直用chrome的飘过,不觉得有问题.
    最大的问题反而是开始用英文版,自动更新变成中文了…..

    oo (2) / xx (3)
  3. sunny @ 2010-04-20 21:04:48 #3

    为什么我在那里找不到WEBKIT……..

    oo (1) / xx (0)
  4. 喵小咪 @ 2010-04-20 21:07:42 #4

    ctrl+0 速度按之

    oo (1) / xx (0)
  5. 喵小咪 @ 2010-04-20 21:08:13 #5

    - -按了没感觉

    oo (1) / xx (0)
  6. 薄荷辣椒 @ 2010-04-20 21:09:34 #6

    最省时省力的方法莫过于把增大的文字部分替换成图片……

    oo (1) / xx (0)
  7. 卤蛋 @ 2010-04-20 21:16:03 #7

    一直没感觉这是问题~~~

    oo (4) / xx (0)
  8. eating @ 2010-04-20 21:16:11 #8

    表郁闷咯，我一直用chrome，刚才开ie对比了一下，一切正常！

    oo (0) / xx (0)
  9. sein @ 2010-04-20 21:17:08 #9

    @卤蛋: @eating: 你们用的是英文版 Chrome 吧？

    oo (0) / xx (0)
  10. 卤蛋 @ 2010-04-20 21:17:33 #10

    用户体验不代表优乐美~~~

    oo (2) / xx (0)
  11. night @ 2010-04-20 21:19:14 #11

    以前还真么发现，打开IE看了下，没CHROME的好看。

    oo (2) / xx (1)
  12. 呃 @ 2010-04-20 21:19:49 #12

    其实无所谓，我还真没注意到…

    oo (1) / xx (0)
  13. goo_cc @ 2010-04-20 21:22:57 #13

    什么，我是臭美党，一直没发现，觉得还挺好滴

    oo (0) / xx (0)
  14. renooGi @ 2010-04-20 21:23:24 #14

    没发现异常
    用的是英文版chromeplus

    oo (0) / xx (0)
  15. 雨碎江南 @ 2010-04-20 21:24:36 #15

    这不是什么bug吧,chrome限制字体最小大小应该是为了页面整体的呈现效果…..太小的字体看着费劲,而且把”活动解释权归煎蛋所有”之类的文字做的超小有那啥的嫌疑…

    oo (5) / xx (1)
  16. feelslike @ 2010-04-20 21:29:37 #16

    chrome英文被升级成中文用户表示情绪稳定……

    oo (1) / xx (0)
  17. angelcn @ 2010-04-20 21:30:13 #17

    这是因为Chrome和FireFox的默认字体设置不一样说引起而已….使用固定的font-family和font-size就能解决..

    建议：#sidebar h3 {font-family: Arial; font-size: 10px;}

    oo (0) / xx (0)
  18. 星光 @ 2010-04-20 21:30:24 #18

    呃…我觉得字大挺好的，起码省眼
    建议干点别的换换心情，我美工干一段时间也得干点别的，要不然不管走到哪干什么都死命盯着细节看，会得强迫症的- -|||

    oo (0) / xx (1)
  19. L_蒂斯 @ 2010-04-20 21:32:00 #19

    小事小事

    oo (0) / xx (0)
  20. zhouzm @ 2010-04-20 21:32:47 #20

    chromium 5.0.319.0 中文版和Firefox 3.6.3中文版对比，完全正常

    oo (0) / xx (0)
  21. 海凉 @ 2010-04-20 21:33:19 #21

    safari一切正常

    oo (0) / xx (0)
  22. sein @ 2010-04-20 21:34:10 #22

    @雨碎江南: 小字体一般是显示辅助信息，很大程度有装饰作用，强迫被放大页面就很乱

    @angelcn: 试过你说的办法了，还是不行啊

    @星光: Chrome 让我纠结了 - -

    oo (0) / xx (0)
  23. sein @ 2010-04-20 21:35:00 #23

    @L_蒂斯: 本来是小事，但是这么多人用 Chrome 就不是小事了

    oo (1) / xx (0)
  24. ggarlic @ 2010-04-20 21:35:07 #24

    我也觉得这个bug效果挺好的

    oo (0) / xx (1)
  25. fisio @ 2010-04-20 21:39:37 #25

    关键还是因为中文用户大半还在用无渲染的宋体，所以 chrome 才出了这么一招。sb的是 chrome mac 默认也是这么设置的，这个就操蛋了，虽然也能改

    oo (1) / xx (0)
  26. Kanva @ 2010-04-20 21:40:51 #26

    情何以堪啊情何以堪

    oo (0) / xx (0)
  27. xrspook @ 2010-04-20 21:47:37 #27

    原来如此，幸好自己blog的默认字体就12px，没有用0.*的，终于明白从前用的那个模板为什么怎么调字体都诡异了。包含所有标签的云在Chrome也不起作用了，呜呜呜～～～

    oo (0) / xx (0)
  28. ivanchaos @ 2010-04-20 21:48:03 #28

    “祈求你给我们力量，感谢你给我们力量，我们尊敬的、亲爱的大地母亲! 谢谢大家!” —— 先谢国家！！！

    oo (2) / xx (0)
  29. angelcn @ 2010-04-20 21:48:30 #29

    @sein: 不知你用什么版本，反正我这里用默认字体设置的Chrom5.0.357没有问题…

    oo (0) / xx (0)
  30. 十二指肠 @ 2010-04-20 21:49:45 #30

    这不是bug，是Chrome特意所做的设置，因为9px大小的英文字体可以看的很清楚，而中文字符却需要12px才能清晰地阅览。Chrome秉承Google软件一贯的“替用户作决定”风格，就把最小字体限制在了12px。
    所以我要坚定不移地黑Chrome，Firefox才是王道浏览器。

    oo (2) / xx (3)
  31. smtownboa @ 2010-04-20 21:50:31 #31

    = =一直以为是这个大小的。。噢哟。。chrome用惯了…

    oo (2) / xx (0)
  32. 罐头 @ 2010-04-20 21:54:18 #32

    FF飘过..

    oo (0) / xx (0)
  33. meilomi @ 2010-04-20 22:00:35 #33

    真的哦..可是字太小的话就看不清楚了额

    oo (0) / xx (0)
  34. JOJO @ 2010-04-20 22:00:38 #34

    恩，确实不太好看，望能顺利解决。
    另：日文版Chrome一切正常，界面清爽干净，用户情绪稳定

    oo (0) / xx (0)
  35. boreme @ 2010-04-20 22:02:48 #35

    要解决只有一个办法,用图

    oo (0) / xx (0)
  36. race2fly @ 2010-04-20 22:03:18 #36

    喜欢大字版

    oo (0) / xx (0)
  37. boreme @ 2010-04-20 22:03:22 #37

    @boreme: 或Flash

    oo (0) / xx (0)
  38. 且听风吟 @ 2010-04-20 22:05:46 #38

    chrome这样挺好呀，而且对阅读没有任何影响的说，无所谓吧。看惯chrome的还觉得ff的页面很囧呢。

    oo (2) / xx (0)
  39. echo @ 2010-04-20 22:10:05 #39

    英文版用戶表示沒壓力～

    oo (0) / xx (0)
  40. alluse @ 2010-04-20 22:10:25 #40

    #sidebar{font-size: 62.5%;}
    #sidebar h3{font-size:0.9em;}
    没有中文Chrome，我用这个解决过IE不显示12px以下的显示问题。这个是在wp的默认模板css里的。

    oo (0) / xx (0)
  41. 希於 @ 2010-04-20 22:12:04 #41

    没什么问题

    oo (0) / xx (0)
  42. zypatroon @ 2010-04-20 22:13:06 #42

    一直用英文版的表示很淡定…

    oo (0) / xx (0)
  43. 南瓜 @ 2010-04-20 22:13:37 #43

    safari用户表示一切正常～

    oo (0) / xx (0)
  44. tracy33 @ 2010-04-20 22:26:11 #44

    其实也蛮好的，你不说，我这个chrome粉丝也不会发现哈哈

    oo (0) / xx (0)
  45. Eleanor @ 2010-04-20 22:29:58 #45

    mac os+chrome一切正常

    oo (0) / xx (0)
  46. 长颈鹿 @ 2010-04-20 22:47:30 #46

    我属于杯具的不知情chromer……

    oo (0) / xx (0)
  47. hydotcom @ 2010-04-20 22:58:08 #47

    煎蛋杯具…Chrome党围观

    oo (0) / xx (0)
  48. t2o2 @ 2010-04-20 23:02:15 #48

    我Mac的Chrome和Firefox下煎蛋显示没有你圈的那些问题。
    Chrome: 5.0.342.9 beta
    Firefox: 3.5.6

    oo (1) / xx (0)
  49. 猪猡髻 @ 2010-04-20 23:14:18 #49

    一直使用Chrome英文版的飘过。。。

    oo (0) / xx (0)
  50. 绵花 @ 2010-04-20 23:32:21 #50

    =。=偶也是用chrome。。感觉蛮好的嘛~~ sein蜀黍多虑了。。

    oo (1) / xx (0)
  51. Diablo @ 2010-04-20 23:46:11 #51

    5.0.342.9+osx10.6.3;it feels good!

    oo (0) / xx (0)
  52. vela @ 2010-04-21 00:06:02 #52

    习惯了。。谢谢煎蛋关心

    oo (0) / xx (0)
  53. mcc @ 2010-04-21 00:07:45 #53

    这个不算是问题，CHROME不能正常显示12PX以下的中文字体。

    oo (0) / xx (0)
  54. yun @ 2010-04-21 00:17:17 #54

    介不算啥子事，布局也没变，jandan也太精益求精了，orz~

    oo (0) / xx (0)
  55. 天外非仙 @ 2010-04-21 00:17:44 #55

    这个真不是问题

    oo (0) / xx (0)
  56. Sheldon @ 2010-04-21 00:31:54 #56

    用遨游的掩面泪奔而过

    oo (1) / xx (0)
  57. yukon @ 2010-04-21 00:41:45 #57

    中文字小于12px就成歪瓜裂枣了，所以。古哥搞了个这种限制。。至于为啥英文也会被牵连。。貌似程序员懒吧没考虑utf-8码，gbk码什么的。
    我认为没什么大碍。
    你不可能要求一个页面在世界上所有浏览器中都一模一样显示。最多是正常显示就够了。

    oo (2) / xx (0)
  58. Mao @ 2010-04-21 02:28:17 #58

    @sein:

    CHROME解释网页时，FONT－SIZE小于12PX都会调整为12PX，除了HACK CHROME，CSS是不可能解决的

    oo (1) / xx (0)
  59. Mr_Wang @ 2010-04-21 03:05:55 #59

    一直用搜狗的路过~~

    oo (0) / xx (0)
  60. Leo @ 2010-04-21 08:34:29 #60

    不明真相多年， 泪奔了~~~

    oo (0) / xx (0)
  61. 天旋地转 @ 2010-04-21 08:40:44 #61

    现在显示器都大了 还舍不得把字搞大点

    oo (0) / xx (0)
  62. doremisola @ 2010-04-21 08:54:38 #62

    chrome和IE同时开的飘过……
    煎蛋一直用IE上……我也想不通我为啥一直开俩浏览器……

    oo (0) / xx (0)
  63. 百来 @ 2010-04-21 09:02:16 #63

    多大个事…

    oo (0) / xx (0)
  64. berlin @ 2010-04-21 09:42:39 #64

    一直用Chrome，我还以为本来就是怎么大的字体。感觉没什么问题。

    oo (0) / xx (0)
  65. 瓜哥 @ 2010-04-21 09:53:13 #65

    我也是用chrome的啊，没什么不一样吧。我满足于加载、渲染速度中。。。

    oo (0) / xx (0)
  66. 沈玉宁 @ 2010-04-21 10:04:50 #66

    谁知道你们怎么切得网页，可能不规范吧，我切得主流6个浏览器都兼容。

    嫌麻烦就添加CSS

    定义字体所在标签

    例如：about的h3

    h3{font-size:12px;font-weight:blod;}

    不会再有问题的

    oo (0) / xx (0)
  67. sein @ 2010-04-21 10:09:05 #67

    对于楼上众多忠诚 chrome 用户的说法，我深感无语。你们觉得不是问题，那就不是问题吧

    @沈玉宁: 无语，你直接定义成 12px，当然不会变了，麻烦看清要求 - -

    oo (1) / xx (0)
  68. 沈玉宁 @ 2010-04-21 10:09:31 #68

    哦对了，大网站能不用HACKER就不要用，效率绝对低。多一句HACKER，可能多1KB的大小，十万个人访问，速度就被拉下去 十万KB 的速度 ，相当于多了100兆的数据量，服务器多100M的包袱······

    oo (0) / xx (1)
  69. 蓝阵 @ 2010-04-21 10:10:28 #69

    话说chrome上有一款优化校内页面的扩展，貌似叫做校内网改造器，里面就有一个解除页面字体限制的选项，或许可以参考它的脚本试试？

    oo (0) / xx (0)
  70. 小布 @ 2010-04-21 10:20:04 #70

    英文版的没这个问题。

    oo (0) / xx (0)
  71. sein @ 2010-04-21 10:21:48 #71

    @沈玉宁: 雷翻

    @蓝阵: 那样就要求用户自行装脚本，太麻烦了

    oo (0) / xx (0)
  72. 无瞬 @ 2010-04-21 10:22:50 #72

    为了这个帖子我特意上CHROME试了一下 结果丢掉了我的potential沙发

    oo (0) / xx (0)
  73. wynn @ 2010-04-21 11:24:31 #73

    这个东西恐怕无解……

    本来浏览器提供了这个设置就是为了让用户能够在不满意网站提供的方案时有一个绝对控制权，如果能够在用户无参与的情况下覆盖掉这个设置的内容，那就表示这个控制权优先顺序有bug了。

    如果只是右栏的几个标题还可以改用图片，问题是诸如每个留言下面的时间这种地方该怎么办呢？

    我倒觉得唯一的方案（很无奈很憋屈的方案）是改界面设计，从设计上杜绝12px以下的文字出现……

    楼上的某些人显然根本没看正文，只瞄了一眼标题就来自说自话了。

    oo (2) / xx (0)
  74. 沙发 @ 2010-04-21 11:27:31 #74

    大字也不错嘛，另一宗风格

    oo (0) / xx (0)
  75. sein @ 2010-04-21 11:32:24 #75

    @wynn: nod~

    对于喜欢英文小字的我来说，chrome 真让人伤神啊

    oo (0) / xx (0)
  76. rad @ 2010-04-21 12:03:04 #76

    用mac下的ff的路过

    oo (0) / xx (0)
  77. Programus @ 2010-04-21 13:04:49 #77

    给你一个万能解决方案——换成图片。呵呵……

    oo (0) / xx (0)
  78. Clauz @ 2010-04-21 13:19:47 #78

    不用Chrome的理由很多，很多细节还是没firefox好，比如不能强制某个语言用什么字体，我就喜欢中文简体强制雅黑，繁体Jheng，英文Tohama，Chrome就做不到。

    oo (0) / xx (0)
  79. Lansild @ 2010-04-21 13:41:29 #79

    大地之母在忽悠着你

    oo (0) / xx (0)
  80. 小言 @ 2010-04-21 14:58:42 #80

    不看不知道·· 一看发现我的FF也是那么大····
    我也设定了最小字体12px“““
    换成无会有什么后果呢·· 试试看···

    oo (0) / xx (0)
  81. imsilentfish @ 2010-04-21 17:00:37 #81

    没觉得粗

    oo (0) / xx (0)
  82. 素泠 @ 2010-04-21 17:11:10 #82

    一名一直不明真相且后悔得知真相的假装糊涂的百姓路过

    oo (0) / xx (0)
  83. 天猫 @ 2010-04-21 18:28:40 #83

    呃 上次4月1恶作剧的时候就发现了 Chrome的OOXX比IE的大

    oo (1) / xx (0)
  84. jiajia @ 2010-04-21 18:59:55 #84

    你不说我还真没发现，哈哈哈

    oo (0) / xx (0)
  85. 石中玉 @ 2010-04-21 19:25:48 #85

    我现在知道Google为何跟天朝闹别扭了。

    oo (0) / xx (0)
  86. aiya @ 2010-04-21 20:02:08 #86

    围观的不知情的chromer…好像不觉得这个有什么问题

    oo (0) / xx (0)
  87. pcwangwei @ 2010-04-21 22:46:10 #87

    从开始看煎蛋都用的这个浏览器，所以没发现有区别……

    oo (0) / xx (0)
  88. wadefelix @ 2010-04-21 22:48:59 #88

    我姓任

    oo (0) / xx (0)
  89. 蛋疼吧 @ 2010-04-22 02:59:08 #89

    24寸表示毫无影响。

    oo (1) / xx (0)
  90. underone @ 2010-04-22 09:56:50 #90

    换成英文版本就好了…
    我也曾很困惑这个…

    oo (0) / xx (0)
  91. 黑五类 @ 2010-04-22 10:07:35 #91

    赶紧发邮件给google投诉，说不定还能因为因为这个bug赢个把美金。
    不过作为中文版chrome的用户，俺也表示情绪稳定。

    oo (0) / xx (0)
  92. 村姑 @ 2010-04-22 13:38:03 #92

    得瑟的骑着臭美过来看这篇文章，咋没觉得粗鲁呢？

    oo (0) / xx (0)
  93. vinny @ 2010-04-22 17:32:43 #93

    现在大屏那么普遍，大家都会把页面放大了看的吧？在我11寸的小本上更是不放大没法看了（小字体难以分辨）。所以，这真的是个问题么？我此刻在用chromium5.0.382，5.0以前的版本不能记忆网站缩放比例的时候我只用fx，其它一概无视。
    话说我现在看见小字体就头疼，必欲“放大之而后看”，呵呵，何必跟自己的眼睛过不去呢？
    说点废话：用相对单位是否是更好的主意呢？可以保持相对的比例。如果实在纠结这个看来用图片是比较好的办法。

    oo (0) / xx (0)
  94. vinny @ 2010-04-22 17:34:50 #94

    @vinny:
    PS: 放大了对自己的颈椎也是负责啊。

    oo (0) / xx (0)
  95. sein @ 2010-04-22 17:50:46 #95

    @vinny:
    1、小字体的作用一是辅助信息，二是页面构成装饰

    2、相对大小貌似也没用的，因为 Chrome 中文版它担心中国人都看不清汉字，就是强制最小 12px

    oo (0) / xx (0)
  96. vinny @ 2010-04-22 18:06:21 #96

    @sein:

    那么最好的办法似乎就是对chrome做hack，让最小的字体为12px，其它元素的大小等比例放大。喜欢小字的人可以缩小点看。
    我本人对小字体没有好感，sein似乎偏爱英文小字体呀。听说有牛人做了3px的英文字体，LCD上显示还颇为清楚，也许你会感兴趣：http://blog.est.im/archives/638

    oo (0) / xx (0)
  97. sein @ 2010-04-22 18:14:47 #97

    @vinny: 谢谢i的 3px，果然很极限

    我的确是很喜欢英文小字，它们的作用其实就是装饰，但又能提供必要的信息

    oo (0) / xx (0)
  98. Cori?lis @ 2010-04-22 23:12:12 #98

    Safari 4 64-bit用户表示未受影响。

    oo (0) / xx (0)
  99. 哈哈 @ 2010-04-23 20:23:33 #99

    你可以用英文的嘛，我就用得很好

    oo (0) / xx (0)
  100. PrinceMPhantom @ 2010-04-24 18:37:18 #100

    刚换成Chrome的漂泊党表示情绪动荡……~~

    oo (0) / xx (0)
  101. JohnM @ 2010-04-24 22:43:15 #101

    建议在有关字体的css处全部加上
    !important

    如
    #sidebar h3 {font-family: Arial; font-size: 10px;!important}

    oo (0) / xx (0)
  102. JohnM @ 2010-04-25 13:15:25 #102

    @sein
    试试
    BODY:nth-of-type(1) #sidebar h3 {font-family: Arial; font-size: 62.5% !important;}

    oo (0) / xx (0)
  103. peng @ 2010-04-25 20:26:51 #103

    这个问题居然还纠结了，高人啊

    oo (1) / xx (0)
  104. 白兰度 @ 2010-04-26 09:09:18 #104

    chrome是支持CSS3的，你可以在Css里加上一段CSS3的代码，修改部分class样式字体及大小控制
    e.g.
    @font-face {
    font-family: fontcity;
    src: url(”fontcity.ttf”);
    }
    .fontFaceShadow{
    font-family: fontcity;
    font-size: 3.2em;
    letter-spacing: 1px;
    text-align: center;
    text-shadow: 3px 3px 7px #111;
    opacity:0.2;
    }
    像介样- =

    oo (0) / xx (0)
  105. 白兰度 @ 2010-04-26 09:10:26 #105

    PS注:并且据说IE9才开始支持CSS3，也就是说这种代码只有在chrome、firefox……才能看出来

    oo (1) / xx (0)
  106. 乱舞鸡毛 @ 2010-04-26 11:00:10 #106

    我日！终于知道什么叫无知者无畏了……呃，是无所谓……

    oo (1) / xx (0)
  107. sein @ 2010-04-26 11:03:25 #107

    @JohnM: @白兰度: 嗯，我试试

    @乱舞鸡毛: 握手，很无语

    oo (1) / xx (0)
  108. sein @ 2010-04-26 11:24:23 #108

    @JohnM: @JohnM: 经测试，62.5%定义和 !important声明皆无效

    oo (2) / xx (0)
  109. 米子 @ 2010-06-23 17:57:17 #109

    我也正在为此感到困扰，想不到这么多人觉得无所谓………
    真想赶快找到解决方法….

    oo (0) / xx (0)
  110. Jack @ 2010-06-23 23:47:42 #110

    装饰性的英文小字体无法实现，很杯具

    oo (0) / xx (0)
  111. evansdiy @ 2010-10-14 00:12:31 #111

    9px
    8px
    7px
    6px

    oo (0) / xx (0)
  112. evansdiy @ 2010-10-14 00:13:46 #112

    -webkit-text-size-adjust:none; font-size:9px

    oo (1) / xx (0)
  113. 飘飘 @ 2010-11-19 13:16:29 #113

    其实，chrome支持12px以下的，详见：
    http://www.pufen.net/technology/2010/215/

    oo (0) / xx (0)
  114. conanfanses @ 2011-01-20 10:38:31 #114

    CSS中加上这个就全部搞定html{-webkit-text-size-adjust:none;}

    oo (0) / xx (0)
  115. 龙猫 社区 @ 2011-04-11 16:04:44 #115

    龙猫社区的解决方案：针对webkit内核的hack -webkit-text-size-adjust:none;

    http://cytang.com

    oo (0) / xx (0)
  116. 额 @ 2011-08-10 12:44:39 #116

    10px以下的都是坑爹，眼睛都要弄坏的

    oo (0) / xx (0)

填写称呼和邮箱即可发布评论[ 上 ] [ 优 ] [ IMG ]