CSSフォントキーワードattribute_html/css_WEB-ITnoseの価値についての簡単な調査

1. フォント キーワードの概要

フォント属性は、主に略語として使用します。次に例を示します。

.font { font: 14px simsun; }

構文は次のとおりです。

[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]

|| は or を意味し、0 または 1 を示します。上記の構文を注意深く観察すると、<'font-size'> と <'font-family'> の後に疑問符がないことがわかります。これは、それらが必要で省略できないことを意味します。

つまり、フォントの省略形を有効にするには、フォント サイズとフォントが 2 つの必須の属性値になります。その他のフォントの太さ、フォント、行の高さはデフォルトに設定できます。バックグラウンドでは略語もサポートされていますが、2 つの属性値が同時に存在する必要があるという制限はありません。

ただし、ほとんどの友人は、次の構文に示すように、フォント属性がキーワード値もサポートしていることを知らないと思います。

font:caption | icon | menu | message-box | small-caption | status-bar

フォント属性を上記に設定した場合値は、フォントをオペレーティング システムのコンポーネントに対応するフォントに設定すること、つまりシステム フォントを直接使用することと同等です。ねえ、なぜそんなに馴染みがあるように感じられるのでしょうか? 実際、私は以前に同様のプロパティ、つまり CSS color、background-color、およびその他の色関連のプロパティを紹介しました。たとえば、Highlight キーワードは color です。具体的には、「

CSS1-CSS3

色についてどのくらい知っていますか?

」を参照してください。

では、キーワードのフォントはシステムのそれらの部分のフォントに対応するのでしょうか?

2. フォント キーワード スパイ

W3C 公式 Wiki によると、各キーワードの意味は次のとおりです。

キャプションには、説明的なテキスト コントロール (ボタン、ドロップなど) のフォントが含まれます。ダウンなど）。 icon ラベルアイコンに使用されるフォント。 menu メニュー (ドロップダウン メニューやメニュー リストなど) に使用されるフォント。 message-box ポップアップ ボックスで使用されるフォント。 small-caption 小さなコントロールのラベルに使用されるフォント。 status-bar フォームのステータス バーに使用されるフォント。

例:

.caption { font: caption; }

キーワードを属性値として使用する場合、それらは独立している必要があり、font-family や font-size を追加できないことに注意してください。これは省略形と同じではありません。ちなみに、フォントがキーワードのいわゆる省略フォント値を使用している場合、たとえば次のようになります。

.font { font: 14px menu; }

この時点のメニューは、システム メニューのフォントを表すのではなく、カスタム フォント名として存在します。 。

Dreamweaver の表示によれば、次のシステム フォント キーワード (仕様以外) もあります:

button 、 checkbox 、 checkbox-group 、 combo-box 、desktop 、ダイアログ、ドキュメント、フィールド、ハイパーリンク、リストメニュー、メニュー項目、メニューバー、アウトラインツリー、パスワード、ポップアップメニュー、プルダウンメニュー、プッシュボタン、ラジオボタン、ラジオグループ、範囲、署名、タブ、ツールチップ、ウィンドウ、ワークスペース。

3. フォントのキーワードが表示されます。

百聞は一見に如かず、実際に体験することでしか感じられないものもあります。ここをクリックできます: CSS フォント キーワード属性値のパフォーマンス テスト デモ (各テスト項目をクリックすると、アプリケーションのフォント サイズ、フォント、行の高さが表示されます)

まず、Windows 7 システムで Chrome 、FireFox および IE ブラウザーでの効果のスクリーンショット:

iOS9 システムでは、Chrome ブラウザーと Safari ブラウザーの効果は次のとおりです:

上記の実践から結果がわかります:

1. すべてのブラウザは、仕様書に記載されているキーワードをサポートしています。 MDN によると、互換性は次のようになります:

   特征	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 大小来保证一致性。

2. 非规范标准的字体基本上浏览器都不支持，只有FireFox浏览器支持一部分，但是需要添加私有前缀 -moz-

   ，例如：

   font: -moz-button;

   因此，实际应用价值不大。

四、font关键字的裨益价值与应用场景

扯了这么多，那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

（本篇完）