css制作标点

使用伪元素添加标点

通过 ::before 或 ::after 伪元素在元素前后插入标点符号。例如为段落首行添加引号：

p::before {
  content: "“";
}
p::after {
  content: "”";
}

调整标点悬挂效果

使用 text-indent 配合负值实现标点悬挂（标点突出到段落外）：

.hanging-punctuation {
  text-indent: -0.5em;
  padding-left: 0.5em;
}

控制标点压缩

通过 font-feature-settings 启用专业排版功能，压缩标点间距：

.compact-punctuation {
  font-feature-settings: "kern" 1, "palt" 1;
}

特殊标点样式设计

为特定标点定制样式，例如改变颜色或大小：

.highlight-comma {
  color: red;
  font-size: 1.2em;
}

使用自定义字体

通过 @font-face 引入包含特殊标点设计的字体：

@font-face {
  font-family: 'PunctFont';
  src: url('punctuation.woff2') format('woff2');
}
.custom-punctuation {
  font-family: 'PunctFont', sans-serif;
}

标点对齐控制

针对中文排版使用 text-spacing 属性（需浏览器支持）：

.cjk-spacing {
  text-spacing: ideograph-alpha ideograph-numeric;
}

标点避头尾处理

通过 line-break 和 word-break 防止标点出现在行首/行尾：

.avoid-break {
  line-break: strict;
  word-break: keep-all;
}