Проблема рендеринга Helvetica Neue с Firefox / Mac - PullRequest
0 голосов
/ 27 мая 2009

Рассмотрим этот HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<style type="text/css">
body {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    line-height:20px;
    font-size:14px;
}
.a {
    float:left;
}
.b {
    font-weight:bold;
}
</style>
</head>

<body>
    <div class="a">something1</div>
    <div class="a b">something2</div>
</body>
</html>

Во всех браузерах, кроме Firefox / Mac, он отображается правильно, т. Е. Жирный и не жирный текст находятся на одной базовой линии.

В Firefox / Mac базовая разница между жирным и не жирным шрифтом составляет 1 пиксель. Смотрите ниже для скриншота. Слева - Safari 3.2.3, справа - Firefox 3.0.10.

альтернативный текст http://www.jaanuskase.com/stuff/helveticaneue_ff_safari.png

Есть ли способ исправить это, например, с помощью некоторого CSS, кроме тихого плача в углу и использования Arial (чего я бы не хотел - я бы остался с Helvetica Neue, если бы мог).

Ответы [ 2 ]

1 голос
/ 28 мая 2009

Моя внутренняя реакция заключается в том, что поплавки плохо себя ведут. У меня нет Mac, но вы можете попробовать это сделать:

<span>something1</span><span class="b">something2</span>
<span class="a">something3</span><span class="a b">something4</span>

И посмотрите, правильны ли их базовые показатели?

0 голосов
/ 28 мая 2009

Ориентация на высоту строки может исправить это, но не уверен, что это виновник. Если у вас есть CSSEdit (или много обновляется), вы можете наблюдать за поведением, увеличивая высоту строки на 1 пиксель за раз.

Размер шрифта 14px делает это практически невозможным. FF отбрасывает жирный элемент на 1 пиксель на некоторых высотах линии, а сафари отбрасывает его на точных противоположностях! (т. е. сафари с высотой строки 20px отбрасывает жирный 1 пиксель, в то время как Firefox рендерит нормально, в противоположность вашей проблеме).

За исключением при высоте строки 3 пикселя, оба отображаются одинаково. Но высота строки в 3 пикселя странна, вам, возможно, придется учесть ее, отрегулировав поле на полях, если оно лишает вас разметки.

body {
    font: 14px "Helvetica Neue";
}

.b {
    font-weight: bold;
}

.a {
    line-height: 3px;
    float: left;
    margin-top: 9px;
}

При размере шрифта в 13px все отображается одинаково в обоих при высоте строки 21px (что ближе к обычной высоте строки.

Играя с разными размерами шрифта и высотой строки, я уверен, вы найдете то, что вам нужно.

Или взломайте, если вы так катаетесь:

body {
    font: 14px "Helvetica Neue";
}

.b {
    font-weight: bold;
}

.a {
    line-height: 21px;
    float: left;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {

/* Safari 3.0 and Chrome rules here */

    .a {
        line-height: 20px;
    }

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...