&nbs p;
一、font关键字初探
我们使用 font 属性，多半用做缩写，例如：
宋体-simsun-14px
.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这里关键字又对应系统中的那些部位的字体呢？
二、font关键字密探
根据W3C 官方 维基的解释，各个关键字的含义如下：
caption 包含说明文字控件的字体(如按钮，下拉等)。 icon 标签图标使用的字体，影响 所有文件 以及文件夹名称字体。 menu 菜单使用的字体(如下拉菜单和菜单列表)。 message-box 消息框使用的字体。 small-caption 标记小控件使用的字体。 stat us-bar 窗体状态栏使用的字体。例如：
.menu { font: menu; } 需要注意的是，使用关键字作为属性值的时候，必须是独立的，不能添加 font-f ami ly 或者 font -s ize 之类，这和 font 属性缩写不是一个路子的。如果发生了混用，例如：
.menu { font: 14px menu; } 则，此时的 menu 是作为自定义的字体名称存在的，而不是表示系统的 menu 菜单字体。
根据Dre am weaver的显示，还有如下系统字体关键字（规范以外的）：
button , checkbox , checkbox-group , combo-box , desktop , dia LOG , document , field , hy PE rlink , list-menu , menu -i tem. men ub ar , outline -t ree , password , pop-up-menu , pull-down-menu , push-button , radio-button , radio-group , range , signature , tab , tooltip , window , workspace .
三、font关键字现形
眼见为实，有些事情，要亲手 经历 才能有感触。您可以狠狠地点击这里：CSS font关键字属性值表现测试demo （每个测试项点击会显示应用的 字号 字体和行高）
首先是window7系统下，Ch rom e, FireFox和IE浏览器下的效果截图：
在 ios9 系统下，C hr ome浏览器和Safari浏览器效果为：
从上面的实践结果可以看出：
规范文档里面提到的关键字所有浏览器都支持。根据MDN的显示，兼容性 应该 如下：| 缩写 | 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) | ? | ? | ? |
但是各个浏览器的具体支持有些 细节 差异。
补充于2017-03-26
大家会看到同一操作系统下，Chrome浏览器有3个关键字和Firefox，IE这两个浏览器表现不一致。我起初没在意，后来经过更改系统字体才发现，这3个关键字不是实时跟着操作系统走的（仅限于windows系统），也就是说，我通过一定的 手段 把我的操作系统的默认字体改掉，IE和Firefox浏览器是会跟着一起变的，而Chrome浏览器 caption ， icon ， message-box 还是固执于 原来 的那几个字体，就算重启也没有作用，感觉更像是实现上的问题。 & # 8211;补充end–
对于不同的操作系统，字体表现不一样，这个我们是预料之中的，毕竟使用系统字体，不同系统默认字体肯定是不一样的；然后字体大小也不一样。例如，window下Chrome caption 字体大小 16px ，而iOS下只有 13px . 因此，在实际使用时候，我们还需要在下面再设定下 font-size 大小来保证一致性。按照道理讲，我们直接这样设置就可以了：
ht ML { font: menu; font- Size: 16px; } 但是，实际上，IE8浏览器会莫名忽略这里的 font-size:16px ，因此，一般都是这么处理：
html { font: menu; } body { font-size: 16px; } 非规范标准的字体基本上浏览器都不支持，只有FireFox浏览器支持一部分，但是需要添加私有前缀 -moz- ，例如：
font: -moz-button;
因此，实际应用 价值 不大。 另外，webk IT 浏览器还支持其他关键字，例如： font:-webkit-body ，经测试， -webkit-body 无法识别 ， -webkit-control 可以识别。
四、font关键字的裨益价值与应用场景
扯了这么多，那font关键字值的价值如何？有没有合适的使用场景呢？有，且非常需要。
在很久以前，也就是IE6,IE7壮年的时候，平台设备有限，系统支持的中文字体也有限，我们基本上都是 宋体 到底。
但是，如今，对吧， 微软雅黑 ，思 源 黑体，以及iOS系统使用的什么黑体，手机And ROI d使用的默认字体之类，都比宋体好看，而后者中文字体要比 微软 雅黑更好看。
我们目前 不想 使用宋体，基本上就是使用微软雅黑字体：
.font { font-family: 'microsoft yah ei '; } 但是，我就遇到过这样子的需求，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; } 修改于2017-03-27 兼容IE8
html { font: menu; } body { font-size: 16px; }
html { font: small-caption; } body { font-size: 16px; }
html { font: status-bar; } body { font-size: 16px; } 就可以实现 window系统 下微软雅黑，其他系统使用默认字体的效果 各个浏览器都使用系统字体的效果了，例如，在我的windows 7系统下，页面就是微软雅黑；而 苹果电脑 上（虽然我安装了微软雅黑）则是 苹果 自己好看的字体显示。
补充于2017-03-26
最后，我要对 font 关键字属性值的用法做一个点评：
让网页的字体跟系统走，对于设计师而言，其实是一个比较冒险的做法，因为最终呈现的字体是不可控的。举个例子，某 女生 非常喜欢可爱风格，于是就把她的 电 脑主题变成了非常可爱的风格，菜单栏的字体全部变成那种很可爱的字体，此时， font:menu 所呈现的就不是“微软雅黑”，而是这个 用户定义 的“可爱字体”，这可能不是设计师想看到的，因为往往会跟自己的网页设计风格不一致。但是，我要转折，万一这是用户想看到的呢？既然用户把自己的主题设为该字体，那就说明这个用户对这个字体并不排斥，而是喜欢。当她浏览网页的时候，发现就你的网站呈现出了她喜欢那种字体，你说会不会给用户一种“你懂我的心”的感觉呢，对于用户而言，反而成了一个情感化的设计！
另外，让网页的字体跟系统走，还有一个更加长远的好处，随着软件的 不断 发展 ，我们的操作系统的默认中文字体一定是越来越好看，如果网页的 font-family 定死为某个字体，用户是无法及时享受到新系统新字体带来的愉悦的视觉感受的。举个例子，OS X的默认中文字体其实已经变过好多次了，例如你今天写了个页面，字体设置为很潮的“苹方”，过两年说不定会出来更好的名叫“梨方”字体，我打包票，绝对是不会跟进的，因为大多数的线上项目维护都不会管 font-family 这种边边角角的事情的，因此，就算很多年过去了，网站依然使用的是老字体。但是，如果使用的是 font 关键字属性值，完全不会有这样的问题，网站字体时时刻刻与时俱进。
五、本文已完结，此处纯吐槽
自从有了娃，效率就是差。就这篇鸡毛 文章 ，整个我三个晚上的时间，要是年轻时候，哗哗哗一个晚上就可以搞出来。这回家要先抱娃，没办法。来，给叔叔阿姨们问个好！
最近网站很多细节进行了 提升 ，不 知道 细心的你有没有注意到。 放弃 了对IE6的支持，正文字号变大了，使用了系统字体caption，版权申明更清晰不会和正文混在一起了，文章发布时间 访问量 等数据前置了，广告位在页面滚动足够高的时候会跟随，去除了一些不必要的分隔线，搜索变大变长了，侧边栏也增加了搜索，盘活整个内部，个人描述文字也微改了下。
之前也有细节 调整 ，例如，颜色提亮了一些，底部栏扁平化，右侧栏可以收起等。
很多小伙伴说我博客长得比较丑，其实是这样的，因为精力有限，如果追随流行趋势，势必过了几年就又要重新整个模子，太累心了，因此，走简洁传统之风，就算时代变化，也不至于有明显的过时之感，以不变应万变，小细节 一点 一点优化与提升，通过 数据验证 效果，这就是我 运营 自己博客的产品之道。
知道我为什么还没睡，在吐槽写没营养的文字吗？因为搞幺蛾子的，机房迁移，现在站点访问不了，文章没法保存发布……我心中大写的“服”！
翌日，一大早屁颠屁颠爬起来，居然还没恢复，心中的“服” transform scale 了2倍。
得，先去上班吧，别迟到了！
傍晚：花钱升级了下博客，访问量貌似hold不住了~
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS font关键字属性值的简单研究 全部内容，希望文章能够帮你解决 html5教程-CSS font关键字属性值的简单研究 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS font关键字属性值的简单研究的详细内容...