如何实现星形（和其他）字符的跨浏览器字母间距（如果存在支持该字体的字体家族）？

Question

我有以下文字：

★★★★★★

由五颗星组成。 （字符9733）

我需要在所有浏览器中使用相同（或近似相同）的字母间距。 到目前为止，我已经在Opera，IE9，FF8和Chrome 16中对其进行了测试。

在IE9和FF中，外观看起来相同，在Opera中则略有不同，Chrome是最有问题的。 见图片：

在此示例中，CSS属性letter-spacing设置为“ 0px”。 有没有跨浏览器的方式来强制字符之间的空格相等？

我将不胜感激任何帮助。

**编辑：自我解决

** EDIT2：对原始问题进行了编辑，以使问题更清楚。

Answer 1

不，你没有。

您可能希望它在所有浏览器中看起来都一样，但是您不需要它。

恐怕如果图像不能被接受，就没有解决方案可以满足您的要求。 不同的浏览器和不同的操作系统都具有不同的渲染方法，不同的可用字体，不同的屏幕像素密度概念，不同的颜色概念……

除此之外，还可以通过多种方式来调整浏览器或OS以适应用户需求，并且您基本上就一头雾水。

如果您需要像素完美的显示，那么您做错了事情。

Answer 2

我很清楚各种浏览器中的字体呈现方式不同，但是主要问题是字母间距不同。

我用JS这样解决了它（伪代码）：

expectedOffsetWidth = [number of letter] * [font size in pixels];
offsetDeviation = expectedOffsetWidth - wrapperElement.offsetWidth;
wrapperElement.style.letterSpacing=Math.round([original letter spacing] + parseInt(offsetDeviation) / [font size in pixels])+"px";

Answer 3

我用css三角形制成的星形解决了这个问题。 不幸的是，在IE7中，带有小星星的线条非常粗糙。

但是，老实说，使用创建的HTML和CSS数量，最好使用图像/精灵。

以下HTML / CSS将生成10px星。 您可以通过添加类“ i”来将星星切换为灰色。 您可以使用“非活动”类别将星星的“活动”颜色切换为深色。

.stars {
    position: relative;
    display: block;
    width: 54px;
    height: 10px;
    margin: 0 12px 8px 30px;
    padding-bottom: 2px;
}

.stars b {
    width: 10px;
    height: 10px;
    display: block;
    position: absolute;
    top: 0;
}

.stars .a {
    left: 11px;
}

.b {
    left: 22px;
}

.stars .c {
    left: 33px;
}

.stars .d {
    left: 44px;
}

.stars b b {
    position: absolute;
    border-left: 3px solid transparent; 
    border-right: 3px solid transparent; 
    border-bottom: 2px solid #fff; 
    top: 8px; 
    left: 2px;
    width: 0;
    height: 0;
}

.stars .y {
    border-left: 5px solid transparent;  
    border-right: 5px solid transparent;    
    border-top: 4px solid #005B7F;
    border-bottom: none;
    top: 4px;
    left: 0;
}

.stars.inactive .y {
    border-top: 4px solid #555;
}

.stars .i .y,
.stars.inactive .i .y {
    border-top: 4px solid #ccc;
}

.stars .z { 
    border-left: 3px solid transparent;  
    border-right: 3px solid transparent;
    border-bottom: 10px solid #005B7F;
    border-top: none;
    left: 2px;
    top: 0;
}

.stars.inactive .z {
    border-bottom: 10px solid #555;
}

.stars .i .z,
.stars.inactive .i .z {
    border-bottom: 10px solid #ccc;
}

<span class="stars">
<b><b class=\"y\"></b><b class=\"z\"></b><b></b></b>
<b class=\"a\"><b class=\"y\"></b><b class=\"z\"></b><b></b></b>
<b class=\"b\"><b class=\"y\"></b><b class=\"z\"></b><b></b></b>
<b class=\"c i\"><b class=\"y\"></b><b class=\"z\"></b><b></b></b>
<b class=\"d i\"><b class=\"y\"></b><b class=\"z\"></b><b></b></b>
</span>