fonts - 具有圆形背景颜色的气泡字母

Question

我不记得我的登录名了，所以做了这个临时的。我有一个简单的跨度，可以创建一个特定颜色的气泡字母，我的意思是它是一个圆形的子弹，字母被剪掉了。现在，我可以将大多数字母显示为白色的背景颜色，但其中一个字母我需要 bg 为黑色。话虽如此，这是我的代码。

<span class="arr">R</span>

.arr {
font-family: "Bullet";
color: #ffda00;
background-color: black;
border-radius: 50%;
}

现在它显示得很好，除了气泡两侧的黑色尖峰。我已经尝试过背景大小、宽度、负边框宽度，而浏览器似乎只是忽略了填充。我也试过 display:block;float:left; 和显示：内联块；

有没有人有什么建议？

我有点修复它，但仍在寻找更好的方法。我用气泡字母嵌套了一个 div 并为其应用了背景颜色。但我仍然需要一种方法让它自动缩放到字母。

<span class="arr"><div class="bgb"></div>R</span>

和CSS

.arr {
font-family: "Bullet";
color: rgb(232, 206, 53);
position: relative;
margin-left: -1px;
}

.bgb {
width: 41px;
height: 41px;
display: inline-block;
background-color: black;
z-index: -1;
position: absolute;
margin: 7px;
border-radius: 50%;
}