Как получить межбраузерный межбуквенный интервал для символа звезды (и другого) (если поддерживается семейство шрифтов, которое его поддерживает)?

Question

У меня есть следующий текст:

★ ★ ★ ★ ★

, состоящий из пяти звезд.(символ 9733)

Мне нужно иметь одинаковый (или приблизительно одинаковый) межбуквенный интервал во всех браузерах.До сих пор я тестировал его в Opera, IE9, FF8 и Chrome 16.

В IE9 и FF он выглядит одинаково, в Opera он немного отличается, а Chrome - самый проблемный.См. Изображение:

В этом примере для свойства CSS в качестве межстрочного интервала установлено значение «0px».Есть ли какой-нибудь кросс-браузерный способ заставить одинаково широкие пробелы между символами?

Буду признателен за любую помощь.

** РЕДАКТИРОВАТЬ: САМОРЕШИТЬ

** РЕДАКТИРОВАТЬ2: Оригинальный вопрос был отредактирован, чтобы было более понятно, в чем на самом деле была проблема.

Answer 1

Нет, нет.

Вы можете хотеть , чтобы он выглядел одинаково во всех браузерах, но вам не нужно .

Если изображения неприемлемы, я не боюсь, что найдется решение, которое вас удовлетворит. Разные браузеры и разные ОС имеют разные методы рендеринга, разные шрифты, разные представления о плотности пикселей экрана, разные представления о цвете,…

Добавьте к этому множество способов, которыми браузер или операционная система могут быть настроены в соответствии с потребностями пользователей, и вы, в основном, облажались.

Если вы хотите получить идеальный пиксельный дисплей, значит, вы не в том направлении.

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>