|
CSS字体 font属性很重要 ，他可以用来控制文本的显示，它可以定义文本的字体、大小、加粗、风格（如斜体）和变形（小型大写字母）。本文我们就来详细讲解下font属性。 font属性具有较强的继承性，如对body设定的font-family、font-size等，都会应用到body包含的所有元素。 字体系列 font-family属性定义元素中文本的字体系列或具体的一种字体。 body {font-family: sans-serif;} //这样用户代理就会从 sans-serif 字体系列中选择一个字体（如 Helvetica），并将其应用到 body 元素。因为有继承，这种字体选择还将应用到body中包含的所有元素，除非有一种更特定的选择器将其覆盖。 注意：在font-family属性中声明多个字体时，浏览器会从左至右查找这些字体。如果系统中存在该字体就予以显示，如果不存在则继续查找下一个。如果所有指定的字体或字体系列都没有，则会以系统或浏览器默认字体显示。 在CSS中，有两种不同类型的字体系列名称： 除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：Serif、Sans-serif、Monospace、Cursive和Fantasy。 字体大小 font-size属性设置文本的大小，值可以是绝对值(12px)或相对值(1em、100%)。 div {font-size:18px;} //绝对值 绝对值的优缺点：将文本设置为指定的大小、不允许用户在所有浏览器中改变文本大小（不利于可用性）、绝对大小在确定了输出的物理尺寸时很有用。 注意：如果你没有规定字体大小，一般浏览器中普通文本（如段落）的默认大小是16像素(1em=16px)。 body {font-size:100%;} //为 body 元素（父元素）以百分比设置默认的font-size值 上面的代码结合使用了百分百和EM，在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。 字体加粗 font-weight属性设置文本的粗细程度，值可以是bold(加粗)、normal(正常)、100~900(值越大文字越粗)。 p {font-weight:normal;} //正常 注意：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项中，字体系列、大小、加粗使用频繁，必须掌握。对中文页面来说，小型大写字母并不常用。 |