字体系列

【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. Tomcat settings should be set in Tomcat Preference Page解决

    选择tomcat version,然户找到该tomcat的主目录,输入在tomcat home,下面的参数会自动配置,点击apply. 然后在左边选择advanced,同样把tomcat的主目录复制在 ...

  2. 我的Sharepoint视图的使用

    视图是个很灵活的工具,不过在使用前,为了更好的管理视图,我会将Contribute的权限的视图功能去掉. 普通用户都设为Contribute权限,有增删改操作就行. 这样做主要有三个目的: 1.不能让 ...

  3. Ubuntu下移植OpenCv

    通过近一周的时候终于成功交叉编译opencv成功了,真心不容易.有一句话乃真理也,凡事贵在坚持.过程总是痛苦的,因为不懂得很多问题但是又需要面对很多问题,最大的收获就是耐心解决所有问题后就懂得这些了. ...

  4. 图的邻接多重表和搜索（C++版本）

    最近在学数据结构,学到图这一章,网上的C++版本的代码乱得不行,所以自己写了一个完整C++版本的放这里. 用邻接多重表表示一个无向图,并给出DFS和BFS搜索代码.邻接多重表好处就是贼直观,几条边就几 ...

  5. VIM使用(一) VIM插件管理利器－vundle

    有关VIM的文件网上一大堆,这里只是记录一下我新配置环境的步骤．以备查看参考． sudo apt-get install gitgit clone https://github.com/gmarik/ ...

  6. sharepoint学习。

    企业门户:对全公司共用的信息进行统一管理.存储和发布,确保信息在公司范围内能够被及时传递 报表中心:集中管理.授权并发布所有业务报表,为各级管理人员提供各种数据.图形分析报表 办公协作:提供用户日常工 ...

  7. install skype4.3 in ubuntu15.04

    Canonical Partners repository finally adds support for Ubuntu 15.04. Here’s how to enable the reposi ...

  8. 系统架构：Web应用架构的新趋势---前端和后端分离的一点想法

    最近研究servlet,看书时候书里讲到了c/s架构到b/s架构的演变,讲servlet的书都很老了,现在的b/s架构已经不是几年前的b/s架构,其实b/s架构就是web应用开发,对于这样的架构我们现 ...

  9. Sqlserver 如何获取每组中的第一条记录

    在日常生活方面,我们经常需要记录一些操作,类似于日志的操作,最后的记录才是有效数据,而且可能它们属于不同的方面.功能下面,从数据库的术语来说,就是查找出每组中的一条数据. 例子 我们要从上面获得的有效 ...

  10. openseadragon.js与deep zoom java实现艺术品图片展示

    openseadragon.js 是一款用来做图像缩放的插件,它可以用来做图片展示,做展示的插件很多,也很优秀,但大多数都解决不了图片尺寸过大的问题. 艺术品图像展示就是最简单的例子,展示此类图片一般 ...