CSS中的字体与排版属性详解

一、字体与排版基础概念
字体与排版是网页设计的核心要素，直接影响可读性和视觉体验。CSS提供了一系列属性来控制字体选择、大小、粗细、行高等特性。

二、字体相关属性详解

1. font-family 字体族设置

   • 作用：定义元素文本的字体
   • 语法：font-family: [字体名], [备用字体], [通用字体族];
   • 示例：

     .text {
       font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
     }
     

   • 注意：包含空格的字体名需加引号；建议提供备用字体和通用字体族

2. font-size 字体大小

   • 常用单位：px（固定值）、em（相对父元素）、rem（相对根元素）、%（百分比）
   • 示例：

     .text {
       font-size: 16px;        /* 固定大小 */
       font-size: 1rem;        /* 相对于根元素 */
       font-size: 1.2em;       /* 相对于父元素 */
     }
     

3. font-weight 字体粗细

   • 取值：normal（400）、bold（700）、100-900
   • 示例：

     .text {
       font-weight: bold;      /* 粗体 */
       font-weight: 600;       /* 数值定义 */
     }
     

4. font-style 字体样式

   • 取值：normal（正常）、italic（斜体）、oblique（倾斜）
   • 区别：italic使用字体的斜体版本，oblique是正常字体的倾斜变形

三、排版相关属性详解

1. line-height 行高

   • 作用：控制文本行间距
   • 取值：数字（推荐）、长度值、百分比
   • 示例：

     .text {
       line-height: 1.5;       /* 字体大小的1.5倍 */
       line-height: 24px;      /* 固定值 */
     }
     

2. text-align 文本对齐

   • 取值：left、right、center、justify（两端对齐）
   • 注意：justify可能导致单词间距不均匀

3. letter-spacing 字符间距

   • 作用：控制字符间距离
   • 示例：

     .text {
       letter-spacing: 1px;    /* 增加1像素间距 */
       letter-spacing: -0.5px; /* 减少间距 */
     }
     

4. text-indent 首行缩进

   • 作用：控制段落首行缩进
   • 示例：

     p {
       text-indent: 2em;       /* 首行缩进2个字符 */
     }
     

四、高级字体特性

1. @font-face 自定义字体

   • 作用：引入服务器端字体文件
   • 示例：

     @font-face {
       font-family: 'MyFont';
       src: url('myfont.woff2') format('woff2'),
            url('myfont.woff') format('woff');
       font-weight: normal;
       font-style: normal;
     }
     

2. font-display 字体显示策略

   • 控制自定义字体的加载行为
   • 取值：auto、block、swap、fallback、optional
   • 示例：

     @font-face {
       font-family: 'MyFont';
       src: url('myfont.woff2') format('woff2');
       font-display: swap;     /* 文本先用备用字体显示，自定义字体加载后替换 */
     }
     

五、实际应用技巧

1. 字体回退策略

   body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 
                  "PingFang SC", "Microsoft YaHei", sans-serif;
   }
   

2. 响应式排版

   html {
     font-size: 16px;          /* 基准大小 */
   }
   
   @media (min-width: 768px) {
     html {
       font-size: 18px;        /* 大屏幕上增大基准字体 */
     }
   }
   

3. 垂直居中单行文本

   .button {
     height: 40px;
     line-height: 40px;        /* 行高等于容器高度 */
     text-align: center;
   }
   

六、性能优化考虑

• 优先使用系统字体减少HTTP请求
• 使用现代字体格式（WOFF2 > WOFF > TTF）
• 合理设置font-display避免布局偏移
• 使用font-spider等工具进行字体子集化

通过系统掌握这些字体排版属性，可以创建出既美观又易读的网页文本效果，同时兼顾性能和用户体验。