CSS 字体学习条记
在网页计划中，字体的使用对于提拔用户体验和页面美观性至关重要。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）
font-style 属性用于指定文本的字体样式，重要有以下三个值：
[*] normal：正常体现文本
[*] italic：以斜体字体现文本
[*] oblique：文字向一边倾斜（与斜体类似，但支持度较低）
示例：
css
复制
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
} 三、字体大小（font-size）
font-size 属性用于设置文本的大小。字体大小的值可以是绝对大小或相对大小。
1. 绝对大小
[*] 设置一个指定大小的文本
[*] 不允许用户在所有浏览器中改变文本大小
[*] 在确定输出的物理尺寸时非常有用
示例：
css
复制
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
} 2. 相对大小
[*] 相对于周围的元向来设置大小
[*] 允许用户在浏览器中改变文字大小
默认情况下，浏览器中普通文本段落的字体大小是 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 */
} 3. 使用百分比和 em 组合
为了在所有浏览器中实现一致的文本大小调整，可以将 <body> 元素的默认字体大小设置为百分比，然后使用 em 单位设置其他元素的字体大小。
示例：
css
复制
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
} 四、字体粗细（font-weight）
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）
font-variant 属性用于指定文本是否以小型大写字体体现。重要值包括：
[*] normal：正常字体
[*] small-caps：小型大写字体
示例：
css
复制
p.normal {
font-variant: normal;
}
p.small-caps {
font-variant: small-caps;
} 六、字体简写属性（font）
font 属性允许在一个声明中设置所有的字体属性，包括 font-style、font-variant、font-weight、font-size、line-height 和 font-family。
示例：
css
复制
p {
font: italic small-caps bold 16px/30px Georgia, serif;
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]