马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
在网页计划中，字体的使用对于提拔用户体验和页面美观性至关重要。CSS 提供了一系列字体属性，用于控制文本的体现结果。以下是对 CSS 字体属性的具体学习条记。
一、字体系列（font-family）
1. 字体系列的分类
在 CSS 中，字体系列分为两类：
- 通用字体系列：拥有相似外观的字体体系组合，如 "Serif"、"Sans-serif"、"Monospace" 等。
- 特定字体系列：一个特定的字体系列，如 "Times New Roman"、"Arial"、"Courier New" 等。
2. 常见字体系列对比
表格
复制
通用字体系列字体系列阐明SerifTimes New Roman<br>GeorgiaSerif 字体中字符在行的末端拥有额外的装饰Sans-serifArial<br>Verdana"Sans" 意为无，这些字体在末端没有额外的装饰MonospaceCourier New<br>Lucida Console所有的等宽字符具有相同的宽度 3. 设置字体系列
font-family 属性用于设置文本的字体系列。建议设置多个字体名称作为“后备”机制，以防浏览器不支持第一种字体。如果字体系列名称包罗多个单词，需要用引号括起来。
示例：
css
复制
- p {
- font-family: "Times New Roman", Times, serif;
- }
font-style 属性用于指定文本的字体样式，重要有以下三个值：
- normal：正常体现文本
- italic：以斜体字体现文本
- oblique：文字向一边倾斜（与斜体类似，但支持度较低）
示例：
css
复制
- p.normal {
- font-style: normal;
- }
- p.italic {
- font-style: italic;
- }
- p.oblique {
- font-style: oblique;
- }
font-size 属性用于设置文本的大小。字体大小的值可以是绝对大小或相对大小。
1. 绝对大小
- 设置一个指定大小的文本
- 不允许用户在所有浏览器中改变文本大小
- 在确定输出的物理尺寸时非常有用
示例：
css
复制
- h1 {
- font-size: 40px;
- }
- h2 {
- font-size: 30px;
- }
- p {
- font-size: 14px;
- }
- 相对于周围的元向来设置大小
- 允许用户在浏览器中改变文字大小
默认情况下，浏览器中普通文本段落的字体大小是 16 像素（16px = 1em）。
示例：
css
复制
- h1 {
- font-size: 2.5em; /* 40px / 16 = 2.5em */
- }
- h2 {
- font-size: 1.875em; /* 30px / 16 = 1.875em */
- }
- p {
- font-size: 0.875em; /* 14px / 16 = 0.875em */
- }
为了在所有浏览器中实现一致的文本大小调整，可以将 <body> 元素的默认字体大小设置为百分比，然后使用 em 单位设置其他元素的字体大小。
示例：
css
复制
- body {
- font-size: 100%;
- }
- h1 {
- font-size: 2.5em;
- }
- h2 {
- font-size: 1.875em;
- }
- p {
- font-size: 0.875em;
- }
font-weight 属性用于指定字体的粗细。常见的值包括：
- normal：正常粗细
- bold：加粗
- bolder：更粗
- lighter：更细
- 数字（100 到 900）：数字越大，字体越粗
示例：
css
复制
- p.normal {
- font-weight: normal;
- }
- p.bold {
- font-weight: bold;
- }
- p.bolder {
- font-weight: bolder;
- }
- p.lighter {
- font-weight: lighter;
- }
font-variant 属性用于指定文本是否以小型大写字体体现。重要值包括：
- normal：正常字体
- small-caps：小型大写字体
示例：
css
复制
- p.normal {
- font-variant: normal;
- }
- p.small-caps {
- font-variant: small-caps;
- }
font 属性允许在一个声明中设置所有的字体属性，包括 font-style、font-variant、font-weight、font-size、line-height 和 font-family。
示例：
css
复制
- p {
- font: italic small-caps bold 16px/30px Georgia, serif;
- }
|
