1、文本大小  {font-size,果直接利用默认样式的页

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-31个文字时,行高为1.5时,有较好的翻阅体验。对于标题来讲, 更加好的体制是撤废其加粗设置,并改造其颜色,扩张页面包车型地铁档次感

 

有关文本的css注解

雅淡设置网页文字字体[原创],网页文字字体原创

微软XP在本国实际上是在“家喻户晓”,即便微软已经公布XP“死期”已到,但国内依然大是大把XP客商,这些从IE6在境内分占的额数为22.2%能够见到。

 

图片 2

 

详见查看:

XP已经为我们服务10多年了,TA已经很老了,微软也公布终止扶助XP了,那本是件善事,但本国各样厂随后发表继续为XP客户“保架保护航行”提供支撑,那不得不说是个好事,但对于每一天与IE6兼容性打交道的WEB前端们来说,还真不是件好事!

 

那招致本国超级多汉语网址暗中同意字体还要构思“石籀文”优先,然而“行草”在Windows Vista+地方大大比不上“微软雅黑”的从容锐利,请看下图:

图片 3

那干什么不事前“微软雅黑”呢?生龙活虎段代码的事啊。

1 font-family'微软雅黑',’宋体’...

这一句不就减轻难题了?伊始自己也这么感到:Vista+客户暗许自带“微软雅黑”字体就拜会到越来越好的网页文字渲染效果,XP客商暗许自带“草书”自然会看出金鼎文版网页。看起来挺完美的,好啊,来看张相比较图:

图片 4

XP下,侧面是草书,左边是微软雅黑。

那下反过来了,XP下石籀文突显效果比微软雅黑锐利均匀,许多了,别的浏览器展现效果也比相当差。可以预知上边方案分明已经失利。你照旧批驳,那是你测量检验用的,XP暗中同意是未有微软雅黑的,可以忽视。是的,但国内超多用的盗版,网络查了下各样商家XP Ghost版本已经好心的帮顾客装上了微软雅黑,当然必须要置于了她们商家赢利的软件、网站导航等,还应该有点设计等须要本身安装上的,所以此路真的不通。

 

那依旧暗中认可燕体吧,坐等XP完全清除那天。

不用,我们来深入分析一下,XP用的最多的应该是暗中同意IE6,最大也只扶植到IE8,那就好办了,特意针对IE8至IE6用hack特意写个样式:

1 font-familysans-serif;

就好了,至于XP下行使此外浏览器的,就先不思索了,能团结选用浏览器的人应该也能换个越来越好的体系,是啊。

上边看下“font-family: sans-serif;”下的展现

XP系统IE6显示:

图片 5

哇,十分的赞,何况能够看见侧边中塞尔维亚语混排情状下,克罗地亚共和国语显示的一发卓绝啊。(侧面固定字体的中国和英国混排葡萄牙语显示有些难看卡塔尔

 

Win8系统IE11显示:

图片 6

反正显示同风流倜傥,以连串暗中认可字体微软雅黑显示。

 

Win8系统opera下:

图片 7

以此可惜,左侧是以私下认可黑体显示的,这种状态会生出在任何第三方浏览器上,如:FirefoxChrome等。

 

 

OS X Mavericks系统Safari 7.0下:

图片 8

展现也不行完美,塞尔维亚语略有差别,然而都十分的厉害。

 

想在线查看种种系统和配备突显示截图可访谈微软官方出品(满含种种OS下,各个手提式有线电话机、pad设备下显得截图卡塔尔国:

 

请见谅笔者的畸形吧,总体上看:
地点方法依旧相当不足康健的,在风行Windows系统上第三方浏览器照旧会以燕书显示(那有赖于各种浏览器暗中同意样式的书体定义卡塔 尔(英语:State of Qatar),所以,最后结果是特别不引入应用。

但无意中发觉只要存在中法语混排,倒是能够行使

  font-familysans-serif

那相对是个准确的精选。

 

浏览器暗中认可的体制往往在分歧的浏览器、差别的言语版本以至差异的系统版本都有两样的设置,那就产生假设直接动用默许样式的页面在逐风度翩翩浏览器下显得特别不相似,于是就有了近乎YUI的reset等等用来尽或者重写浏览器的暗中同意设置保证各样浏览器样式意气风发致性的做法。

二、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.

字体加粗

【1】常用值

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

【2】所有值

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

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

 

1、文本大小  {font-size:value;}

怎设置网页上的书体

张开IE—工具栏——查看——文字大小(最大,相当大,中……卡塔尔国设置好后重开IE就能够。

抑或建个记事本,输入如下内容:
body,td,tr,table,form,option,select,main,input,textarea,p
{
font-size:12px;
}

将它保存为css格式的样书文件,在这之中的“font-size”后的数值可活动校正,数值越大展现的字体就越大。
然后在ie里,在internet选项,扶持成效,勾选“不要用网页的字体大小”,相同的时直接受“使用样式表编排文书档案格式”,单击浏览,接纳你刚建的css文件,明显,就能够了  

拿字体来说,各样浏览器暗中同意的书体体系、字体大小和字体行高都不周围,比如IE8的普通话版在Windows XP下显示网页时暗许字体是黑体,而英文版肯定不会如此。所以我们须要统意气风发安装暗许的书体样式,以便实现均等的显得效果来确认保障陈设的生龙活虎致性和加强开销效用。

三、font关键字现形

有名不及一见,某些职业,要亲手资历手艺有感触。您能够狠狠地点击这里:CSS font关键字属性值展现测验demo (各个测验项点击会呈现采取的字号字体和行高卡塔尔

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

图片 9
图片 10
图片 11

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

图片 12
图片 13

从上边的进行结果能够见到:

  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

说明:
1卡塔 尔(阿拉伯语:قطر‎ 属性值为数值型时,必需给属性值加单位,属性值为0时除此之外。
2卡塔尔单位还足以是pt, 9pt=12px;
3卡塔 尔(英语:State of Qatar)为了减削系统间的字体呈现差别,IE Netscape Mozilla的浏览器制作商于1998年举办会议,协作明确16px/ppi为规范

网页字体设置

主意1、张开IE—工具栏——查看——文字大小(最大,极大,中……卡塔 尔(英语:State of Qatar)设置好后重开IE就能够。
方法2、建个记事本,输入如下内容:
body,td,tr,table,form,option,select,main,input,textarea,p
{
font-size:12px;
}

将它保存为css格式的范本文件,当中的“font-size”后的数值可机关修正,数值越大展现的书体就越大。
接下来在ie里,在internet选项,支持作用,勾选“不要用网页的字体大小”,同不时间采纳“使用样式表编排文档格式”,单击浏览,选择你刚建的css文件,鲜明,就行了  

微软XP在境内实际是在大名鼎鼎,就算微软少年老成度宣布XP死期已到,但国内依旧大是大把XP用...

体制优先级

日常性客户观看的页面的样式会受到三层调节:

  • 先是层是浏览器的暗中同意样式
  • 第二层是网页定义样式
  • 其三层是客户自定义样式

和CSS相仿,后边的前期级 高于前边的,相当于说网页定义样式可以覆盖浏览器的暗许样式,而顾客自定义样式优先级最高。可是,当有 !important 时,网页样式能够覆盖顾客自定义样式。客商!important > 网页!important > 顾客 > 网页 > 浏览器暗中认可

四、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 评论

图片 14

字体风格

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

 

字体大小暗中认可值,即1em.私下认可意况下,1em=16px,0.75em=12px;

字体:arial

大家页面包车型客车多方内容字符都以中文,无可置疑近年来截至在网页上最常用也是最通用的来得汉语的书体是草书,然则小篆在呈现波兰语、数字和斯洛伐克语符号时过度不好,比方©字符,所以大家经常期待通过CSS来得以完结用越来越好的书体样式来展现它们,然后用燕体来突显普通话和国文符号。之所以选择arial是因为:

  • Windows和Mac都预装了那款字体,应该是应用最普及的网页字体了。它的机要挑衅者 tahomahelvetica就平素不及此幸运了。
  • 视觉设计的职业职员大概会以为在Windows中使用tahoma、在Mac中使用helvetica更好,比如Tmall的暗中认可字体样式是 ` font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif;

    这是一个很不错的选择,但是你也会发现Google、YAHOO、Youtube、Bing甚至[MSN的新版](http://www.msn.com/preview.aspx)都使用 arial 作为第一默认字体。所以从美观和可读性上来讲 arial `应该是完全能够担任的。

  • 诚如景况下设置font-family都会在结尾设置通用字体族以保障其安全性,比方Google的设置为 font-family:arial,sans-serif;,不过起码在非汉语版的Win7下当编码是GBK时,IE8会因 sans-serif来渲染草书,引致字体现身变形,那就是为何天猫供给在 sans-serif前增进金鼎文而Google无需那样做的来头。
  • 因为汉语字体的取舍那么些简单,所以如今具备的主流浏览器都安装使用黑体来呈现汉语。Baidu的首页和探寻结果页使用 font-family:arial;能够从侧边证实那样做的安全性。大概有人注意到Firefox中国版暗中认可彰显的汉语字体是微软雅黑,那是因为谋智网络自由修正了客商自定义样式,不允许网页的体裁覆盖浏览器设置的样式。也是出于相符的意况,大家要弹性设计网页特别关键。

动用韩语字体作为第后生可畏暗许字心得招致的标题之生龙活虎正是中葡萄牙共和国(República Portuguesa卡塔 尔(英语:State of Qatar)语以至符号混排时的对齐难题、通过设置行高和hasLayout能消除绝半数以上气象,不过都不会很圆满,倘使把字体制修正成“黑体”能深透的清除难题。很驾驭,这几个标题只现出在IE上。所以,假诺你的网址相当少使用西班牙语、数字和斯拉维尼亚语符号,那么直接设置 {font-family:5b8b4f53;}也是很有理的选料。

字体变形

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

 

4)使用相对化大小关键字
xx-small   =9px
 x-small     =11px
 small         =13px

大小:12px

  • 12px是大篆能展现的顶点,即便微软雅黑能显得越来越小的字体,但当下的应用场境尚未成熟。由于隶书基本上是眼前来得中文唯后生可畏的通用Web字体,所以12px产生最常用的字体大小。我们本来能够遵照付加物的供给来改进那一个私下认可值。
  • 无须思索基于字体大小(em卡塔尔国的统筹。
  • 在Chrome3.0之后的中文版中,字体大小最小值是12px,举例您设置最小字体为10px,最后也改成12px。

行高

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

  关于行高的详细音讯移步至此 

 

medium     =16px
 large         =19px
 x-large      =23px
 xx-large    =27px

行高:1.5倍

  • 那是三个经验值,差别的制品对那几个值要求大概不相同,但大家平时会安装最常用的为暗中认可值。譬如YUI的font中是 font:13px/1.231 arial,helvetica,clean,sans-serif;即字体大小私下认可值是13px,行高是13*1.231=16.003px,暗中同意的行高是暗中认可字体的1.231倍。对于华语来讲,常用的字体大小12px、14px、16px、18px等偶数大小,在IE6和IE7设置其行高也为偶数能缓和一些特种情况下的书体对其难题。
  • 在IE6和IE7中,行高值必需超过字体的2px能力保险字体的意气风发体化显示或当其视作链接时能立见成效呈现下划线。
  • 设置 line-height时,留意不要选取单位(满含%在内卡塔 尔(英语:State of Qatar),因为子节点会继承经过运算后的line-height值,所以当使用单位后浏览器会把 line-height测算成第叁次定义的相对值,而不会趁着字体大小的变化而变化,而无单位的数值表示是所在容器的 font-size的倍数,所以设置为无单位的数值是精品选项。
  • 深入CSS 行高可怜有利领悟 line-height,值得生机勃勃读。

字体

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

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

 

2、文本颜色:{color:#colorValue;} 

品质和频率

  • 大许多阳台都有 arial,减弱浏览器的查找时间。
  • 代码最少,书写方便。 arial大约是名字最短的书体了,能够节省CSS的尺寸。
  • 具有的字母都小写,这两天Google就是这么做的,好处是不只能够编写制定更加快也能升迁Gzip压缩的频率。
  • 华语最棒用unicode表示,比如利用石籀文是 {font-family:5b8b4f53;},使用微软雅黑是 {font-family:5fae8f6f96c59ed1;},那样的利润是防止编码难题,同期能得到全数的主流浏览器的支撑。
  • 行使科学的字体种类写法,制止选拔引号,那样能够降低CSS的尺寸。汉语字体能够按上一条办法来编排。

关键字

  CSS标准定义了6个种类字体关键字:

  caption: 由标题控件使用的字体样式,如按钮和下拉控件

  icon: 系统图标所用的字体样式,如文件夹和文件图标

  menu: 下拉菜单和菜单列表中文本使用的字体样式

  message-box: 对话框中文本使用的字体样式

  small-caption: 由标题小控件的标签使用的字体样式

  status-bar: 窗口状态条中文本使用的字体样式

颜色值的缩写:

未来

  • 通过对中斯拉维尼亚语及符号混排的测量试验, 我意识微软雅黑其实展现相当不错,包括日语数字和法文字符以至在IE6和IE7的浮现效果上,但唯黄金年代的可惜是在XP下生龙活虎旦设置了微软雅黑字体的客商未有打开“使用显示器字体的边缘平滑”选项的话,在firefox、Safari和Opera、非常是IE6下会卓殊模糊难以辨认。针对这一个难点如今并从未很好的 应用方案,所以只有等到IE6使用比率一点都十分的小的时候才可能正式的施用它。或然必要到2016年,XP死掉的时候。
  • 即使很已经有了@font-face,可是浏览器的支撑、网速和小购买发卖难题,招致它少之又少被使用。近年来关于字体的好音讯是Firefox3.6将支持Web Open Font Forma。关于Web字体以后的连带音信能够看Web 字体的前景、至于 Web 字体:现状与前途和再谈 Web 字体的现状与以后。

原稿地址: 暗中同意Web字体样式 @ 随网之舞

有乐趣的相恋的人还是能看一下另意气风发篇针对该文进行填补的《再谈 Web 私下认可字体》

font-face

@font-face {
    font-family: 自定义名称;
    src: url(../font/test.eot);
    src: url(../font/test.eot?#iefix) format("embedded-opentype"),
         url(../font/test.woff) format("woff"), 
         url(../font/test.ttf) format("truetype"),
         url(../font/test.svg#jq) format("svg");
}
//EOT:IE专用;WOFF:标准;TTF:最常见(safari/android/ios);SVG:图形格式(IE和firefox不支持)

三种调用字体的格局

  【1】html(&#x + 小Logo对应的unicode编码)

div{
    font-family: 自定义名称;
    -webkit-font-smoothing:antialiased;//字体抗锯齿、光滑度属性
    -mox-osx-font-smoothing: grayscale;//字体抗锯齿、光滑度属性
}
<div>&#xf048</div>

  【2】css( + 小Logo对应的unicode编码)(不宽容IE7-浏览器)

div{
    font-family: 自定义名称;
    -webkit-font-smoothing:antialiased;//字体抗锯齿、光滑度属性
    -mox-osx-font-smoothing: grayscale;//字体抗锯齿、光滑度属性
}
div:before{
    content: "f048";
}
<div></div>

【实例】

  上面以二个实例来注解什么运用字体Logo,最后的功效如下

  日常地,使用国内的iconfont网站来索求必要的书体Logo,如晴、阴、雨、雪Logo,将其新建为三个项目,并将品种文件下载到本地。下载的文本中蕴含了要求的字体文件及运用模范

图片 15

  最后代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
@font-face {
  font-family: 'iconfont';  
  src: url('font/iconfont.eot');
  src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
  url('font/iconfont.woff') format('woff'),
  url('font/iconfont.ttf') format('truetype'),
  url('font/iconfont.svg#iconfont') format('svg');
}
.weatherBox input{
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}
.weatherBox label{
    font-family: 'iconfont';
    -webkit-font-smoothing:antialiased;//字体抗锯齿、光滑度属性
    -mox-osx-font-smoothing: grayscale;//字体抗锯齿、光滑度属性
}
.weatherBox label + label{
    margin-left:10px;
}
.weatherBox label:hover{
    color: lightblue;
}
.icon-sunny:before { content: "e601"; }
.icon-snowy:before { content: "e603"; }
.icon-cloudy:before { content: "e605"; }
.icon-rainy:before { content: "e606"; }
</style>    
</head>
<body>
<div class="weatherBox">
    <label class="icon-sunny">
        <input type="radio" name="weather" id="sunny">晴
    </label>
    <label  class="icon-cloudy">
        <input type="radio" name="weather" id="cloudy">阴
    </label>
    <label  class="icon-rainy">
        <input type="radio" name="weather" id="rainy">雨
    </label>
    <label  class="icon-snowy">
        <input type="radio" name="weather" id="snowy">雪
    </label>    
</div>    
</body>
</html>

 

现代表三本色的三组数字而且相同一时候,能够缩写为四人;

当用十二进制表示颜色值时,要求在颜色值前加“#”;

3、文本字体:{font-family:字体1,字体2,字体3;}

font-family:"幼圆","大粗","华文细黑";

阐明:浏览器首先会招来字体1、如存在就动用该字体来显示内容,如在字体1不设有的处境下,则会搜索字体2,如若

本文由必威发布于必威-前端,转载请注明出处:1、文本大小  {font-size,果直接利用默认样式的页

相关阅读