3.6 CSS字体
来源:网络作者:站长
一、字体
在 CSS 中,我们使用 font-family 属性规定文本的字体。font-family 属性应包含多个字体名称,假如用户没有规定的字体,可以显示其他字体作为备用字体。
示例:
p { font-family:"Microsoft YaHei", Arial, Helvetica, sans-serif; }
注释:如果字体名称不止一个单词,则必须用引号引起来,例如:"Microsoft YaHei",“微软雅黑”,"宋体"。
二、字体样式
font-style 属性主要用于指定斜体文本。
此属性可设置三个值:
- normal - 文字正常显示
- italic - 文本以斜体显示
- oblique - 文本为“倾斜”(倾斜与斜体非常相似,但支持较少)
三、字体粗细
font-weight 属性指定字体的粗细:
值 | 描述 |
---|---|
normal | 默认值。定义标准的字符。 |
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
100 200 300 400 500 600 700 800 900 |
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 |
inherit | 规定应该从父元素继承字体的粗细。 |
示例:
<html> <head> <meta charset="utf-8"> <title>3.6 CSS字体</title> </head> <style> span { font-weight: bold; } </style> <body> <p>潭中鱼可<span>百许头</span>,皆若空游无所依,<span>日光</span>下澈,影布石上。——柳宗元《小石潭记》</p> </body> </html>
运行后如图:
四、字体大小
font-size 属性设置文本的大小。
在网页设计中,能够管理文本大小很重要。但是,不应使用调整字体大小来使段落看起来像标题,或是使标题看起来像段落。
请始终使用正确的 HTML 标签,例如 <h1> - <h6> 用于标题,而 <p> 仅用于段落。
font-size 值可以是绝对或相对大小。
绝对尺寸:
- 将文本设置为指定大小
- 不允许用户在所有浏览器中更改文本大小(可访问性不佳)
- 当输出的物理尺寸已知时,绝对尺寸很有用
相对尺寸:
- 设置相对于周围元素的大小
- 允许用户在浏览器中更改文本大小
注释:如果您没有指定字体大小,则普通文本(如段落)的默认大小为 16px(16px = 1em)。
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3.6 CSS字体</title> </head> <style> h1 { font-size: 40px; } h2 { font-size: 30px; } p { font-size: 14px; } </style> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>
运行后如图:
你觉得文章内容怎么样