如何设置、检测浏览器所支持的最小字体大小？

转载设置浏览器字体大小

说明：小于12px字体的设计，我们很少接触到，因为pc端那么大的面积，没有必要设计那么小。要是接触到这种设计，一年前的我往往会说：这个设计太搞笑了，pc端居然设计出来小于12培训的字体，有没有做过设计啊？但是近期我们项目有一个改动，设计涉及到了9号字体，我看了一下，这次我就乖乖的去写一个能兼容的小于12px的了，因为设计成这样确实是有需求的。

我们都知道：Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px，英文版则没有限制，主要是因为chrome认为汉字小于12px就会增加识别难度，尤其是我们页面常用的中文字体宋体和微软雅黑，这时候就需要取消浏览器的自动调整功能了。

下面以我的项目中用到的9px为例进行分析

一般解决方案是禁止webkit浏览器配置调整网页的字体大小。如下CSS定义方式： .relievestyle{ -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也不支持（fontsize：9px）的属性，我们可以通过自己手动设置了：工具->首选项->高级->字体->最小字体大小（像素）。

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

.chrome_adjust {
font-size: 9px;
-webkit-transform: scale(0.75);
}

12×0.75=9，对于其它浏览器来说，12px以下的字号都是可以识别的，这里仅需要对于Chrome浏览器进行缩放（测试对opera也是有用的）。可是如何分辨是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);这个属性。

.browser_adjust {
font-size: 9px;
-webkit-transform: scale(0.75); //居中缩放 -o-transform: scale(1); //针对能识别-webkit的opera browser设置
}

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

如果需要测试，可以参考移动端最小字体限制测试

如何设置、检测浏览器所支持的最小字体大小？相关推荐

[js] 用js写一个方法检测浏览器是否支持css3的属性
[js] 用js写一个方法检测浏览器是否支持css3的属性 var div = document.createElement('div'); console.log(div.style.transit ...
WebSocket API使用篇检测浏览器是否支持WebSocket(4)
WebSocket API是下一代客户端-服务器的异步通信方法.前面有三篇文章已经对WebSocket有了一些介绍,这里我总结了一下.我在使用WebSockets API过程中遇到的问题. 1.检测浏 ...
如何检测浏览器是否支持HTML5？
HTML5新特性: 用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素,比如 article.footer.header.n ...
检测浏览器是否支持WMP(Windows Media Player)
检测浏览器是否支持WMP(Windows Media Player) 来源:http://www.enjoyphp.com/2010/front/javascript/wmp-installe/ By ...
HTML5使用Geoloacation API检测浏览器的支持性
HTML5使用Geoloacation API检测浏览器的支持性在调用HTML5 Deolocation API函数前,需要确保浏览器支持此功能.当浏览器不支持时,可以提供一些替代文本,以提示用户升 ...
中文版Chrome浏览器不支持12px以下字体的解决方案
中文版Chrome浏览器不支持12px以下字体的解决方案 Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px,英文版则没有限制,主要是因为chrome认为汉字小于12px就会增 ...
clion调整字体打下奥_Clion、IEDA、pycharm的一些简单设置步骤（设置中文菜单、输出中文、字体大小、背景颜色主题）...
Clion.IEDA.pycharm的设置及界面是一模一样的,下面我将按照Clion举例,但是在IEDA和pycharm是同样适用,按照方法设置即可一.中文界面 clion.ieda.pycharm ...
浏览器html5视频抓取,检测浏览器是否支持html5视频的代码
复制代码代码如下: 函数checkVideo(){if(!!document.createElement('video').canPlayType){varvidTest=document.crea ...
（一）检测浏览器是否支持websocket
二.创建一个支持 WebSocket 的服务 1.从pywebsocket下载mod_pywebsocket(亲git clone),地址在这里啦~,这里请注意,mod_pywebsocket需要py ...

如何设置、检测浏览器所支持的最小字体大小？

如何设置、检测浏览器所支持的最小字体大小？相关推荐

最新文章

热门文章