字体系列

【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. C++类的内存分配

    今天面试被问到一个类的内存问题,有些记不清楚了.用了 C++这么年,实在是不应该. 于是上网查了一些资料,并做了实验,整理如下: 所用测试环境为64位mac air,编译器为XCode 1.最简单 c ...

  2. php下xcache的安装

    下载xcache: wget http://xcache.lighttpd.net/pub/Releases/3.2.0/xcache-3.2.0.tar.gz 安装: tar zxvf xcache ...

  3. fatal error C1083: 无法打开预编译头文件:“Debug\a.pch”:No such file or directory

    一.解决方法 右键点击你创建的项目,选择“属性标签”点击属性,弹出“项目属性页”,在左侧找到以下位置  配置属性 -->  C/C++  --> 预编译头,并选择它:在右边的菜单中选择 “ ...

  4. 在Ubuntu中安装Python3

    首先,通过命令行安装Python3.2,只需要在终端中通过命令行安装即可: sudo apt-get install python3   一路yes. 因为Ubuntu很多底层采用的是Python2. ...

  5. TCP字节流和UDP数据报区别

    两者的区别在于TCP接收的是一堆数据,而每次取多少由主机决定;而UDP发的是数据报,客户发送多少就接收多少. 拥有这些区别的原因是由于TCP和UDP的特性不同而决定的.TCP是面向连接的,也就是说,在 ...

  6. Flume概述和简单实例

    Flume概述 Flume是一个分布式.可靠.和高可用的海量日志采集.聚合和传输的系统.支持在日志系统中定制各类数据发送方,用于收集数据;同时,Flume提供对数据进行简单处理,并写到各种数据接受方( ...

  7. silverlight中Combox绑定数据以及动态绑定默认选定项的用法

    在Sliverlight中,经常要用到下拉框Combox,然而Combox的数据绑定却是一件令初学者很头疼的事情.今天就来总结一下下拉框的使用方法: 下面写一个简单的例子吧.先写一个日期的Model, ...

  8. Java多线程系列--“JUC锁”07之 LockSupport

    概述 本章介绍JUC(java.util.concurrent)包中的LockSupport.内容包括:LockSupport介绍LockSupport函数列表LockSupport参考代码(基于JD ...

  9. js中各种跨域问题实战小结（二）

    这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.windo ...

  10. C#Light(包括unity一切C#环境可用嵌入式脚本)0.10B稳定版发布，功能已定型

    yo,如题,这个呕心沥血的脚本语言终于完成了. 后面我会: 1.逐渐做一些例子.说明 2.逐渐测试我能获取到的dotnet环境,保证在所有的平台都能正常执行 3.积极推广 0.10B版本较之前的区别主 ...