css字体 制作

字体样式设置

在CSS中，font-family属性用于指定文本的字体。可以设置多个字体作为备选，确保在不同设备上的兼容性。

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

字体大小调整

font-size属性控制字体的大小，可以使用像素（px）、em、rem或百分比（%）作为单位。

h1 {
  font-size: 2.5rem;
}
p {
  font-size: 16px;
}

字体粗细控制

font-weight属性用于设置字体的粗细，常见的值有normal、bold，或数值如100到900。

.bold-text {
  font-weight: bold;
}
.light-text {
  font-weight: 300;
}

字体风格设置

font-style属性用于设置斜体或正常字体样式，常用值包括normal和italic。

.italic-text {
  font-style: italic;
}

字体颜色修改

color属性用于设置字体颜色，支持十六进制、RGB或颜色名称。

.text-red {
  color: #ff0000;
}
.text-blue {
  color: rgb(0, 0, 255);
}

自定义字体引入

通过@font-face规则可以引入自定义字体文件（如TTF、WOFF格式）。

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/custom-font.woff2') format('woff2');
}
.custom-text {
  font-family: 'CustomFont', sans-serif;
}

文本装饰效果

text-decoration属性用于添加下划线、删除线等装饰效果。

.underline {
  text-decoration: underline;
}
.line-through {
  text-decoration: line-through;
}

字母间距调整

letter-spacing属性控制字符之间的间距，正值增加间距，负值减少间距。

.wide-spacing {
  letter-spacing: 2px;
}
.tight-spacing {
  letter-spacing: -1px;
}

行高设置

line-height属性用于调整行与行之间的垂直间距，通常使用无单位数值（如1.5）或固定值（如24px）。

.content {
  line-height: 1.6;
}

文本阴影效果

text-shadow属性为文本添加阴影效果，参数依次为水平偏移、垂直偏移、模糊半径和颜色。

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