字体系列

【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. 用cookie记住用户名

    有时候,我们在做登陆框时会有个复选框选择请记住我,或者有时候会遇到一些弹出框说下次不再提醒,此功能我们可以用js中的cookie实现此功能 下面记录一下如何实现该功能: 利用cookie记录用户名 1 ...

  2. loadRunner 负载机连接错误分析

    错误信息: Error: Process "lr_bridge.exe" was not created on remote host "192.168.86.17&qu ...

  3. ubuntu安装packet提示重复冲突问题

    今天装个zip出现: dpkg: error processing archive /var/cache/apt/archives/libc6-dev-i386_2.19-0ubuntu6.5_amd ...

  4. 【原创】--linux平台下opencv安装

    1.到opencv官网下载源码 也可以下载此链接http://pan.baidu.com/s/1mgId5ZM 2.解压到任意目录 可以使用右键-提取到此处,也可以在命令行中使用指令解压(linux中 ...

  5. smartsvn 用法

    都说SMART SVN是最全的Mac上的SVN客户端工具,分Pro版和基础版,基础版跟Versions差不多,这里找了Pro版下载并破解:mac版本smartSVN客户端下载:http://www.s ...

  6. python Scrapy

    由于项目要使用新闻,大量的数据所以想到了python的scrapy 下面大致讲一讲如何安装使用,直到整个新闻采集模块完成,网址什么的自己找 这里只是示范这里的项目环境是python 2.66 cent ...

  7. SWT：获取字符串实际宽度

    由于SWT取用的是系统文字size,有个简单方式可以获取一整段包含中文\英文\数字\特殊字符的字符串宽度. 即是利用Label的computeSize方法,我们知道Label的大小可以随着内容文字伸缩 ...

  8. DDD领域驱动设计之领域基础设施层

    1.DDD领域驱动设计实践篇之如何提取模型 2.DDD领域驱动设计之聚合.实体.值对象 其实这里说的基础设施层只是领域层的一些接口和基类而已,没有其他的如日子工具等代码,仅仅是为了说明领域层的一些基础 ...

  9. Senparc.Weixin.MP SDK 微信公众平台开发教程（五）：使用Senparc.Weixin.MP SDK

    Senparc.Weixin.MP SDK已经涵盖了微信6.x的所有公共API. 整个项目的源代码以及已经编译好的程序集可以在这个项目中获取到:https://github.com/JeffreySu ...

  10. Senparc.Weixin.MP SDK 微信公众平台开发教程（十三）：地图相关接口说明

    为了方便大家开发LBS应用,SDK对常用计算公式,以及百度和谷歌的地图接口做了封装. 常用计算: 用于计算2个坐标点之间的直线距离:Senparc.Weixin.MP.Helpers.Distance ...