当前位置：首页 > CSS

css 制作字帖

2026-03-11 17:26:11CSS

使用 CSS 制作字帖

设置基本样式

在 HTML 文件中创建一个容器，用于放置字帖内容。使用 CSS 定义字帖的背景、字体和布局。背景通常选择浅色或网格样式，字体推荐使用手写风格字体如 "楷体" 或 "宋体"。

<div class="copybook">
  <div class="character">永</div>
  <div class="character">远</div>
</div>

.copybook {
  background-color: #f9f9f9;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.character {
  font-family: "KaiTi", "STKaiti", serif;
  font-size: 60px;
  text-align: center;
  color: #333;
}

添加田字格

使用 CSS 伪元素或背景图像创建田字格效果。通过 background-image 属性叠加水平和垂直线条，形成标准的田字格结构。

css 制作字帖

.character {
  position: relative;
  width: 100px;
  height: 100px;
  background-image: 
    linear-gradient(to right, #ccc 1px, transparent 1px),
    linear-gradient(to bottom, #ccc 1px, transparent 1px);
  background-size: 50% 50%, 50% 50%;
  background-position: 0 0, 0 0, 0 50%, 0 50%, 50% 0, 50% 0, 50% 50%, 50% 50%;
}

实现描红效果

通过 CSS 动画或半透明颜色叠加，创建描红功能。使用 ::before 伪元素放置半透明的红色字符作为描红模板。

css 制作字帖

.character::before {
  content: attr(data-character);
  position: absolute;
  color: rgba(255, 0, 0, 0.5);
  width: 100%;
  text-align: center;
  line-height: 100px;
}

响应式设计

添加媒体查询确保字帖在不同设备上正常显示。调整字体大小和网格布局以适应小屏幕设备。

@media (max-width: 600px) {
  .copybook {
    grid-template-columns: repeat(3, 1fr);
  }
  .character {
    font-size: 40px;
    width: 80px;
    height: 80px;
  }
}

打印优化

添加专门的打印样式，移除不必要的元素并优化纸张布局。确保打印时背景网格和文字清晰可见。

@media print {
  .copybook {
    padding: 0;
    background-color: white;
  }
  .character {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}