-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
68 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
说明:小于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 | ||
版本。 | ||
|