CSS3 提供了一些新的字体样式属性，使得在网页设计中更加灵活地控制和样式化字体。以下是一些常见的 CSS3 字体属性：

1. Web 字体（Web Fonts）：
   - 使用 @font-face 规则可以引入自定义字体，从而提供更多的字体选择。
   @font-face {
     font-family: 'CustomFont';
     src: url('custom-font.woff2') format('woff2');
   }

   .custom-font-example {
     font-family: 'CustomFont', sans-serif;
   }

2. 字体图标（Font Icons）：
   - 使用字体图标库（如 Font Awesome）可以轻松地将图标嵌入文本中。
   <link rel="stylesheet" href="font-awesome.min.css">
   .icon-example::before {
     content: '\f095'; /* Font Awesome 的图标代码 */
     font-family: 'Font Awesome 5 Free';
   }

3. 文字加粗（Font Weight）：
   - 使用 font-weight 属性可以设置文字的加粗程度。
   .bold-text {
     font-weight: bold;
   }

4. 字体风格（Font Style）：
   - 使用 font-style 属性可以设置文字的风格，如斜体。
   .italic-text {
     font-style: italic;
   }

5. 字体大小（Font Size）：
   - 使用 font-size 属性可以设置文字的大小。
   .large-text {
     font-size: 20px;
   }

6. 字体变体（Font Variant）：
   - 使用 font-variant 属性可以控制小型大写字母的使用。
   .small-caps-text {
     font-variant: small-caps;
   }

7. 字体拉伸（Font Stretch）：
   - 使用 font-stretch 属性可以调整字体的宽度。
   .condensed-text {
     font-stretch: condensed;
   }

8. 字体变化（Font Feature Settings）：
   - 使用 font-feature-settings 属性可以启用或禁用 OpenType 字体的特定功能。
   .feature-settings-example {
     font-feature-settings: 'liga' off; /* 禁用连字 */
   }

这些字体属性可以根据设计需求灵活组合，为文本创建独特的样式。请确保使用合适的字体组合，以提高页面的可读性和吸引力。


转载请注明出处：http://www.zyzy.cn/article/detail/4061/CSS