字体系列

【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. 个人阅读作业Week7

    没有银弹 <没有银弹>,Brooks在该论文中,强调真正的银弹并不存在,而所谓的没有银弹则是指没有任何一项技术或方法可以能让软件工程的生产力在十年内提高十倍.文中讨论到了软件工程中主要的两 ...

  2. week7 read

    对于银弹: 在<No Silver Bullet>这篇IBM大型电脑之父佛瑞德·布鲁克斯(Fred Brooks)在1987年所发表的一篇关于软体工程的经典论文中,强调了由于软件的复杂性本 ...

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

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

  4. JDK和环境配置

    1. JASE : J2SE 这个就是我们现在在学的东西,他是一切Java的核心基础 JAME :J2ME : 他是Java的一个微型版,主要用来做移动开发 JAEE :J2EE Java企业版本,主 ...

  5. 简单的OkHttp使用介绍

    Android系统提供了两种HTTP通信类,HttpURLConnection和HttpClient.关于HttpURLConnection和HttpClient的选择>>官方博客尽管Go ...

  6. 【C-01关键字】

    一.语句引导关键字 for   while   swith  if  do   goto   return 二.限定关键字 const  static   extern 三.预编译关键字 #inclu ...

  7. samba server install

    要求: create vnc service for win7 access it via vnc viewer. 1TB disk for this Centos PC is used as Sam ...

  8. ASP.NET连接远程Oracle数据库，提示试图加载格式不正确的程序

    VS调试远程连接Oracle数据库,一直报错 由于本地计算机是64位的操作系统,而且也确定安装的Oracle客户端是64位的 ,但是一直提示这个错误. 试了很多方法,终于发现可能是 不能在VS中调试的 ...

  9. Mac OS X 常用快捷键

       

  10. [你必须知道的NOSQL系列]专题二：Redis快速入门

    一.前言 在前一篇博文介绍了MongoDB基本操作,本来打算这篇博文继续介绍MongoDB的相关内容的,例如索引,主从备份等内容的,但是发现这些内容都可以通过官方文档都可以看到,并且都非常详细,所以这 ...