CSS制作文字

CSS制作文字效果的方法

基础样式设置 文字的基本样式可以通过font-family、font-size、color等属性调整。例如：

.text {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  color: #333;
}

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

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

渐变文字效果 通过背景渐变和-webkit-background-clip属性实现渐变文字：

.gradient-text {
  background: linear-gradient(to right, #ff8a00, #da1b60);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

文字描边效果 使用-webkit-text-stroke属性可以为文字添加描边：

.stroked-text {
  -webkit-text-stroke: 1px #000;
  color: white;
}

文字旋转与变形 通过transform属性可以实现文字的旋转或倾斜：

.rotated-text {
  transform: rotate(15deg);
}

响应式文字大小 使用vw单位或clamp()函数让文字大小随视口变化：

.responsive-text {
  font-size: clamp(14px, 4vw, 24px);
}

文字间距与行高 通过letter-spacing和line-height调整文字间距和行高：

.spaced-text {
  letter-spacing: 2px;
  line-height: 1.6;
}

自定义字体引入 使用@font-face引入自定义字体：

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

多行文字截断 对于多行文本溢出显示省略号：

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}