font关键字属性值的简单研究
分类:计算机知识

CSS font关键字属性值的简单研究

2016/01/27 · CSS · 1 评论 · font

原文出处: 张鑫旭   

一、font关键字初窥初探

我们使用font属性,多半用做缩写,例如:

CSS

.font { font: 14px simsun; }

1
.font { font: 14px simsun; }

其语法如下:

[ [ || || ]? [ / ]? ]

1
[ [  ||  ||  ]?  [ /  ]?  ]

||表示或,?为正则通用示意,表示0个或1个。仔细观察上面的语法,会发现,后面没有问号,也就是是必须的,不可省的。

换句话说,font缩写要想生效,字体大小和字体是两个必不可少的属性值,其他字重,字样以及行高都是可缺省的。background虽然也支持缩写,但是呢,其并没有需要2个属性值同时存在的限制。

但是呢,我估计绝大多数小伙伴都不知道,font属性还支持关键字值,如下语法示意:

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

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

如果你设置font属性为上面中的一个值,就等同于设置font为操作系统该部件对应的font,也就是说直接使用系统字体。咦,怎么有似曾相识的感觉,其实我之前有介绍过类似的,就是CSS color, background-color等颜色相关属性,也是同样可以直接使用系统颜色的,例如Highlight关键字就是控件选中时候的颜色,具体可参见此文:“CSS1-CSS3
颜色知识知多少?”。

图片 1

那font这里关键字又对应系统中的那些部位的字体呢?

字体系列

【1】5种通用字体系列:拥有相似外观的字体系列

  serif字体:字体成比例,且有上下短线(衬线字体),包括TimesGeorgiaNew century Schoolbook

  sans-serif字体:字体成比例,且没有上下短线(无衬线字体),包括HelveticaGenevaVerdanaArialUnivers

  Monospace字体:字体不成比例,等宽字体,包括CourierCourier NewAndale Mono

  Cursive字体:手写体,包括Zapf ChanceryAuthorComic Sans

  Fantasy字体:无法归类的字体,包括WesternWoodblockKlingon

【2】特定字体系列:具体的字体系列

font-family:"宋体";
font-family:"arial";

【3】默认字体系列

  chrome/opera:"宋体"

  firefox:"微软雅黑"

  safari/IE:Times,"宋体"

font-family:字体系列1,字体系列2 ……
//【注意】若浏览器识别第一个字体,则以第一个字体显示;如果不识别,则尝试下一个。    
font-family: arial,“宋体”,“微软雅黑”;
//【注意】若写英文字体,一定要把英文字体写在前面,英文字体会影响到英文、数字和标点符号。
font-family: Times, 'New Century Schoolbook','New York', serif;
//【注意】若字体名中有一个或多个空格,要添加引号

【4】中文字体

  对于中文字体来说,常见的是宋体和微软雅黑。宋体是衬线字体,而微软雅黑是无衬线字体。衬线字体常用于排版印刷,而无衬线字体则常用于网页中

  一般地,一行中有30-40个文字时,行高为1.5时,有较好的阅读体验。对于标题来说, 更好的样式是取消其加粗设置,并改变其颜色,增加页面的层次感

 

二、font关键字密探

根据W3C官方维基的解释,各个关键字的含义如下:

caption
包含说明文字控件的字体(如按钮,下拉等)。

icon
标签图标使用的字体。

menu
菜单使用的字体(如下拉菜单和菜单列表)。

message-box
弹框盒子里面使用的字体。

small-caption
标记小控件使用的字体。

status-bar
窗体状态栏使用的字体。

例如:

CSS

.caption { font: caption; }

1
.caption { font: caption; }

需要注意的是,使用关键字作为属性值的时候,必须是独立的,不能添加font-family或者font-size之类,这和缩写不是一个路子的如果你font使用关键字所谓缩写字体值,例如:

CSS

.font { font: 14px menu; }

1
.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.

字体加粗

【1】常用值

font-weight: normal(正常,默认)
font-weight: bold(加粗)

【2】所有值

  normal(正常)/bold(粗体)/bolder(更粗)/lighter(更细)

  100/200/300/400/500/600/700/800/900 (100为最细,900为最粗)

 

三、font关键字现形

眼见为实,有些事情,要亲手经历才能有感触。您可以狠狠地点击这里:CSS font关键字属性值表现测试demo (每个测试项点击会显示应用的字号字体和行高)

首先是window7系统下,Chrome, FireFox和IE浏览器下的效果截图:

图片 2
图片 3
图片 4

在iOS9系统下,Chrome浏览器和Safari浏览器效果为:

图片 5
图片 6

从上面的实践结果可以看出:

  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-,例如:

CSS

font: -moz-button;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d236da84596842148-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d236da84596842148-1" class="crayon-line">
font: -moz-button;
</div>
</div></td>
</tr>
</tbody>
</table>

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

字体大小

【1】绝对字体大小

  xx-small/x-small/small/medium/large/x-large/xx-large

【2】相对字体大小

  smaller/larger

【3】em/%

  1em = 100%

【4】默认字体大小

  chrome/firefox/opera/IE/safari:16px

【5】最小字体大小

  chrome:12px

  opera:9px

  safari/IE/firefox:无

font-size

  font-size字体大小设置的是字体中字符em框的高度,实际的字符字形通常比字符em框要矮,与字体类型有关

  值: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage> | inherit

  初始值: medium

  应用于: 所有元素

  继承性: 有

  百分数: 相对于父元素的字体大小font-size

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

扯了这么多,那font关键字值的价值如何?有没有合适的使用场景呢?有,且非常需要。

在很久以前,也就是IE6,IE7壮年的时候,平台设备有限,系统支持的中文字体也有限,我们基本上都是宋体到底。

但是,如今,对吧,微软雅黑,思源黑体,以及iOS系统使用的什么黑体,手机Android使用的默认字体之类,都比宋体好看,而后者中文字体要比微软雅黑更好看。

我们目前不想使用宋体,基本上就是使用微软雅黑字体:

CSS

.font { font-family: 'microsoft yahei'; }

1
.font { font-family: 'microsoft yahei'; }

但是,我就遇到过这样子的需求,iOS系统下不要使用微软雅黑字体,不好看,没有自带的中文英文字体好看,希望iOS系统下不要使用微软雅黑字体。怎么整?JS浏览器判断,CSS hack搞起?

不要这么烦了!10多年前浏览器就已经支持了这种功能,就是font值直接是系统关键字。

对照我们上面测试的最终效果图们,我们可以(三选一即可):

CSS

body { font: menu; font-size: 16px; }

1
2
3
4
body {
    font: menu;
    font-size: 16px;
}

CSS

body { font: small-caption; font-size: 16px; }

1
2
3
4
body {
    font: small-caption;
    font-size: 16px;
}

CSS

body { font: status-bar; font-size: 16px; }

1
2
3
4
body {
    font: status-bar;
    font-size: 16px;
}

就可以实现window系统下微软雅黑,其他系统使用默认字体的效果。OK,这些默认的中英文字体要比浏览器内置的字体好看很多,尤其英文字体这一块,例如IE浏览器默认是衬线字体,不好看。使用font关键字则是系统界面使用的无衬线字体,就舒服多了。

1 赞 1 收藏 1 评论

图片 7

字体风格

font-style: normal(默认)
font-style: italic(斜体)
font-style: oblique(倾斜)

 

字体变形

font-variant:normal(默认)
font-variant:small-caps(小型大写字母)

 

本文由威尼斯手机娱乐官网发布于计算机知识,转载请注明出处:font关键字属性值的简单研究

上一篇:威尼斯手机娱乐官网:如何学习页面重构,Web重 下一篇:没有了
猜你喜欢
热门排行
精彩图文