澳门在线威尼斯官方 > 威尼斯澳门在线 > font关键字属性值的简单研究

原标题:font关键字属性值的简单研究

浏览次数:143 时间:2019-11-24

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】相对字体大小

  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搞起?

不要这么烦了!10N年前浏览器就已经援助了这种效应,正是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,那些暗中同意的中斯洛伐克语字体要比浏览器内置的书体美观相当多,特别斯洛伐克(Slovak卡塔尔国语字体这一块,比如IE浏览器暗中认可是衬线字体,不佳看。使用font关键字则是系统分界面使用的无衬线字体,就舒畅多了。

1 赞 1 收藏 1 评论

图片 2

字种类列

【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-叁十多个文字时,行高为1.5时,有较好的读书体验。对于标题来讲, 越来越好的样式是吊销其加粗设置,并改善其颜色,扩充页面包车型地铁档案的次序感

 

二、font关键字密探

根据W3C官方维基的表明,各样显要字的意思如下:

caption
含有表明文字控件的书体(如按键,下拉等)。

icon
标签Logo使用的字体。

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.

行高

line-height: normal(默认)
line-height: 具体值

  关于行高的详细消息移步至此 

 

三、font关键字现形

千闻比不上一见,某一件事情,要亲手经验技能有感动。您能够狠狠地方击这里:CSS font关键字属性值表现测验demo (每一个测量试验项点击会显示应用的字号字体和行高卡塔尔

率先是window7系统下,Chrome, Fire福克斯和IE浏览器下的法力截图:

图片 3
图片 4
图片 5

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

图片 6
图片 7

从地点的实践结果能够看来:

  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>

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

字体

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

    [注意]对于font-size,百分数针锋相投于父成分来总结;对于line-height,百分数相对于成分的font-size来计量

 

字体变形

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

 

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:font关键字属性值的简单研究

关键词:

上一篇:没有了

下一篇:没有了