转载文章(若愚)如何将字体设置到12px以下

说明:小于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 版本。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容