Жирный текст выглядит по-разному в разных браузерах

У меня два браузера, оба работают в Ubuntu 10.

Firefox 4 RC и Google Chrome 10. Оба имеют очень разное представление полужирного текста. См. Снимок экрана ниже - Chrome сверху, Firefox снизу

введите описание изображения здесь

Одни и те же браузеры в Windows и Mac OSx не показывают различий или, по крайней мере, очень незначительных различий.

Чтобы исключить несовместимость CSS, я проверил применяемые стили и рассчитанные значения для font-weight, size, межбуквенного интервала и высоты строки. Все они совпадают.

Достаточно странный текст (в том числе и этот), который не полужирный, выглядит точно так же.

Используемый шрифт - Monotype Corsiva, он прилагается как веб-шрифт. Другие шрифты не имеют этой проблемы.

Мой вопрос: как веб-браузеры выделяют жирный текст? Почему это зависит от используемого шрифта и как это обойти? К сожалению, использование другого шрифта невозможно.

РЕДАКТИРОВАТЬ: это CSS, который применяется к тексту по запросу:

text-align: right;
font-size: 110%;
font-weight: bold;
font-style: normal;
white-space: nowrap;
font-family: "Monotype Corsiva","mntcrsweb",sans-serif;
letter-spacing: 0.02em;
line-height: 100%;
text-shadow: -0.1em -0.06em 0.2em #000000;

font-size: 180%;

direction: ltr;

font-size: 10px;

line-height: 125%;

fonts css typography cross-browser
person Boris Hamanov    schedule 20.03.2011    source источник
comment
это то, что делают браузеры - всегда будут некоторые отличия, особенно. в рендеринге текста - примите это и двигайтесь дальше. ;)   -  person Ian Wood    schedule 20.03.2011
comment
Что-нибудь изменится, если убрать правило text-shadow?   -  person thirtydot    schedule 20.03.2011
comment
Нет :( Разумеется, за исключением того, что тень от текста исчезла, текст остался прежним.   -  person Boris Hamanov    schedule 20.03.2011
comment
@ToonMariner У меня этот текст центрирован внутри статической картинки. Настройка допускает некоторые несоответствия, но это совсем не выглядит хорошо. Разница очень большая.   -  person Boris Hamanov    schedule 20.03.2011
comment
@ avok00 просто оставайся ... факт остается фактом: есть, по крайней мере, тонкие различия в том, как текст отображается в большинстве браузеров. у вас есть ссылка, по которой мы можем проверить все?   -  person Ian Wood    schedule 21.03.2011

Ответы (3)


arrow_upward
4
arrow_downward

Полужирный шрифт будет отдельным файлом шрифта, не включенным в основной шрифт (по крайней мере, не для форматов TTF и OTF).

У Monotype Corsiva нет жирного варианта, поэтому, если вы попытаетесь придать ему смелости, операционная система и / или браузер попытаются подделать его с разными (но всегда не идеальными) результатами.

Короткий ответ: не делайте этого.

Ваше здоровье,

Томас

person Thomas Phinney    schedule 21.03.2011

arrow_upward
2
arrow_downward

Только что вспомнил еще одну возможную причину вашей проблемы. Шрифты могут включать в себя ЖИРНУЮ версию. Некоторые браузеры и ОС используют это, другие сами генерируют жирный шрифт. Это может быть ваша проблема здесь. Шрифт может быть жирным или противоположным. Сам не тестировал, но это может быть проблемой.

Альтернативой являются некоторые из открытых / бесплатных веб-шрифтов от Google и т. Д.

person BerggreenDK    schedule 21.03.2011
comment
Это была моя первая мысль. К сожалению, бесплатные телефоны не самого лучшего качества, и я не могу себе позволить их купить. Может просто сниму жирный шрифт - проблема решена :) - person Boris Hamanov; 22.03.2011
comment
Вы видели эту страницу: google.com/webfonts ?? они свободны - person BerggreenDK; 24.03.2011

arrow_upward
0
arrow_downward

что произойдет, если вы откажетесь от единиц% и em? вместо этого использовать "неисправный пиксель"? они тогда совпадают? Я не говорю, что вам не следует использовать% или em, но порождают ли единицы px ту же проблему?

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

Потому что, как вы упомянули, браузеры и версии ОС по-разному отображают шрифты - например. cleartype в Windows и т. д. Но в любом случае они должны быть более или менее похожи.

Если бы я был в вашей ситуации, я бы сначала применил 1 стиль CSS, проверьте все браузеры. Затем нанесите следующий, пока не изменится внешний вид. Отладка начинается снизу. : o)

person BerggreenDK    schedule 21.03.2011
comment
Проблема не в em, а в% пикселях пробовал. Проблема, вероятно, в шрифте. - person Boris Hamanov; 22.03.2011