时间:2021-07-01 10:21:17 帮助过:27人阅读
我们使用 font 属性,多半用做缩写,例如:
.font { font: 14px simsun; }
其语法如下:
[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]
|| 表示或, ? 为正则通用示意,表示 0 个或 1 个。仔细观察上面的语法,会发现, <'font-size'> 和 <'font-family'> 后面没有问号,也就是是必须的,不可省的。
换句话说, font 缩写要想生效,字体大小和字体是两个必不可少的属性值,其他字重,字样以及行高都是可缺省的。 background 虽然也支持缩写,但是呢,其并没有需要2个属性值同时存在的限制。
但是呢,我估计绝大多数小伙伴都不知道, font 属性还支持关键字值,如下语法示意:
font:caption | icon | menu | message-box | small-caption | status-bar
如果你设置 font 属性为上面中的一个值,就等同于设置 font 为操作系统该部件对应的 font ,也就是说直接使用系统字体。咦,怎么有似曾相识的感觉,其实我之前有介绍过类似的,就是CSS color , background-color 等颜色相关属性,也是同样可以直接使用系统颜色的,例如 Highlight 关键字就是控件选中时候的颜色,具体可参见此文:“
CSS1-CSS3
颜色知识知多少?
”。
那font这里关键字又对应系统中的那些部位的字体呢?
根据 W3C官方维基 的解释,各个关键字的含义如下:
caption 包含说明文字控件的字体(如按钮,下拉等)。 icon 标签图标使用的字体。 menu 菜单使用的字体(如下拉菜单和菜单列表)。 message-box 弹框盒子里面使用的字体。 small-caption 标记小控件使用的字体。 status-bar 窗体状态栏使用的字体。例如:
.caption { font: caption; }
需要注意的是,使用关键字作为属性值的时候,必须是独立的,不能添加 font-family 或者 font-size 之类,这和缩写不是一个路子的如果你font使用关键字所谓缩写字体值,例如:
.font { font: 14px menu; }
此时的 menu 是作为自定义的字体名称存在的,而不是表示系统的menu菜单字体。
根据Dreamweaver的显示,还有如下系统字体关键字(规范以外的):
button , checkbox , checkbox-group , combo-box , desktop , dialog , document , field , hyperlink , list-menu , menu-item. menubar , outline-tree , password , pop-up-menu , pull-down-menu , push-button , radio-button , radio-group , range , signature , tab , tooltip , window , workspace .
眼见为实,有些事情,要亲手经历才能有感触。您可以狠狠地点击这里: CSS font关键字属性值表现测试demo (每个测试项点击会显示应用的字号字体和行高)
首先是window7系统下,Chrome, FireFox和IE浏览器下的效果截图:
在iOS9系统下,Chrome浏览器和Safari浏览器效果为:
从上面的实践结果可以看出:
特征 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
缩写 | 1.0 | 1.0 (1.0) | 3.0 | 3.5 | 1.0 (85) |
字体字体 | 1.0 | 1.0 (1.0) | 4.0 | 6.0 | 1.0 (85) |
支持 font-stretch 值 | (Yes) | 43 (43) | ? | ? | ? |
但是各个浏览器的具体支持有些细节差异。首先字体不一样,这个我们是预料之中的,毕竟使用系统字体,不同系统默认字体不一样;然后不同关键字在不同浏览器不同系统下的字体大小不一样。例如,window下Chrome caption 字体大小 16px ,而iOS下只有 13px . 因此,在实际使用时候,我们还需要在下面再设定下 font-size 大小来保证一致性。
,例如:
font: -moz-button;
因此,实际应用价值不大。
扯了这么多,那font关键字值的价值如何?有没有合适的使用场景呢?有,且非常需要。
在很久以前,也就是IE6,IE7壮年的时候,平台设备有限,系统支持的中文字体也有限,我们基本上都是宋体到底。
但是,如今,对吧,微软雅黑,思源黑体,以及iOS系统使用的什么黑体,手机Android使用的默认字体之类,都比宋体好看,而后者中文字体要比微软雅黑更好看。
我们目前不想使用宋体,基本上就是使用微软雅黑字体:
.font { font-family: 'microsoft yahei'; }
但是,我就遇到过这样子的需求,iOS系统下不要使用微软雅黑字体,不好看,没有自带的中文英文字体好看,希望iOS系统下不要使用微软雅黑字体。怎么整?JS浏览器判断,CSS hack搞起?
不要这么烦了!10多年前浏览器就已经支持了这种功能,就是 font 值直接是系统关键字。
对照我们上面测试的最终效果图们,我们可以(三选一即可):
body { font: menu; font-size: 16px;}
body { font: small-caption; font-size: 16px;}
body { font: status-bar; font-size: 16px;}
就可以实现window系统下微软雅黑,其他系统使用默认字体的效果。OK,这些默认的中英文字体要比浏览器内置的字体好看很多,尤其英文字体这一块,例如IE浏览器默认是衬线字体,不好看。使用font关键字则是系统界面使用的无衬线字体,就舒服多了。
自从有了娃,效率就是差。就这篇鸡毛文章,整个我三个晚上的时间,要是年轻时候,哗哗哗一个晚上就可以搞出来。这回家要先抱娃,没办法。来,给叔叔阿姨们问个好!
最近网站很多细节进行了提升,不知道细心的你有没有注意到。放弃了对IE6的支持,正文字号变大了,使用了系统字体caption,版权申明更清晰不会和正文混在一起了,文章发布时间访问量等数据前置了,广告位在页面滚动足够高的时候会跟随,去除了一些不必要的分隔线,搜索变大变长了,侧边栏也增加了搜索,盘活整个内部,个人描述文字也微改了下。
之前也有细节调整,例如,颜色提亮了一些,底部栏扁平化,右侧栏可以收起等。
很多小伙伴说我博客长得比较丑,其实是这样的,因为精力有限,如果追随流行趋势,势必过了几年就又要重新整个模子,太累心了,因此,走简洁传统之风,就算时代变化,也不至于有明显的过时之感,以不变应万变,小细节一点一点优化与提升,通过数据验证效果,这就是我运营自己博客的产品之道。
知道我为什么还没睡,在吐槽写没营养的文字吗?因为搞幺蛾子的,机房迁移,现在站点访问不了,文章没法保存发布……我心中大写的“服”!
翌日,一大早屁颠屁颠爬起来,居然还没恢复,心中的“服” transform scale 了2倍。
得,先去上班吧,别迟到了!
傍晚:花钱升级了下博客,访问量貌似hold不住了~
本文为原创文章,包含脚本行为,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址: http://www.zhangxinxu.com/wordpress/?p=5214
(本篇完)