zoukankan      html  css  js  c++  java
  • 中文版Chrome浏览器不支持12px以下字体的解决方案

    中文版Chrome浏览器不支持12px以下字体的解决方案

    Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px,英文版则没有限制,主要是因为chrome认为汉字小于12px就会增加识别难度,尤其是中文常用的宋体和微软雅黑。而我们在实际项目中,对于数字/英文内容,其他字体的文本可能会有特殊的需求要求它们以更小的字号来显示,这个时候就需要取消浏览器的自动调整功能了。

    一般解决方案是禁止webkit浏览器配置调整网页的字体大小。如下CSS定义方式:

    1. .classstyle{ -webkit-text-size-adjust:nonefont-size:9px; }  

    再讲一下text-size-adjust属性,该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小,safari 3.0+,chrome 1.0+可以支持。属性值,可以为三种:

    percentage:字体显示的大小;
    auto:默认,字体大小会根据设备/浏览器来自动调整;
    none:字体大小不会自动调整


    据说该属性最初专门是为iPhone版safari设计的,用来自动调整普通网页在iPhone手机端字体的展现问题,不过,既然是webkit的私有属性,现在也经常用在webkit内核的桌面浏览器限制页面展示。实际上,这是webkit的一个bug。在最新版的Chrome已经修复。

    需要注意的是,不合理的使用-webkit-text-size-adjust:none会造成许多不好的影响。比如将其定义为全局属性的话,在Chrome中当用户放大缩小页面(PC上按住Ctrl滚动鼠标滚轮可缩放网页)的时候,文字却维持定义的大小而不放缩,给用户带来的不太友好的体验。所以我们在使用时,最好定义为局部有效,而不要图省事一句html{-webkit-text-size-adjust:none;}了事。

    由于没有 -o-text-size-adjust,这样的CSS 属性,在 Opera,我们就只能通过自己手动设置了:工具->首选项->高级->字体->最小字体大小(像素)。

    PC桌面版Chrome 27正式取消了-webkit-text-size-adjust属性的支持,实际上是修正了原有的bug。如果定义该属性在Chrome调试窗口会显示Unknown property name,所有字号最小为12px。但是,移动端chrome/safari目前依然支持-webkit-text-size-adjust属性。因为此属性的滥用会使得webkit内核的浏览器失去调节能力,对于有视觉障碍的浏览者非常不友好(尤其是移动终端),那么现在该如何实现原来的需求呢?
    我们可以尝试通过对文字区域局部应用以下样式解决:

    1. .chrome_adjust {  
    2.     font-size9px;  
    3.     -webkit-transform: scale(0.75);  
    4. }  


    12×0.75=9,对于其它浏览器来说,12px以下的字号都是可以识别的,这里仅需要对于Chrome浏览器进行缩放。可是如何分辨是Safari还是Chrome,目前尚没有有效的CSS hack。可以通过javascript来判断是否为Chrome。判断方法:var isChrome = !!window.chrome;当检测为Chrome的时候,将.chrome_adjust这个类添加到对应的标签。

    但是,问题还没有解决。看到网页在三种浏览器的不同表现:

    1)、Chrome下由于启用了缩放,所以字符间距出现问题,影响了美观,这时候如果追求完美,可能你还会想到js判断为Chrome后再用CSS属性letter-spacing去修复;

    2)、Firefox不认识-webkit,所以表现正常,9px;

    3)、Opera 12.5+能够识别-webkit-前缀(Opera 12.15版本,内核暂未更换为webkit,但是已能够识别-webkit-前缀了,而且在检查元素时还抹掉了前缀),但又能够显示12px以下的字号,结果变成了9×0.75,影响了肉眼的识别,这时候,又得给opera添加-o-transform: scale(1);这个属性。

     

    1. .chrome_adjust {  
    2.     font-size9px;  
    3.     -webkit-transform: scale(0.75);  
    4.     -o-transform: scale(1);    //针对能识别-webkit的opera browser设置  
    5. }  

     

    其实,源自挪威的Opera一贯使用自己的引擎(Presto),但经常造成一些所谓的“兼容性问题”。在越来越多网站针对WebKit优化的情况下,Opera的对策就是,引入一些WebKit引擎的前缀属性,以避免开发者因为网页属性选择而影响Opera功能的发挥。Opera 12.50将是其第一个支持Webkit属性的桌面浏览器,包括-webkit-linear-gradient、-o-linear-gradient两种不同类型。移动版本也会使用同样的核心。相关测试的开发人员可以下载模拟器Opera Mobile Emulator——Windows、Linux、Mac版本。

    引用仇童鞋的话总结一下:

    -webkit-text-size-adjust 的本职是用于mobile的,见规范:

    CSS Mobile Text Size Adjustment Module Level 1 (访问http://dev.w3.org/csswg/css-size-adjust/)

    Apple 开发社区的 Safari Web Content Guide(访问http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW16)

    之所以现在的桌面版webkit浏览器支持他,是因为实际上这是一下bug。

    Bug 56543 – CSS property "-webkit-text-size-adjust" means different things in Safari and iOS(访问https://bugs.webkit.org/show_bug.cgi?id=56543)

    这个bug在最新版的 WebKit Nightly Builds 里已经被修复了。

    这属性现在的一般用处是防止iPhone在坚屏转向横屏时放大文字(注意,就算viewport设置了maximum-scale=1.0 文字还是会放大的)。

    而且iPhone和iPad的默认设定是不一样的:

    iPhone默认设定 -webkit-text-size-adjust: auto;

    iPad默认设定 -webkit-text-size-adjust: none;

    所以iPad默认是不调节的。

    此属性还支持百分比,这在当前的桌面版的webkit浏览器是不支持的,所以如果不想让iPhone横坚屏切换的时候调节文字,用 -webkit-text-size-adjust: 100%; 

    绝对不能用 -webkit-text-size-adjust: none; 这会导致仍然支持 -webkit-text-size-adjust: none;的桌面版的webkit浏览器无法人为放大文字大小,严重影响可用性。

    最后总结一下:对于www web站点,完全没有必要使用-webkit-text-size-adjust属性,因为桌面版屏幕空间比较大,12px满足大部分需求场所,没有必要非设为12px以下的字体,除非有特殊需求。在手机等移动端web页面,由于webkit浏览器支持设置小于12px的字体,虽然浏览器依然保留了对该属性的支持,但我们完全没有必要使用。

    所以结论就是在万不得已需要使用-webkit-text-size-adjust的情况下,一定要写作-webkit-text-size-adjust: 100%; 。因为此写法只有mobile版支持(本人iOS 下safari/chrome均测试通过),而Chrome 27+和其他低版本的桌面版webkit浏览器,都不识别,也不会有设为none对视觉障碍用户不能放缩的负面影响。

  • 相关阅读:
    BZOJ 3506 机械排序臂 splay
    BZOJ 2843 LCT
    BZOJ 3669 魔法森林
    BZOJ 2049 LCT
    BZOJ 3223 文艺平衡树 splay
    BZOJ 1433 假期的宿舍 二分图匹配
    BZOJ 1051 受欢迎的牛 强连通块
    BZOJ 1503 郁闷的出纳员 treap
    BZOJ 1096 ZJOI2007 仓库设计 斜率优化dp
    BZOJ 1396: 识别子串( 后缀数组 + 线段树 )
  • 原文地址:https://www.cnblogs.com/xiaotao123/p/3391808.html
Copyright © 2011-2022 走看看