CSS，让文字舞动起来：字体样式与文本样式之美

前端

2023-10-26 18:22:22

前言

在数字世界的浩瀚网海中，文字不再只是单调的符号，而成为连接人类情感的纽带。而CSS，作为网络世界的调色盘，不仅赋予了文字色彩，更赋予了文字灵魂，让文字在屏幕上跳动、歌唱。其中，字体样式和文本样式，便是CSS给予文字的华美衣装和独特个性。

字体样式：定义文本的个性

字体样式，如同人类的相貌，塑造着文本的外观和气质。CSS提供了丰富的字体样式属性，让你可以随心所欲地打造文本的个性。

font-family： 定义文本的字体。选择不同的字体，可以营造不同的风格，如优雅的宋体、端庄的微软雅黑、活泼的黑体。
font-size： 设定文本的大小。单位为px（像素），数字越大，文本越大。
font-weight： 控制文本的粗细。取值范围从100到900，100表示最细，900表示最粗。
color： 为文本赋予色彩。可以指定十六进制颜色值、颜色名称或RGB值。

文本样式：增添文本的魅力

文本样式，如同文字的化妆，修饰着文本的形态和展现方式。CSS提供了以下文本样式属性：

text-align： 控制文本的对齐方式。取值有left（左对齐）、right（右对齐）、center（居中）、justify（两端对齐）。
text-decoration： 为文本添加装饰。可添加下划线、删除线或上划线。
text-transform： 改变文本的大小写。取值有uppercase（大写）、lowercase（小写）和capitalize（首字母大写）。

实例演绎：让文字焕发生机

理论不如实践，让我们用实例来感受CSS字体样式和文本样式的魅力：

h1 {
  font-family: Arial, sans-serif;
  font-size: 36px;
  font-weight: bold;
  color: #000;
  text-align: center;
  text-decoration: underline;
}

p {
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: normal;
  color: #333;
  text-align: justify;
}