通用字体系列

CSS中定义了5种通用字体系列

举例说明:指定通用字体系列

        body {
font-family:sans-serif;/*如果你希望文档使用一种sans-serif字体而并不关心是哪一种具体字体,这样用户代理会从ans-serif字体系列中选择一个字体将其应用到body元素上*/
}
        h1 {
font-family: Georgia,serif; /*如果Georgia字体不可用,则使用另外一种serif字体*/
} h2 {
font-family: Times,'Times New Roman',Georgia,serif;/*按先后顺序来、最后指定一个通用字体名以保险起见*/
/*只有当一个字名中有一个或多个空格或者如果字体名包括#或$之类的符号,才需要在font-family声明中加引号*/
}

font-weight字体加粗中是如何起作用的?

字体指定了9级加粗度,即100~900,其中400定义为等价于normal,700对应于bold,其它数不对应font-weight的任何其它值,不过它们可能对应于常用变形名。规则如下

举例说明一下:

字体的风格和变形

font-style的值可以为:italic、oblique、normal、inherit

normal:非斜体和倾斜的字体

oblique:正常竖直文本的一个倾斜版本

italic:斜体是一种单独的字体风格,对每个字母的结构有一些小改动,来反映变化的外观

css字体相关的零碎点点

        p {
font-variant:small-caps;/*小型大写字母*/
font-stretch:wider;/*这个属性用于让一个字体的字符更胖或更瘦*/
font-size-adjust:0.58;/*让字体保证可以辨识*/
}

font属性

font的前三个值font-style、font-weight和font-variant,后两个值为font-size和font-family,其中前三个值允许采用任意的顺序或者说可以任意省略,后两个值则必须font-size在前,font-family在后作为声明中的最后两个值,而且font声明中必须要有这两个值。

另外值得一提的是在font属性中可以增加行高,如下所示

再来看一个例子:

上述的css事实上跟下面的css是等价的

因为被忽略的值都会重置为其默认值 ,因为也将导致其覆盖inherit属性,所以使用font缩写属性时还是应该小心一些才好。

使用系统字体

        div {
font: caption;/*标题的控件*/
font: icon;/*图标加标签*/
font: menu;/*菜单*/
font: message-box;/*对话框*/
font: small-caps;/*小控件加标签*/
font: status-bar;/*窗口状态条*/
}

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. [leetcode]算法题目 - Sudoku Solver

    最近,新加坡总理李显龙也写了一份代码公布出来,大致瞧了一眼,竟然是解数独题的代码!前几天刚刚写过,数独主要算法当然是使用回溯法.回溯法当时初学的时候在思路上比较拧,不容易写对.写了几个回溯法的算法之后 ...

  2. jQuery api 快速参考[转]

    选择符 匹配 * 所有元素 #id 带有给定ID的元素 element 给定类型的所有元素,比如说html标签 .class 带有给定类的所有元素 a,b 匹配a或者匹配b的元素 a b 作为a后代的 ...

  3. 理解IEnumerator+IEnumerable这种接口思想

    前言 本文不想过多篇幅来介绍IEnumerator和IEnumerable这两个接口的具体说明,只是把它作一个例子作引言而已,本文将根据自己的理解来描述微软为何要这样设计这种关联风格的接口.这种风格的 ...

  4. 关于安装Visual Studio 2015 RC版卡主不动的解决方案

    在官方网站下载了vs_community.exe自动下载安装的软件进行安装,安装到github时候 卡了1个小时 一直显示正在获取,遂感觉不大对劲,使用了FQ程序,过了2分钟果然正常获取安装,进入了下 ...

  5. Loom工具类:Unity3D巧妙处理多线程

    Loom代码不多,只有168行, 然而却具备了子线程运行Action, 子线程与主线程交互的能力! public static Thread RunAsync(Action a) public sta ...

  6. [BZOJ3142][HNOI2013]数列(组合)

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3142 分析: 考虑差值序列a1,a2,...,ak-1 那么对于一个确定的差值序列,对 ...

  7. [POJ3696]The Luckiest number(数论)

    题目:http://poj.org/problem?id=3696 题意:给你一个数字L,你要求出一个数N,使得N是L的倍数,且N的每位数都必须是8,输出N的位数(如果不存在输出0) 分析: 首先我们 ...

  8. ContentProvider详解

    作用:把一个App中的数据库通过Url的形式共享出来,供其他App使用. 首先在App1中创建一个数据库,用SQLiteOpenHelper public class MyOpenHelper ext ...

  9. jq实现登陆页面的拖拽功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

  10. [转] JPQL

    原文地址:http://blog.csdn.net/suncaishen/article/details/6512028 select name ,age from user; //原生SQL语句 s ...