Html 以大写字母为中心，最大可能尺寸为一个圆

我需要以下要求与纯CSS。我为我的目标所做的尝试没有成功

我试图通过普通图像实现的目标：

口头上：

• 两个方向居中的圆圈中的一个字母
• 圆圈中的字母将是动态的，因此CSS设置不应仅用于某些特定字母（将是注释作者姓名的第一个字母）
• 圆的直径将来可能会改变（目前为40px）
• 字母不得溢出圆圈
• 字母必须尽可能大
• 我没有任何

  字体系列

  限制。如果答案需要

  monospace

  family，就可以了

下面给出了JSFIDLE链接中的代码。如果这是可以实现的，你能帮助我吗

HTML

Ş

CSS3

html5doctor.com CSS resetting CODE here

.step {
  background: #cccccc;
  border-radius: 2.5em; /* 40px */
  -moz-border-radius: 2.5em; /* 40px */
  -webkit-border-radius: 2.5em; /* 40px */
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 5em;  
  text-align: center;
  width: 5em;
  font-size:1em;}

.letter{font-size:5em;background:orange;position:relative;top:.1em;}

---

我稍微更改了您的CSS：

.step {
      background: #cccccc;
      border-radius: 50%; /* 40px */
      -moz-border-radius: 2.5em; /* 40px */
      -webkit-border-radius: 2.5em; /* 40px */
      color: #ffffff;
      display: inline-block;
      font-weight: bold;
      line-height: 5em;  
      text-align: center;
      width: 5em;
      height: 5em;
      font-size:1em;
}
.letter{
      font-size:4em;
}

基本上，我将

台阶的宽度和高度设置为相同。我将
边界半径设置为50%，如果宽度和高度相同，则始终会创建一个圆，即使将来尺寸发生变化

您可以稍微调整
字母的
字体大小
，使字母尽可能大。
+1额外解释+速度，谢谢。ı将工作代码放在这里：