CSS 字体属性
CSS 提供了多种属性来控制字体的样式、大小、字重等。以下是一些常用的 CSS 字体属性及其用法。
1. 字体族 (font-family)
设置文本的字体族。可以指定多个字体作为备选。
.zz123_heading {
font-family: 'Arial', 'Helvetica', sans-serif; /* 优先使用 Arial，如果不可用则使用 Helvetica，最后使用 sans-serif 通用字体 */
}2. 字体大小 (font-size)
设置文本的字体大小。
.zz123_text {
font-size: 16px; /* 字体大小为 16px */
}常用单位：
px：像素em：相对于父元素的字体大小rem：相对于根元素（<html>）的字体大小%：百分比vw/vh：视口宽度或高度的百分比
3. 字重 (font-weight)
设置文本的粗细。
.zz123_bold {
font-weight: bold; /* 加粗 */
}可选值：
normal：正常（默认）bold：加粗bolder：更粗lighter：更细- 数字值：
100到900（400相当于normal，700相当于bold）
4. 字体样式 (font-style)
设置文本的样式，如斜体。
.zz123_italic {
font-style: italic; /* 斜体 */
}可选值：
normal：正常（默认）italic：斜体oblique：倾斜（类似于斜体）
5. 字体变体 (font-variant)
设置小型大写字母（small-caps）。
.zz123_smallcaps {
font-variant: small-caps; /* 小型大写字母 */
}6. 字体简写 (font)
使用简写属性一次性设置多个字体属性。
.zz123_heading {
font: italic bold 24px/1.5 'Arial', sans-serif; /* 字体样式、字重、字体大小/行高、字体族 */
}语法：
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];7. 字体颜色 (color)
设置文本的颜色。
.zz123_text {
color: #333; /* 深灰色 */
}8. 字体拉伸 (font-stretch)
设置字体的宽度（如紧缩或扩展）。
.zz123_condensed {
font-stretch: condensed; /* 紧缩字体 */
}可选值：
normal：正常（默认）ultra-condensed到ultra-expanded：不同程度的紧缩或扩展
9. 字体大小调整 (font-size-adjust)
调整字体的大小，使其在不同字体族中具有一致的可读性。
.zz123_text {
font-size-adjust: 0.58; /* 调整字体大小 */
}10. 自定义字体 (@font-face)
使用自定义字体文件。
@font-face {
font-family: 'MyCustomFont';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.zz123_custom {
font-family: 'MyCustomFont', sans-serif;
}11. 字体平滑 (font-smooth)
控制字体的抗锯齿效果（非标准属性，浏览器支持有限）。
.zz123_smooth {
-webkit-font-smoothing: antialiased; /* Chrome, Safari */
-moz-osx-font-smoothing: grayscale; /* Firefox */
}示例代码
.zz123_article {
font-family: 'Georgia', serif;
font-size: 18px;
font-weight: normal;
font-style: italic;
line-height: 1.6;
color: #444;
}
.zz123_article h1 {
font-family: 'Arial', sans-serif;
font-size: 32px;
font-weight: bold;
font-variant: small-caps;
color: #222;
}
.zz123_article code {
font-family: 'Courier New', monospace;
font-size: 14px;
font-weight: normal;
font-style: normal;
}总结
CSS 字体属性提供了丰富的选项来控制文本的字体样式、大小、字重等。通过合理使用这些属性，可以创建出美观且易读的网页内容。