使 :first-letter 的宽度与 CSS 一致

Question

我正在尝试使用 border-radius 和 padding 在文章的每个第一段的首字母周围画一个圆圈，但由于字符的宽度不同，它会显示为椭圆而不是圆形。

是否可以将字母的宽度和高度设置为与 CSS 相同的数量，或者设置填充使其与任何字符的宽度和高度相匹配？

我当前的代码如下所示：

p:first-of-type:first-letter{
  font-size: 58px;
  line-height: 1;
  float: left;
  margin-bottom: -4px;
  background-color: rgb(44, 44, 44);
  border-radius: 40px;
  padding: 0 14px;
  color: #fff;
}

Answer 1

Per @web-tiki - The ::first-letter pseudo element doesn't allow the width property. The only solution would be to use a monospace font or to use a container for the first letter. It would allow specifying a with for it an keep the circle round.

基于 web-tiki 的优秀答案，您可以调整 em 中所有内容的大小，因此它也会对字体大小的变化做出反应。

span {
  font-size: 58px;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  display: inline-block;
  vertical-align: middle;
  background-color: rgb(44, 44, 44);
  border-radius: 50%;
  color: #fff;
  text-align: center;
  margin-right: .1em
}
p:nth-of-type(even) span {
  font-size: 24px;
}

<p><span>A</span>pple</p>

<p><span>Q</span>uestionable</p>

Answer 2

对于那些可能不想在每个首字母周围添加额外元素的人，另一种解决方案是使用 svg 作为背景图像：

p:first-of-type:first-letter{
background-image:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSI1OCIgd2lkdGg9IjU4Ij4KICA8Y2lyY2xlIGN4ID0iMjkiIGN5ID0iMjkiIHIgPSIyOSIgc3R5bGU9ImZpbGw6IzQ0NDQ0NDtzdHJva2U6bm9uZTsiIC8+Cjwvc3ZnPgo=");
padding:0px 15px;
background-repeat:no-repeat;
background-position:center center;
}

使 :first-letter 的宽度与 CSS 一致

Consistens width of :first-letter with CSS

css

pseudo-element