字体系列

【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】特定字体系列：具体的字体系列

  1. font-family:"宋体";
  2. font-family:"arial";

【3】默认字体系列

　　chrome/opera:"宋体"

　　firefox:"微软雅黑"

　　safari/IE:Times,"宋体"

  1. font-family:字体系列1,字体系列2 ……
  2. //【注意】若浏览器识别第一个字体，则以第一个字体显示；如果不识别，则尝试下一个。
  3. font-family: arial，“宋体”,“微软雅黑”;
  4. //【注意】若写英文字体，一定要把英文字体写在前面，英文字体会影响到英文、数字和标点符号。
  5. font-family: Times, 'New Century Schoolbook','New York', serif;
  6. //【注意】若字体名中有一个或多个空格，要添加引号

【4】中文字体

　　对于中文字体来说，常见的是宋体和微软雅黑。宋体是衬线字体，而微软雅黑是无衬线字体。衬线字体常用于排版印刷，而无衬线字体则常用于网页中

　　一般地，一行中有30-40个文字时，行高为1.5时，有较好的阅读体验。对于标题来说， 更好的样式是取消其加粗设置，并改变其颜色，增加页面的层次感

字体加粗

【1】常用值

  1. font-weight: normal(正常，默认)
  2. 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

字体风格

  1. font-style: normal(默认)
  2. font-style: italic(斜体)
  3. font-style: oblique(倾斜)

字体变形

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

行高

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

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

字体

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

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

关键字

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

  1. 　　caption: 由标题控件使用的字体样式，如按钮和下拉控件
  2.  
  3. 　　icon: 系统图标所用的字体样式，如文件夹和文件图标
  4.  
  5. 　　menu: 下拉菜单和菜单列表中文本使用的字体样式
  6.  
  7. 　　message-box: 对话框中文本使用的字体样式
  8.  
  9. 　　small-caption: 由标题小控件的标签使用的字体样式
  10.  
  11. 　　status-bar: 窗口状态条中文本使用的字体样式

font-face

  1. @font-face {
  2.     font-family: 自定义名称;
  3.     src: url(../font/test.eot);
  4.     src: url(../font/test.eot?#iefix) format("embedded-opentype"),
  5.          url(../font/test.woff) format("woff"),
  6.          url(../font/test.ttf) format("truetype"),
  7.          url(../font/test.svg#jq) format("svg");
  8. }
  9. //EOT:IE专用；WOFF:标准；TTF:最常见(safari/android/ios)；SVG:图形格式(IE和firefox不支持)

两种调用字体的方法

　　【1】html(&#x + 小图标对应的unicode编码)

  1. div{
  2.     font-family: 自定义名称;
  3.     -webkit-font-smoothing:antialiased;//字体抗锯齿、光滑度属性
  4.     -mox-osx-font-smoothing: grayscale;//字体抗锯齿、光滑度属性
  5. }
  6. <div>&#xf048</div>

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

  1. div{
  2.     font-family: 自定义名称;
  3.     -webkit-font-smoothing:antialiased;//字体抗锯齿、光滑度属性
  4.     -mox-osx-font-smoothing: grayscale;//字体抗锯齿、光滑度属性
  5. }
  6. div:before{
  7.     content: "\f048";
  8. }
  9. <div></div>

【实例】

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

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

　　最终代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. <style>
  7. @font-face {
  8.   font-family: 'iconfont';
  9.   src: url('font/iconfont.eot');
  10.   src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
  11.   url('font/iconfont.woff') format('woff'),
  12.   url('font/iconfont.ttf') format('truetype'),
  13.   url('font/iconfont.svg#iconfont') format('svg');
  14. }
  15. .weatherBox input{
  16.     position: absolute;
  17.     clip: rect(0,0,0,0);
  18.     pointer-events: none;
  19. }
  20. .weatherBox label{
  21.     font-family: 'iconfont';
  22.     -webkit-font-smoothing:antialiased;//字体抗锯齿、光滑度属性
  23.     -mox-osx-font-smoothing: grayscale;//字体抗锯齿、光滑度属性
  24. }
  25. .weatherBox label + label{
  26.     margin-left:10px;
  27. }
  28. .weatherBox label:hover{
  29.     color: lightblue;
  30. }
  31. .icon-sunny:before { content: "\e601"; }
  32. .icon-snowy:before { content: "\e603"; }
  33. .icon-cloudy:before { content: "\e605"; }
  34. .icon-rainy:before { content: "\e606"; }
  35. </style>
  36. </head>
  37. <body>
  38. <div class="weatherBox">
  39.     <label class="icon-sunny">
  40.         <input type="radio" name="weather" id="sunny">晴
  41.     </label>
  42.     <label  class="icon-cloudy">
  43.         <input type="radio" name="weather" id="cloudy">阴
  44.     </label>
  45.     <label  class="icon-rainy">
  46.         <input type="radio" name="weather" id="rainy">雨
  47.     </label>
  48.     <label  class="icon-snowy">
  49.         <input type="radio" name="weather" id="snowy">雪
  50.     </label>
  51. </div>
  52. </body>
  53. </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# interface

    我们学习了interface,即接口,其与抽象类有点像,但是他们也有一些区别,比如类不能多重继承但是接口却可以多重继承. 接口只包含方法.委托或事件和属性的签名(接口包含的成员).不能包含字段(因为字 ...

  2. C#多线程学习

    一.线程的定义 进程(Process)是Windows系统中的一个基本概念,它包含着一个运行程序所需要的资源.进程之间是相对独立的,一个进程无法访问另一个进程的数据(除非利用分布式计算方式),一个进程 ...

  3. 你真的已经搞懂JavaScript了吗？

    题目一: if (!("a" in window)) { var a = 1; } alert(a); 题目二: var a = 1, b = function a(x) { x ...

  4. Eclipse断点调试

    转自:http://blog.csdn.net/maritimesun/article/details/7815903 作为开发人员,掌握开发环境下的调试技巧十分有必要.去年就想把关于Eclipse断 ...

  5. QQ在线客服设置

    QQ在线客服设置 1.客户在添加QQ在线客服后,需要让用户在线不需要添加为好友就能在线对话,一般默认设置下会显示"您需要添加对方为好友+才能给对方发送会话消息",具体解决方法如下: ...

  6. Mac中使用port升级gcc版本

    Mac OS中的gcc版本可能不会满足实际使用要求,需要对其升级. 这里介绍使用port方式来升级gcc版本.Macports是Mac OS中的软件包管理工具. 首先,安装Macports 这里提供O ...

  7. go json null字段的转换

    最近试了试go中对json null字段进行转换,代码如下: struct 转 json: package main import ( "encoding/json" " ...

  8. 使用NPOI将数据导出为word格式里的table

    开发环境:VS2013+MySQL5.5+EF6+NPOI2.0.6 格式:WinForm+CodeFirst PS:vs2013的CodeFirst很方便了啊 CodeFirst方式就不再赘述了. ...

  9. Java构建工具Ant小记(一)

    Ant简介 Ant是基于java的构建工具.理论上来说它类似与make工具,但是却克服了make的一些固有的缺陷. 传统的Make是基于操作系统shell的构建工具,虽然也可以基于工作的os对make ...

  10. MongoDB索引的使用

    Table of Contents 1. 基本索引 2. 联合索引 3. 索引类型 4. 索引管理 1 基本索引 在数据库开发中索引是非常重要的,对于检索速度,执行效率有很大的影响.本 文主要描述了M ...