字体系列

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

　　serif字体:字体成比例，且有上下短线(衬线字体)，包括Times\Georgia\New century Schoolbook

　　sans-serif字体:字体成比例，且没有上下短线(无衬线字体)，包括Helvetica\Geneva\Verdana\Arial\Univers

　　Monospace字体:字体不成比例，等宽字体，包括Courier\Courier New\Andale Mono

　　Cursive字体:手写体，包括Zapf Chancery\Author\Comic Sans

　　Fantasy字体:无法归类的字体，包括Western\Woodblock\Klingon

【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时，有较好的阅读体验。对于标题来说， 更好的样式是取消其加粗设置，并改变其颜色，增加页面的层次感

字体加粗

【1】常用值

font-weight: normal(正常，默认)

font-weight: bold(加粗)

【2】所有值

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

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

字体大小

【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-style: normal(默认)

font-style: italic(斜体)

font-style: oblique(倾斜)

字体变形

font-variant:normal(默认)

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

行高

line-height: normal(默认)

line-height: 具体值

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

字体

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

　　　　[注意]对于font-size，百分数相对于父元素来计算；对于line-height，百分数相对于元素的font-size来计算

关键字

　　CSS标准定义了6个系统字体关键字：

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

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

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

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

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

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

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 + 小图标对应的unicode编码)

div{

    font-family: 自定义名称;

    -webkit-font-smoothing:antialiased;//字体抗锯齿、光滑度属性

    -mox-osx-font-smoothing: grayscale;//字体抗锯齿、光滑度属性

}

<div>&#xf048</div>

　　【2】css(\ + 小图标对应的unicode编码)(不兼容IE7-浏览器)

div{

    font-family: 自定义名称;

    -webkit-font-smoothing:antialiased;//字体抗锯齿、光滑度属性

    -mox-osx-font-smoothing: grayscale;//字体抗锯齿、光滑度属性

}

div:before{

    content: "\f048";

}

<div></div>

【实例】

　　下面以一个实例来说明如何使用字体图标，最终的效果如下

　　一般地，使用国内的iconfont网站来寻找需要的字体图标，如晴、阴、雨、雪图标，将其新建为一个项目，并将项目文件下载到本地。下载的文件中包含了需要的字体文件及使用范例

　　最终代码如下

<!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>

CSS字体的更多相关文章

  1. CSS字体属性大全

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...

  2. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  3. Css字体中英文对照表

    css字体中文.英文.Unicode名对照表 另外注意:繁体中文字体名,在简体中文系统中是不能被识别的. 中文名 英文名 Unicode Unicode 2 Mac OS 华文细黑 STHeiti L ...

  4. css字体设置

    css字体设置 .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,S ...

  5. 2.css字体单位

    这期简单说说css字体单位 字体单位有三种:px.em.rem 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px. % 百分比 in 英寸 cm 厘米 mm 毫米 e ...

  6. Css - 字体图标

    Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...

  7. CSS 字体(font)实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

  8. css字体中英文对照表（转）

     在css文件中,我们常看到有些字体名称变成了乱码,这是由于网页开发者将中文字体的名字直接写成了中文,而css文件本身没有声明字符编码方式,查看时就出现了乱码.为了避免这种乱码状况出现,可以将css文 ...

  9. css 字体样式设置

    css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人   css字体样式(Font Style) ...

  10. css字体图标的制作和使用。

    css字体图标的制作和使用. 在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图 ...

随机推荐

  1. java-内省与javabean

    JavaBean 是一种JAVA语言写成的可重用组件.为写成JavaBean,类必须是具体的和公共的,并且具有无参数的构造器.JavaBean 通过提供符合一致性设计模式的公共方法将内部域暴露成员属性 ...

  2. 用canvas制作酷炫射击游戏--part3

    今天介绍下 游戏中的sprite模块,也就是构建玩家及怪物的模块.有了这个模块,就可以在咱们的游戏里加入人物了. 想必用过css的朋友都知道sprite,一种将需要加载的图片拼接在一张图里以减少请求的 ...

  3. leetcode sort List

    Sort a linked list in O(n log n) time using constant space complexity. /** * Definition for singly-l ...

  4. Tesseract-OCR识别中文与训练字库实例

    关于中文的识别,效果比较好而且开源的应该就是Tesseract-OCR了,所以自己亲身试用一下,分享到博客让有同样兴趣的人少走弯路. 文中所用到的身份证图片资源是百度找的,如有侵权可联系我删除. 一. ...

  5. MyRocks简介

    RocksDB是facebook基于LevelDB实现的,目前为facebook内部大量业务提供服务.经过facebook大量工作,将RocksDB为MySQL的一个存储引擎移植到MySQL,称之为M ...

  6. Swift 对比学习 (一)

    Swift相对Objective-C来说,有过之而无不及,并与Objective-C无缝混编,可谓利器.在Swift中可以看到不同的编程语言的影子,天下语言一大抄,这样也好,减低了不同语言的学习成本. ...

  7. 【原创】还原Hyper-V 到一个新的虚拟机

    Context: I need to restore VM31 backup (via 'Windows Server Backup' tool) as another new Hyper-V mac ...

  8. 跨平台开源通讯组件elastic communication

    elastic communication是基于c#开发支持.net和mono的通讯组件(简称EC),EC的主要目的简化mono和.net下的通讯开发难度,通过EC可以非常快速地开发基于mono和.n ...

  9. mono for android学习过程系列教程(7)

    首先说个抱歉,这段时候由于个人原因未及时更新博客.故此今天先给大家来个小料. 以后会及时更新我自己的学习过程. 不多说,终于私人生活安定下来了,可以安心学习.直接进入主体: 今天咱们摒弃所有的前面的知 ...

  10. 可在广域网部署运行的QQ高仿版 -- GG叽叽V1.8（源码）

    距离的GG 1.0发布已经三周了,这三周内,我利用业余时间为GG增加了视频聊天的功能.个人觉得进展有些缓慢,主要是因为大多数时间都花在了UI上.由于本人不会PS,所以图片素材都是从网上一个一个搜下来的 ...