YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » CSS » -webkit-text-size-adjust: none; 解决 Chrome 浏览器中设置小于 12px 的字体大小问题

-webkit-text-size-adjust: none; 解决 Chrome 浏览器中设置小于 12px 的字体大小问题

不知道说是 Chrome 智能呢?还是说它多此一举?Chrome 浏览器中存在默认会自动将小于 11px 大小的字体调整为 12px。我在写 BlueNight 主题的最新评论时候就设置了评论发布时间为 11px ,无意中有再次发现 Chrome 的这个字体显示问题(最早还是在阿里国际站的时候第一次遇到这个问题)。看看这样的代码:

.date-small {
    font-size: 11px;
}
.date-normal {
    font-size: 12px;
}

用 Chrome 浏览器打开,你会发现两个 CSS 产生的显示结果是一样的,11px 自动变为了 12px。一般情况下,字体大 1px 没有多大影响,但是像 BlueNight 最新评论那样显示宽度有限的情况下,字体大 1px 可能就造成布局的显示问题了。好在问题比较容易解决:-webkit-text-size-adjust: none;,就可以帮我们解决这个问题。我们只需要这么写:

.date-small {
    font-size: 11px;
    -webkit-text-size-adjust: none;
}

size-adjust?小于 12px 的英文字体显示起来还是很好看的,不知道 Google 的工程师是出于什么原因考虑要 adjust?Anyway,我们可以将 -webkit-text-size-adjust 设置为 none 来解决。不过在另外一个主流的浏览器 Opera 中,就没有这么幸运了。没有 -o-text-size-adjust,这样的CSS 属性,在 Opera,我们就只用通过自己手动设置了:工具->首选项->高级->字体->最小字体大小(像素)。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:-webkit-text-size-adjust: none; 解决 Chrome 浏览器中设置小于 12px 的字体大小问题

« »

2 条评论

  • 嗯嗯,关于Chrome中文版12号以下的字体不识别,解决方案
    html {-webkit-text-size-adjust:none;}

  • PS:作为前端工程师,我们也只有忍受各种浏览器兼容问题了!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)