Странная проблема с выравниванием текста в CSS, когда Lucida Sans выделен жирным шрифтом

0

Я создавал HTML/CSS, чтобы отображать ключ, но в итоге получился странный вертикальный смещение, если текст для заголовка и текст для элементов.

После многих экспериментов я обнаружил, что проблема возникает только тогда, когда текст выделен полужирным шрифтом, и, кроме того, только при использовании шрифта Lucida Sans.

Вы можете увидеть демонстрацию этой проблемы здесь... http://jsfiddle.net/Ufa69/

HTML...

<div class="key">
<div class="t1">title:</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
<div class="key">
<div class="t2">title:</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
</div>

CSS...

body {
    font-family: "Lucida Grande","Lucida Sans","Arial",sans-serif;
}

.key {
    padding: 2px;
    font-size: 10px;
    overflow: hidden;
    border: 1px solid #666666;
    background: #eeeeee;
    margin-bottom: 4px;
}

.t1, .t2 {
    float: left;
    margin-right: 4px;
}

.t2 {
    font-weight: bold;
}

.item {
    float: left;
    margin-right: 4px;
}

В демо вы увидите, что текст выравнивается правильно в первом div, но во втором он смещен. Единственное различие между ними состоит в том, что второй использовал жирный шрифт.

Возможно, вы думаете: "Итак, используйте другой шрифт".

Но там уловка - Lucida Sans является шрифтом по умолчанию для jQuery UI.

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

(Проблема возникает у меня в Windows в Chrome, Firefox и Safari, но не в IE)

  • 0
    На Win 7, в Chrome, жирный текст явно выше базовой линии, но в Firefox (26.0).
Теги:
fonts

5 ответов

0
Лучший ответ

ЗАКЛЮЧЕНИЕ: небольшие размеры Lucida Sans полужирным шрифтом отображаются неправильно (на некоторых системах).

После многого тестирования различных параметров, таких как установка высоты линии, использование таблиц, поиск разных размеров и выравнивание по вертикали, а также измерение, я, наконец, пришел к выводу, что проблема заключается в простом рендеринге небольших размеров Lucida Sans bold,

Если вы создадите два div с границами, используя обычный Lucida Sans в 10px, а другой, используя жирную версию, вы можете видеть, что жирный шрифт заметно короче (по высоте).

При выравнивании вверх, жирный шрифт на пару пикселей выше обычного шрифта.

Выровняйте снизу, а это на пару пикселей ниже обычного.

Даже выравнивание до середины, оно по-прежнему на пиксель выше обычного.

Плохие новости:

  • Lucida Sans - это шрифт по умолчанию для jQuery UI и, как правило, очень популярный шрифт, что означает, что это влияет на множество веб-страниц.
  • Это непротиворечиво в браузерах, поэтому его настройка на работу в Chrome может выкинуть его в IE.

Хорошие новости:

  • Это происходит только на небольших версиях шрифта. Я обнаружил, что что-то размером 13 пикселей или больше кажется правильным.
  • При этих небольших размерах вы легко можете заменить "Arial", "Helvetica" или подобные, без каких-либо различий.

Спасибо всем, кто дал свои идеи, например, используя таблицы, высоту линии и т.д. В конце концов, хотя я считаю, что единственный разумный вариант - избегать небольших версий Lucida Sans. Вы все еще можете использовать его для большей части своей веб-страницы и просто заменять похожим более надежным шрифтом размером менее 13 пикселей.

Поделиться
0

Некоторые браузеры, по-видимому, используют вычисления с нечетными размерами столбцов. Это можно увидеть даже в простой установке, например

<style>* { font-family: Lucida Sans }</style>
<p>foo<p style="font-weight: bold">foo

Проверка этого в инструментах Chrome dev показывает высоту первого элемента p как 15 пикселей, а высота вторых p элементов - 14 пикселей. Это мало смысла; мы могли бы ожидать, что шрифт полужирного шрифта потребует большего роста, но чуть меньше. Обратите внимание, что вычисления высот зависят от браузеров и не обязательно напрямую используют значения line-height.

В вашем случае лучшим решением проблемы является использование некоторой разметки логической table а не плавающей. В таблице линии обычно выравниваются, даже если высота ящиков меняется.

Поделиться
0

Может быть, я плохо разбираюсь в этом. Но я не вижу смещенной проблемы, она действительно кажется выровненной здесь. (Chrome v31)

Что происходит:

  • Чтобы сделать шрифт полужирным шрифтом, в текст шрифта добавляется пара пикселей для выполнения эффекта. Очевидно, что он становится более заметным в тексте с небольшими размерами.

  • Каждый браузер и даже версия делают шрифт по-разному.

  • Каждый текст, каждая строка текста, имеет размер шрифта и высоту строки. По умолчанию line-height автоматически и сжимается до высоты содержимого. Все это поведение называется, строка. В тексте с font-size: 10px 10 пикселей line-height будет на пару пикселей выше. Поскольку вы увеличиваете размер line-height вам будет больше места для увеличения вверх, вниз, среднего и т.д., Как определено в атрибуте: vertical-align

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

Итак, у меня есть много вариантов, чтобы это сделать. Почти все, изменяя размер шрифта, высоту линии, выравнивание по вертикали, поля... и очень сложно добиться строгого результата.

Один особенно часто используется, и мне нравится просто уменьшить размер полужирного текста в 1 или 2 пикселя.

.t2 {
    font-size: 9px;
    font-weight: bold;
}

Вы также можете ограничить height и line-height контейнера-контейнера для улучшения, чтобы сделать его более равным.

Смотрите скрипт, чтобы подтвердить, что вам нравится результат.

Поделиться
  • 0
    Если вы не видите различий, то в вашей настройке должно быть что-то другое (возможно, отличная версия Windows). Возможно, версия Lucida Sans, которая у меня есть, просто причудливая.
0

Ницца..

Я видел, что высота линии отличается от ваших.t2 (11px) и.item(14px), но даже firebug не упоминает "почему" или наследование.

Исправьте высоту линии до 14px вокруг .key{line-height:14px;}.

[edit] После того, как вы увидели его в действии, я не могу понять, почему высота строки не унаследована от.key классов к их дочерним элементам <div>

Я искал здесь одно и то же решение "line-height", но применительно к детским divs.

.key,.key div{line-height:14px;}
Поделиться
  • 0
    Я попробовал ваше предложение, но вертикальное выравнивание все еще отсутствует. Удалось ли вам увидеть проблему в оригинале? И твои изменения это исправили? Может быть, я только что получил неумелую версию Lucida Sans или несоответствие между обычной и жирной версиями.
  • 0
    Ты чертовски прав! Позвольте мне взглянуть дальше. После поиска в Google шрифта "lucida sans" я получаю более 3 миллионов ответов. Я возвращаюсь к тебе.
0

они смещены, потому что жирный и обычный текст выделяет пространство по-разному, как если бы смелый увеличивал font-size сравнению с обычным текстом.

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

.t1{
    font-size:12px;

}

http://jsfiddle.net/Ufa69/1/

ПРИМЕЧАНИЕ. Есть много вариантов, которые вы можете сделать, чтобы смелый и нормальный текст выравнивался правильно. Вы можете использовать таблицы td или div с фиксированной шириной.

Поделиться
  • 0
    Жирный шрифт может быть шире, но он просто неправильно выровнен по вертикали, и фактически жирный шрифт отображается выше, чем не жирный. Как я уже сказал, это просто странно.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню