概述

所谓字体:即文字的形体结构,根据外观字体分不同的类别:衬线字体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. 全代码实现ios-2

    全代码开发ios第一个应用程序,完全像是盲人摸象. 首先,要设计这个应用,无论从界面,还是颜色搭配,以及功能,都是一个人完成. 也许,做独立开发人真的相当不容易. 因为,没有人帮忙给意见,而且,也没有 ...

  2. 用javascript实现简体和繁体字间的转换

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. 拖动窗体FormBorderStyle属性为None的窗体移动

    winform窗体的样式很单一,不够漂亮,往往我们需要对窗体进行重写,但是我们又要保留在重写前窗体本身带的功能,例如拖动窗体的头进行移动之类的. 一下方式可以实现该方法: [DllImport(&qu ...

  4. JavaScript宝座:七大框架论剑

    JavaScript宝座:七大框架论剑 一周前,Throne of JS大会在多伦多召开,这应该是我参加过的最有料也最不一样的一次大会.大会官网如是说: 加载整个页面,然后再“渐进增强”以添加动态行为 ...

  5. LinQ—Lambda表达式

    概述 本篇博客主要解说lambda表达式,在这里将它的来龙去脉,主要是从托付,匿名函数这些方面过度讲的,当然,在讲托付和匿名函数的时候,主要是从Lambda的角度出发讲的,可能它们还具有其他的一些作用 ...

  6. python的print(转)

    转载:http://www.pythonclub.org/python-basic/print   使用print输出各型的 字符串 整数 浮点数 出度及精度控制 strHello = 'Hello ...

  7. CentOS 6.0 图形(图解)安装教程

    http://www.cnblogs.com/vipsoft/archive/2012/04/23/2466062.html

  8. apt-mirror is already running(已运行)错误解决方案

    运行sudo apt-mirror却无法启动服务了.而是给出了一行错误提示信息:               apt-mirror is already running, exiting at /us ...

  9. C++字符串处理封装类String

    概述 C++在处理字符串时相对于python等脚本语言并没有什么优势,下面将常用的字符串处理函数封装成一个String工具类,方便以后使用,后期还会对该类进行扩充,下面是具体的实现: // Strin ...

  10. C++-copy constructor、copy-assignment operator、destructor

    本文由@呆代待殆原创,转载请注明出处. 对于一个类来说,我们把copy constructor.copy-assignment operator.move constructor.move-assig ...