兄弟连 JavaWeb_042_CSS字体.pdfVIP

第第42讲讲：CSS字体字体 课程大纲 • 1、CSS 字体 • 2、指定字体 • 3、字体风格 • 4、字体加粗 • 5、字体大小 1、CSS 字体 • 在CSS 中，有两种不同类型的字体系列名称： • 通用字体系列- 拥有相似外观的字体系统组合（比如Serif 或Monospace ） • 特定字体系列- 具体的字体系列（比如Times 或Courier ） • 除了各种特定的字体系列外，CSS 定义了5 种通用字体系列： • Serif 字体 • Sans-serif 字体字体 • Monospace 字体 • Cursive 字体 • FantasyFantasy 字体字体 2、指定字体 1. 使用font-family 属性定义文本的字体系列。 • 如果你希望文档使用一种sans-serif 字体，但是你并不关心是哪一种字体，以下就是 一个合适的声明： • body {font-family: sans-serif;} • 这样用户代理就会从sans-serif 字体系列中选择一个字体（如Helvetica），并将其应 用到body 元素。因为有继承，这种字体选择还将应用到body 元素中包含的所有元素 ，除非有一种更特定的选择器将其覆盖。 3、字体风格 • font-style 属性最常用于规定斜体文本。 • 该属性有三个值： • normal - 文本正常显示 • italic - 文本斜体显示 • oblique - 文本倾斜显示 1. p.normal {font-style:normal;} 2. p.italic {font-style:italic;} 3.3. p.obliquep.oblique {font{font-style:oblique;}style:oblique;} italic 和oblique 文本在web 浏览器 中看上去完全中看上去完全一样样。。 4 、字体加粗 • font-weight 属性设置文本的粗细。 • 使用bold 关键字可以将文本设置为粗体。 • 关键字100 ~ 900 为字体指定了9 级加粗度。如果一个字体内置了这些加粗级别，那 么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的 字体变形。数字400 等价于normal，而700 等价于bold。 • 如果将元素的加粗设置为bolder，浏览器会设置比所继承值更粗的一个字体加粗。与 此相反此相反，关键词关键词lilighthter 会导致浏览器将加粗度下移而不是上移会导致浏览器将加粗度下移而不是上移。 1. p.normal {font-weight:normal;} 2. p.thick {font-weight:bold;} 3. p.thicker {font-weight:900;} 5、字体大小 • font-size 属性设置文本的大小。 • 有能力管理文本的大小在web 设计领域很重要。但是，您不应当通过调整文本大小使 段落看上去像标题，或者使标题看上去像段落。请始终使用正确的HTML 标题，比如 使用h1 - h6 来标记标题，使用p 来标记段落。 • font-size 值可以是绝对或相对值。 • 绝对值： • 将文本设置为指定的大小 • 不允许用户在所有浏览器中改变文本大小（不利于可用性） • 绝对大小在确定了输出的物理尺寸时很有用 • 相对大小： • 相对于周围的元素来设置大小 • 允许用户在浏览器改变文本大小 p {font-size:14px;} 5、字体大小 注意：如果您没有规定字体大小， 普普通文本本 （比如段落如段落） • fon