如何实现星形（和其他）字符的跨浏览器字母间距（如果存在支持它的font-family）？

Question

我有以下文字：

★★★★★

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

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

在IE9和FF中看起来一样，在Opera中它略有不同，Chrome是最成问题的。见图：

在此示例中，CSS属性字母间距设置为“0px”。 是否有任何跨浏览器的方式来强制字符之间同样宽的空格？

我将不胜感激。

**编辑：自我解决

** EDIT2：编辑了原始问题，以便更清楚实际上是什么问题。

Answer 1

不，你没有。

您可能希望在所有浏览器中看起来都相同，但您 。

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

除此之外，还可以通过多种方式调整浏览器或操作系统以满足用户的需求，而且基本上是搞砸了。

如果您想要像素完美显示，那么您的业务就是错误的。

Answer 2

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

我用这种方式解决了它（伪代码）：

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星。您可以通过添加类＆＃34; i＆＃34;来切换星星灰色。您可以切换＆＃34;活动＆＃34; ＆＃34;无效＆＃34;类。

.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>