概述

所谓字体:即文字的形体结构,根据外观字体分不同的类别:衬线字体Serif、无衬线字体sans-serif和等宽字体monospace。每一个类别的字体又可以分成不同的字体族font family,而字体族又可以包含不同的字型font face。CSS的字体属性描述了一类字体的大小和外观。比如使用上面字体族,多大字号,粗体还是斜体等。

文本与字体的区别

文本就是一组字符,比如一个段落、一个标题,文本有行高、字符间、有没有下划线和缩进等

字体是用于描述一类文本的大小和外观,比如用什么字体族、多大字号、是否斜体

总的来说,Web页面中的字体有三个来源

①用户机器中已安装的字体

②保持在第三方网站中的字体,例如,Typekit和Google

③保持在自己Web服务器上面的字体

与字体有关样式的属性有:字体族(font-family)、字体大小(font-size)、字体样式(font-style)、字体粗细(font-weight)、字体变化(font-variant)、font(简写属性)

字体族(font-family)

用于设置文本使用什么字体,一般来说整个页面应该有一个主字体族,font-family是可用继承的属性,由于Web页面中的字体,要么来着用户本地电脑,要么来自服务器上,所以可能存在设定的某种字体无法使用的问题,要解决这个问题,需要在设定字体时,设置多种候选字体,组成字体栈。而且总是在最后声明一种通用字体。例如:

body{font-family: "trebuchet ms",tahoma,sans-serif}  /*字体名之间有空格,所以用引号括起*/

这个字体栈要求:文档选用trebuchet ms字体族显示,如果机器里没有trebuchet ms字体,则选用tahoma字体

如果tahoma也找不到,则随便找一个sans-serif字体即无衬线字体,这是一种通用方法,以上由首选字体、备用字体、通用字体构造一个字体栈

常用的通用字体

使用如下通用字体,可以确保在最坏的情况下,文档也能得到正确的显示。

serif(衬线字体):字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同

sans-serif(无衬线字体):没有衬线字体的额外装饰,而且笔画的粗细差不多

monospace(等宽字体):指字符宽度相同的字体

cursive(草书/手写体):手写风格

fantasy:不能归入其他分类的字体

字体大小(font-size)

各个浏览器在默认情况下,已经为页面中的每个HTML元素设定了font-size,因为当显式设定font-size的时,实际上是在修改其默认值,font-size属性是可以继承的

设定字体大小有两种单位:绝对单位和相对单位

相对单位:百分比%、em、rem

相对字体大小事相对于最近被设置过字体大小的祖先元素来确定的。

使用相对字体大小,可以自动调整各层元素大小。这对于创建响应式页面非常重要。

绝对单位:像素px、派卡pica、英寸

使用绝对单位设置字体大小很简单,设置多大就是多大,不受祖先元素的影响,缺点是调整整个页面字体大小时,需要手动一个一个修改字体尺寸

理解几个默认字体大小以及它们的转换

标签名 默认大小em  
h1 2em 32px
h2 1.5em  
p 1em 1em=16px

首先要理解的是浏览器的样式表给所有元素设定的默认样式是使用的相对单位em,font-size的基准大小是1em即16px

字体样式(font-style)

font-style用于设定字体是斜体还是正体,也就是说font-style的作用只是通过italic设置成斜体或者normal设置成正体

<p>This is a demo <span>Hello CSS!!</span> with font-size</p>
p{font-style: italic;}
span{font-style: normal;}

显示效果:

 关于nomal值

很多属性都有nomal值,它的作用是取消所有的特殊样式,让元素恢复到初始的默认值,即让属性值恢复正常

字体粗细(font-weight)

用于设置字体的粗细,对于各个浏览器实现方式不同,实际上对于浏览器来说,它只显示bold和normal两个值

字体变化(font-variant)

font-variant只有一个值即small-caps,它会使所有的小写字母变成对应的大写字母

简写规则

先看下面的样式:

p{font:bold italic small-caps .9em helvetica,arial,sans-serif;}

上面的样式 设置p段落的粗细、斜体、小型字母大写、大小和字体族

必须遵循相应的简写规则,浏览器才能正确的解析

规则一:必须声明font-size和font-family

规则二:其他必须按照如下顺序出现

1.font-weight、font-style、font-variant顺序不分先后

2.font-size

3.font-family

七. 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) ...

随机推荐

  1. 广州项目实施步骤III_练习使用Keepalive保证HaProxy的高可用性

    CentOS6.4 配置HAProxy+Keepalived   安装HAProxy请参考 http://www.cnblogs.com/kgdxpr/p/3272861.html 安装Keepali ...

  2. CodeForces 163A Substring and Subsequence dp

    A. Substring and Subsequence 题目连接: http://codeforces.com/contest/163/problem/A Description One day P ...

  3. Codeforces Educational Codeforces Round 5 E. Sum of Remainders 数学

    E. Sum of Remainders 题目连接: http://www.codeforces.com/contest/616/problem/E Description The only line ...

  4. 模拟log4j获取日志对象调用所在的类名、方法名及行号

    当我们在记录日志时,每个类中会定义一个日志对象,然后利用这个对象去写日志,那么我们在处理日志时,如何能才能记录日志对象所在的类.方法和行号呢?log4j中已经实现了该功能,那么它是怎么实现的呢? 其实 ...

  5. 用ASP实现简单的繁简转换

    用ASP实现简单的繁简转换 国际化似乎是一个很流行的口号了,一个站点没有英文版至少也要弄个繁体版,毕竟都是汉字,翻译起来不会那么麻烦:P 一般的繁简转换是使用字典,通过GB的内码算出BIG5字符在字典 ...

  6. 剑指 offer set 8 树的子结构

    总结 1. 解法分为两步, 一是定位树的头结点, 二是两棵树作比较 2. 两个数作比较, 包括比较两棵树是否相等, 或者两个数是否镜像, 算法的框架类似 bool comp(root1, root2)

  7. 使用javaScript解决asp.net中mvc使用ajax提交数组参数的匹配问题

    想到在asp.net的mvc中如果使用ajax向服务端传递参数时如果参数是一个类或者是个数组(或List集合)以及更复杂的对象时,服务端总是会发生取不到值的情况,当然网上也有很多解决的例子,但都是在服 ...

  8. 进程控制之wait和waitpid函数

    当一个进程正常或异常终止时,内核就向其父进程发送SIGCHLD信号.因为子进程终止是个异步事件(这可以在父进程运行的任何时候发生),所以这种信号也是内核向父进程发的异步通知.父进程可以选择忽略该信号, ...

  9. demo virdata 虚拟数据

    $pageCurr = I('p',1);        $start = ($pageCurr-1) * self::PAGE_RECORD_SCAN;        $sort  = I('sor ...

  10. Golang学习 - errors 包

    ------------------------------------------------------------ Go 语言使用 error 类型来返回函数执行过程中遇到的错误,如果返回的 e ...