CSS3新特性汇总：用CSS3改变字体样式的方法

在网页设计领域，CSS3带来了众多令人瞩目的新特性，其中改变字体样式的功能尤为突出，极大地丰富了网页文字的表现力。

首先是 @font - face 规则。以往，网页字体局限于用户系统中已安装的字体。而 @font - face 打破了这一限制，允许开发者自定义字体。通过该规则，我们可以将服务器上的字体文件引入到网页中。例如，在CSS中定义：

@font - face {
    font - family: 'MyFont';
    src: url('myfont.woff2') format('woff2'),
         url('myfont.woff') format('woff');
}
body {
    font - family: 'MyFont', sans - serif;
}

这样，网页就能使用自定义字体，打造独特的视觉风格。

字体大小的控制在CSS3里也有新玩法。除了传统的像素、百分比等单位，新增了em、rem等相对单位。em 单位是相对于父元素的字体大小，而 rem 是相对于根元素（html）的字体大小。比如，设置根元素字体大小为16px，当设置一个元素字体大小为2rem时，其实际大小就是32px。这种相对单位在响应式设计中表现出色，能让字体根据页面布局自适应调整。

CSS3还能轻松实现字体的加粗、倾斜和变体效果。font - weight 属性不仅可以使用传统的数值（如 100 - 900）来控制加粗程度，还能使用 bold、normal 等关键字。font - style 属性用于设置字体倾斜，取值有 normal、italic 和 oblique。另外，font - variant 属性可实现小型大写字母等变体效果，像这样：

p {
    font - weight: 700;
    font - style: italic;
    font - variant: small - caps;
}

文字阴影效果为字体增添了立体感和层次感。text - shadow 属性可设置水平偏移、垂直偏移、模糊半径和阴影颜色。例如：

h1 {
    text - shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

通过这些CSS3改变字体样式的方法，网页设计师能够创造出更加绚丽多彩、独具个性的文字效果，为用户带来更优质的视觉体验，使网页在众多设计中脱颖而出。