如何实现星号（和其他）字符的跨浏览器字母间距（如果存在支持它的字体系列）？答案

【问题标题】：How to achieve a cross-browser letter-spacing for the star (and other) character (if font-family that supports it is present)?如何实现星号（和其他）字符的跨浏览器字母间距（如果存在支持它的字体系列）？
【发布时间】：2012-02-19 14:43:18
【问题描述】：

我有以下文字：

★★★★★

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

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

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

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

我将不胜感激。

**编辑：自行解决

**EDIT2：对原始问题进行了编辑，以便更清楚地了解实际问题。

【问题讨论】：

CSS shape 怎么样？
在服务器端将其转换为 PNG 并显示出来。
每个浏览器都有自己的字体渲染方式......（不同的字体文件）它们也有抗锯齿、阴影等等。您永远无法 100% 确定所有浏览器中的文本看起来都一样...使用图片
您能发布您的代码吗（html 和 CSS）？你的文字单位是什么？ “em”还是“px”？你使用 CSS 重置吗？必须重置所有浏览器的原生 CSS。如果您仍然有问题，您将不得不在 Chrome 上使用条件 CSS...
STM：将一个宽度较小且内容相同且溢出隐藏的div放在另一个上。

标签： html css browser fonts cross-browser

【解决方案1】：

不，你没有。

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

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

再加上可以调整浏览器或操作系统以满足用户需求的多种方式，你基本上就完蛋了。

如果您想要像素完美的显示，那您就错了。

【讨论】：

实际上，它不一定以像素完美的方式看起来相同。字母间距是最重要的问题。有没有办法调整真实的字母间距（例如使用 JavaScript）？
好吧，用 JavaScript 是可能的，我想通了。

【解决方案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";

【讨论】：

这很奇怪，因为您的屏幕截图肯定显示了不同字体的问题！

【解决方案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>

【讨论】：