UI设计师-前端基础-CSS3_CSS3文本和字体样式.docx

PAGE1

PAGE1

CSS3文本和字体样式的入门与基础

1CSS3字体属性详解

在CSS3中，字体属性提供了丰富的控制，使网页设计更加灵活和美观。除了标准的字体大小、字体家族、字体样式等，CSS3还引入了font-weight、font-stretch和font-variant等属性，允许对字体进行更为细致的调整。

1.1font-weight

font-weight属性用于设置字体的粗细。除了数值100到900，还可以使用lighter和bolder关键字，以及normal和bold。如果选择的字体家族中没有相应粗细的字体，浏览器将尽可能选择接近的字体。

1.1.1示例

/*设置字体的粗细为正常*/

.normal-weight{

font-weight:normal;

}

/*设置字体的粗细为粗体*/

.bold-weight{

font-weight:bold;

}

/*设置字体的粗细为300（比较轻的粗体）*/

.light-weight{

font-weight:300;

}

1.2font-stretch

font-stretch属性用于设置字体的宽度。可以使用ultra-condensed、extra-condensed、condensed、semi-condensed、normal、semi-expanded、expanded、extra-expanded、ultra-expanded等关键字，或使用50%到200%的百分比值。

1.2.1示例

/*设置字体宽度为超紧凑*/

.ultra-condensed-font{

font-stretch:ultra-condensed;

}

/*设置字体宽度为紧凑*/

.condensed-font{

font-stretch:condensed;

}

/*设置字体宽度为扩展*/

.expanded-font{

font-stretch:expanded;

}

/*使用百分比设置字体宽度*/

.percent-stretch-font{

font-stretch:150%;

}

1.3font-variant

font-variant属性用于设置小写字母、大写字母、小型大写字母、所有大写、标题大小写和句子大小写。此属性可以控制字母的外观，使其更符合美学或语言要求。

1.3.1示例

/*设置文本为小型大写字母*/

.small-caps-text{

font-variant:small-caps;

}

/*所有字母都转换为大写字母*/

.uppercase-text{

text-transform:uppercase;

}

/*所有字母都转换为小写字母*/

.lowercase-text{

text-transform:lowercase;

}

/*首字母大写，其余小写*/

.capitalize-text{

text-transform:capitalize;

}

1.4font-feature-settings

font-feature-settings属性用于控制字体中的高级特性，例如字偶距、连字、分数和其他字形替换。通过使用OpenType特性标签，可以精确指定所需的特性。

1.4.1示例

/*启用连字*/

.ligatures-enabled{

font-feature-settings:liga1;

}

/*禁用连字*/

.ligatures-disabled{

font-feature-settings:liga0;

}

/*启用字偶距*/

.kerning-enabled{

font-feature-settings:kern1;

}

/*禁用字偶距*/

.kerning-disabled{

font-feature-settings:kern0;

}

2CSS3文本属性详解

CSS3文本属性涵盖了对文本的对齐、缩进、换行、间距和装饰等方面的精细控制。这包括text-align、text-indent、white-space、word-spacing、letter-spacing和text-decoration等属性。

2.1text-align

text-align属性用于设置文本的对齐方式。可以使用left、right、center和justify关键字来控制文本的水平对齐。

2.1.1示例

/*文本左对齐*/

.left-align-text{

text-align:left;

}

/*