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-叁十八个文字时,行高为1.5时,有较好的开卷经验。对于标题来说, 更加好的样式是收回其加粗设置,并改换其颜色,增添页面包车型客车档期的顺序感

 

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

微软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

哇,极棒,而且能够观察左侧中藏语混排情状下,希腊语展现的进一步卓越啊。(右侧固定字体的中国和英国混排克罗地亚(Croatia)语彰显有些难看)

 

Win8系统IE11显示:

图片 6

左右展现同一,以种类暗中认可字体微软雅黑展现。

 

Win8系统opera下:

图片 7

本条可惜,左侧是以暗许大篆展现的,这种景况会产生在其余第三方浏览器上,如:FirefoxChrome等。

 

 

OS X Mavericks系统Safari 7.0下:

图片 8

来得也分外完美,俄文略有差别,但是都相当的厉害。

 

想在线查看各样系统和器械展现示截图可访谈微软官方出品(包涵种种OS下,各样手提式有线电话机、pad设备下显得截图):

 

请见谅本人的歇斯底里吧,综上所述:
下面方法如故非常不够健全的,在风行Windows系统上第三方浏览器依旧会以石籀文突显(那有赖于各类浏览器私下认可样式的字体定义),所以,最后结果是特别不推荐使用。

但无意中开掘只要存在中土耳其语混排,倒是能够应用

  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为最粗)

 

怎设置网页上的书体

开采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、张开IE—工具栏——查看——文字大小(最大,相当大,中……)设置好后重开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系统下毫不选取微软雅黑字体,不佳看,未有自带的中文罗马尼亚(România)语字体美观,希望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(倾斜)

 

字体: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来渲染大篆,导致字体出现变形,那正是怎么Taobao须求在 sans-serif前拉长钟鼓文而Google不须求那样做的原因。
  • 因为中文字体的选用那多少个有限,所以前段时间具有的主流浏览器都设置使用燕书来展现汉语。Baidu的首页和搜索结果页使用 font-family:arial;可以从侧边表达那样做的安全性。大概有人注意到Firefox中国版暗中认可显示的汉语字体是微软雅黑,这是因为谋智网络自由修改了客户自定义样式,分化意网页的体制覆盖浏览器设置的体裁。也是出于类似的图景,大家要弹性设计网页特别首要。

采取乌Crane语字体作为第一暗许字体会导致的难题之一正是中希伯来语以至符号混排时的对齐难题、通过安装行高和hasLayout能化解绝大部分情景,不过都不会很圆满,假设把字体制改良成“黑体”能通透到底的消除问题。很显然,那些标题只现出在IE上。所以,假若你的网址少之又少使用立陶宛共和国(Republic of Lithuania)语、数字和斯洛伐克共和国(The Slovak Republic)语符号,那么直接设置 {font-family:5b8b4f53;}也是很有理的选择。

字体变形

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

 

大小:12px

  • 12px是石籀文能展现的顶点,固然微软雅黑能显得越来越小的字体,但当下的应用处境尚未成熟。由于草书基本上是当下突显汉语唯一的通用Web字体,所以12px改成最常用的字体大小。我们自然能够依据产品的内需来修改这几个暗许值。
  • 并不是思量基于字体大小(em)的统一筹算。
  • 在Chrome3.0之后的中文版中,字体大小最小值是12px,比方你设置最小字体为10px,最终也改为12px。

行高

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

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

 

行高: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时,注意不要接纳单位(蕴含%在内),因为子节点会传承经过运算后的line-height值,所以当使用单位后浏览器会把 line-height计算成第2回定义的断然值,而不会趁着字体大小的更改而调换,而无单位的数值表示是所在容器的 font-size的翻番,所以设置为无单位的数值是最棒选取。
  • 深入CSS 行高不行平价通晓 line-height,值得一读。

字体

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

    [注意]对此font-size,百分数相持于父成分来测算;对于line-height,百分数针锋相对于成分的font-size来测算

 

属性和作用

  • 绝大相当多阳台都有 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使用比率一点都不大的时候才大概正式的选拔它。大概要求到贰零壹陆年,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>

【实例】

  上面以二个实例来证实如何行使字体图标,最后的成效如下

  平日地,使用本国的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>

 

本文由星彩网app下载发布于前端技术,转载请注明出处:font关键字属性值的粗略切磋,网页文字字体原创

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。