CSS字体:详解font属性


CSS字体 font属性很重要 ,他可以用来控制文本的显示,它可以定义文本的字体、大小、加粗、风格(如斜体)和变形(小型大写字母)。本文我们就来详细讲解下font属性。

font属性具有较强的继承性,如对body设定的font-family、font-size等,都会应用到body包含的所有元素。

字体系列

font-family属性定义元素中文本的字体系列或具体的一种字体。

body {font-family: sans-serif;}  //这样用户代理就会从 sans-serif 字体系列中选择一个字体(如 Helvetica),并将其应用到 body 元素。因为有继承,这种字体选择还将应用到body中包含的所有元素,除非有一种更特定的选择器将其覆盖。
div {font-family: Georgia;} //指定一种字体。
div {font-family: Georgia,serif;} //指定多种字体或字体系列。
div {font-family: Georgia,serif,'New Century Schoolbook';} //当字体名中有一个或多个空格(比如 New York),或者如果字体名包括#或$之类的符号,我们需要在font-family声明中加引号。

注意:在font-family属性中声明多个字体时,浏览器会从左至右查找这些字体。如果系统中存在该字体就予以显示,如果不存在则继续查找下一个。如果所有指定的字体或字体系列都没有,则会以系统或浏览器默认字体显示。

在CSS中,有两种不同类型的字体系列名称:
通用字体系列 – 拥有相似外观的字体系统组合(比如 “Serif” 或 “Monospace”)
特定字体系列 – 具体的字体系列(比如 “Times” 或 “Courier”)

除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列:Serif、Sans-serif、Monospace、Cursive和Fantasy。

字体大小

font-size属性设置文本的大小,值可以是绝对值(12px)或相对值(1em、100%)。

div {font-size:18px;} //绝对值
div {font-size:1.2em;} //相对值

绝对值的优缺点:将文本设置为指定的大小、不允许用户在所有浏览器中改变文本大小(不利于可用性)、绝对大小在确定了输出的物理尺寸时很有用。
相对值的优缺点:相对于周围的元素来设置大小、允许用户在浏览器改变文本大小。

注意:如果你没有规定字体大小,一般浏览器中普通文本(如段落)的默认大小是16像素(1em=16px)。
使用以像素为单位的绝对值有利于我们精确控制文本字体大小,但是在IE中无法缩放文本大小(绝对值的劣势)。

body {font-size:100%;} //为 body 元素(父元素)以百分比设置默认的font-size值
h1 {font-size:3.75em;}
p {font-size:0.875em;}

上面的代码结合使用了百分百和EM,在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。

字体加粗

font-weight属性设置文本的粗细程度,值可以是bold(加粗)、normal(正常)、100~900(值越大文字越粗)。

p {font-weight:normal;} //正常
strong {font-weight:bold;} //加粗显示,相当于数值700
div {font-weight:900;} //加粗显示

注意:100~900为字体指定了9级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100对应最细的字体变形,900对应最粗的字体变形。数字400等价于 normal,而700等价于 bold。

字体风格

font-style属性最常用于规定斜体文本,它的三个值:normal(正常显示)、italic(斜体显示)和oblique(倾斜显示)。

div {font-style:italic;} //元素中的文本斜体显示

注意:通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。

字体变形

font-variant属性设定小型大写字母显示文本,即所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。它的默认值是normal(正常显示)。

div {font-variant:small-caps;} //small-caps属性值设定元素中文本以“小型大写字母”显示

font属性简写

与css background属性一样,font属性也有自己的简写方式。
书写顺序为:字体风格、字体变形、字体加粗、字体大小/行高、字体系列。

div#blog54173 {font:italic small-caps bold 12px/20px "SimHei";} //斜体、小型大写字母、加粗、12像素大小/20像素行高、黑体

注意:如果简写了元素的font属性,而且元素另外还有line-height属性(行高)需要声明的话,line-height属性一定要书写在简写的font属性之后,否则会导致line-height声明无效。

在font属性控制的5项中,字体系列、大小、加粗使用频繁,必须掌握。对中文页面来说,小型大写字母并不常用


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3