css字体:
属性 | 描述 |
font | 简写属性,把所有针对字体的属性设置在一个声明中。 |
font-family | 设置字体系列。 |
font-size | 设置字体的尺寸。 |
font-size-adjust | 当首选字体不可用时,对替换字体进行智能缩放。 (CSS2.1 已删除该属性。) |
font-stretch | 对字体进行水平拉伸。(CSS2.1 已删除该属性。) |
font-style | 设置字体风格。 |
font-variant | 以小型大写字体或者正常字体显示文本。 |
font-weight | 设置字体的粗细。 |
1.字体系列:
(1)在 CSS 中,有两种不同类型的字体系列名称:
通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace");
特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier");
(2)CSS 还定义了 5 种通用字体系列:
Serif 字体(衬线字体)
这些字体成比例,而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度,则成该字符是成比例的。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。对于中文来说,宋体属于serif字体,而对于中文来说,宋体属于serif字体,而英文,常用的serif字体为Times New Roman。
Sans-serif 字体
这些字体是成比例的,而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。对于中文来说,黑体、幼圆、雅黑则属于sans serif字体。而英文,常用的sans serif字体为Arial。
Monospace 字体(固定宽度)
Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出,甚至更老式的视频显示终端。采用这些字体,每个字符的宽度都必须完全相同,而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。
Cursive 字体(草书)
这些字体试图模仿人的手写体。通常,它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如,大写 A 再其左腿底部可能有一个小弯,或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。
Fantasy 字体
这些字体无法用任何特征来定义,只有一点是确定的,那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。
1. 指定字体系列:font-family属性
(1)作用:规定元素的字体系列,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
(2)浏览器支持性:所有主流浏览器都支持 font-family 属性。
Ps: 建议在所有 font-family 规则中都提供一个通用字体系列.
2. 字体风格:font-style属性
(1)作用:定义字体的风格;
(2)可能的值:
值 | 描述 |
normal | 默认值。浏览器显示一个标准的字体样式。 |
italic | 浏览器会显示一个斜体的字体样式。 |
oblique | 浏览器会显示一个倾斜的字体样式。 |
inherit | 规定应该从父元素继承字体样式。 |
(3)italic 和 oblique 的区别:
斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。
(4)浏览器支持性:所有主流浏览器都支持 font-style属性。
3. 字体变形:font-variant属性
(1)作用:设定小型大写字母;
(2)可能的值:
值 | 描述 |
normal | 默认值。浏览器会显示一个标准的字体。 |
small-caps | 浏览器会显示小型大写字母的字体。 |
inherit | 规定应该从父元素继承 font-variant 属性的值。 |
(3)浏览器支持性:所有主流浏览器都支持 font-variant属性。
4. 字体加粗:font-weight属性
(1)作用:设置文本的粗细;
(2)可能的值:
值 | 描述 |
normal | 默认值。定义标准的字符。 |
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
100-900 | 定义由粗到细的字符。400 等同 normal,700 等同 bold。 |
inherit | 规定应该从父元素继承字体的粗细。 |
(3)浏览器支持性:所有主流浏览器都支持 font-weight属性。
5. 字体大小:font-size属性
(1)作用:设置文本的大小, 实际上它设置的是字体中字符框的 高度;实际的字符字形可能比这些框高或矮(通常会矮);
(2)可能的值:
值 | 描述 |
xx-small x-small small medium large x-large xx-large | 把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。 默认值:medium。 |
smaller | 把 font-size 设置为比父元素更小的尺寸。 |
larger | 把 font-size 设置为比父元素更大的尺寸。 |
length | 把 font-size 设置为一个固定的值。 |
% | 把 font-size 设置为基于父元素的一个百分比值。 |
inherit | 规定应该从父元素继承字体尺寸。 |
(3)比较px和em:
使用像素来设置字体大小:
通过像素设置文本大小,可以对文本大小进行完全控制;在 Firefox, Chrome, and Safari 中,可以重新调整以上例子的文本大小,但是在 Internet Explorer 中不行。虽然可以通过浏览器的缩放工具调整文本大小,但是这实际上是对整个页面的调整,而不仅限于文本。
使用 em 来设置字体大小:
为避免在 Internet Explorer 中无法调整文本的问题,可以使用 em 单位代替 pixels。1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。
#可以使用下面这个公式将像素转换为 em:
pixels/16=em
(注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为:pixels/20=em)
(4)综合使用em和百分比:实现在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。例:
ps:普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。