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

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

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

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

[css] view plaincopy

  1. .classstyle{ -webkit-text-size-adjust:none; font-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内核的浏览器失去调节能力,对于有视觉障碍的浏览者非常不友好(尤其是移动终端),那么现在该如何实现原来的需求呢?
我们可以尝试通过对文字区域局部应用以下样式解决:

[css] view plaincopy

  1. .chrome_adjust {
  2. font-size: 9px;
  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);这个属性。

[css] view plaincopy

  1. .chrome_adjust {
  2. font-size: 9px;
  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对视觉障碍用户不能放缩的负面影响。

时间: 2024-10-27 14:00:44

中文版Chrome浏览器不支持12px以下字体的解决方案 (转)的相关文章

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

解决方案是禁止webkit浏览器配置调整网页的字体大小. 如下CSS定义方式: html,body{-webkit-text-size-adjust:none;} 或: .classstyle{font-size:10px;-webkit-transform:scale(0.8);display:block;}

Chrome浏览器不支持本地Ajax请求的解决方案

问题描述: 通过Ajax获取本地JSON文件时候,报Received an invalid response. Origin 'null' is therefore not allowed access. 错误. 原因: Chrome浏览器不支持本地Ajax请求,当在html文件中使用Ajax时候,就报错. 解决方案: 右击chrome浏览器快捷方式图标,选择属性,在目标中添加:--allow-file-access-from-files,与chrome.exe之前有个空格.

【转】解决chrome浏览器不支持audio和video标签的autoplay自动播放

声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 Chrome 66 也正式关掉了声音自动播放,也就是说 <audio autopaly> <video autoplay>在桌面版浏览器也将失效. 那么怎么解决呢?解决方式如下: 在chrome 浏览器中输入:chrome://flags,搜索“Autoplay policy”,默认为

华为手机浏览器不支持PUT提交方式的解决方案

最近所在技术团队在开发webapp项目,前端angularjs+后端.Net MVC API,API登录接口定义为PUT提交方式,在做兼容测试时发现UC.safari.微信浏览器下都可以登录,但在华为自带浏览器下登录接口总是报错,抓包发现PUT提交请求体为空,用Inisomnia模拟提交空值得到和华为浏览器一样的接口返回信息,初步判断为浏览器提交了空值,Google了一下确实存在部分手机浏览器不支持PUT提交的情况,后在华为官网上了看下了,已有人遇到过来类似的情况,看来该浏览器确实不支持PUT提

Chrome浏览器中autocomplete=&quot;off&quot;不起作用解决方案

多数浏览器默认会缓存input的值,只有使用ctl+F5强制刷新的才可以清除缓存记录. 如果不想让浏览器缓存input的值,有2种方法: 方法一: 在不想使用缓存的input中添加 autocomplete="off"; eg: <input type="text" autocomplete="off" name="test" /> 方法二: 在 input 所在的form标签中添加 autocomplete=&q

解决chrome浏览器不支持本地ajax请求的问题(非在快捷方式上操作)

1.cmd进入dos环境 2.dos  下进入(chrome.exe所在目录) 3.运行命令chrome.exe --allow-file-access-from-files; 然后重启谷歌浏览器,就可以了.

微信浏览器不支持下载文件或应用解决方案--跳转到默认浏览器打开

在微信的内置浏览器(QQ内置浏览器也一样)里他屏蔽了下载链接,不管是app的下载链接,还是普通文件的链接都屏蔽了,这个问题有两个解决方案. 首先如果你是App下载链接就传到腾讯应用宝,但是这会给应用宝带来流量,如果二次下载折损率很高.其二就是提示引导用户在浏览器打开所以如果你没有将软件上传到应用宝里,或者你的文件不是APP,那么就需要第二种方法了,首先是需要判断用户的浏览器是否为微信内置浏览器,如果是弹出一个图层,提示用户点击右上角的三个点,然后点击在浏览器中打开即可.但是这种用户体验很差.经过

chrome浏览器font-size&lt;12px无效解决办法

当样式设定font-size<12px时,chrome浏览器里字体显示仍为12px:如font-size:11px; 但是chrome还是12px的大小,很不听话. 今天我就遇到了这样的问题?网站产品分类块字体在IE9和FF下显示不正常,比预想的要小,在IE7\IE8\360\chrome里显示正常,我查了些资料就是没找到原因,问了网友才得到解决办法. -webkit-text-size-adjust 1.当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px

探究为何rem在chrome浏览器上计算出错

最近在一个项目中,测试同学提了一个bug,说手机上有个页面的某些字体显示偏大.就像这样 我用chrome浏览器在pc上测试了一下,发现pc上也有这个问题,但是用其它浏览器打开这个页面就没有发现这个问题. 于是,上网百度了一下,发现原来是chrome浏览器的问题. 通过各种百度Google然后我总结了一下这个问题产生的原因: chrome浏览器目前支持的最小的字体大小为12px,而我在html根元素上设置font-size:62.5%,计算之后就是10px,1rem=10px. 由于我页面字体大小