css文字制作

CSS 文字样式设计

字体设置 使用 font-family 定义字体类型，优先使用系统安全字体或通过 @font-face 引入自定义字体：

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

字号与行高 通过 font-size 和 line-height 控制可读性：

p {
  font-size: 16px;
  line-height: 1.5; /* 无单位值表示相对于字体大小 */
}

文字特效实现

阴影效果 text-shadow 可添加多层阴影：

h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3),
              -1px -1px 0 #fff; /* 浮雕效果 */
}

渐变文字 结合背景裁剪实现：

.gradient-text {
  background: linear-gradient(45deg, #ff3366, #4411aa);
  -webkit-background-clip: text;
  color: transparent;
}

文字布局控制

对齐与间距

.article {
  text-align: justify;
  letter-spacing: 0.5px; /* 字符间距 */
  word-spacing: 2px;    /* 单词间距 */
}

溢出处理

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

动态文字效果

动画示例

@keyframes colorPulse {
  0% { color: #ff0000; }
  50% { color: #00ff00; }
  100% { color: #0000ff; }
}

.animated-text {
  animation: colorPulse 3s infinite;
}

响应式文字 使用 vw 单位或媒体查询：

.title {
  font-size: calc(16px + 1vw);
}

@media (max-width: 768px) {
  .title { font-size: 18px; }
}

高级技巧

自定义字体引入

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff');
}

文字描边 非标准属性需浏览器前缀：

.stroked {
  -webkit-text-stroke: 1px black;
  paint-order: stroke fill; /* 控制绘制顺序 */
}