Вопрос по css-tables, html, css, vertical-alignment – Рендеринг шрифта / Высота строки на Mac / PC (вне элемента)

57
The Design

Содержимое информационных виджетов должно быть выровнено по центру по вертикали следующим образом

Original PSD Design

The Coded Design Windows: Chrome 20 / FF 14 / IE 9

Windows Coded Design

Mac (Lion / Mt. Lion): Chrome / FF

Mac Coded Design

The Code HTML
<div class="info">
    <div class="weather display clearfix">
        <div class="icon"><img src="imgs/icons/thunderstorms.png" align="Thunderstorms" /></div>

        <div class="fl">
            <p class="temperature">82&deg; / 89&deg;</p>
            <p class="conditions">Thunderstorms</p>
        </div>
    </div>
    <div class="time display">
        <p>11:59 <span>AM</span></p>
    </div>
    <div class="date display clearfix">
        <p class="number fl">23</p>
        <p class="month-day fl">Jun <br />Sat</p>
    </div>
</div><!-- //.info -->
CSS
.info {
    display:table;
    border-spacing:20px 0;
    margin-right:-20px;
    padding:6px 0 0;
}
    .display {
        background-color:rgba(255, 255, 255, .2);
        border-radius:10px;
        -ms-border-radius:10px;
        color:#fff;
        font-family:"Cutive", Arial, sans-serif;
        display:table-cell;
        height:70px;
        vertical-align:middle;
        padding:3px 15px 0;
    }
        .display p {padding:0;line-height:1em;}
        .time, .date {padding-top:5px;}
            .time p, .date .number {font-size:35px;}
            .time span, .display .month-day, .conditions {
                font-size:14px;
                text-transform:uppercase;
                font-family:"Maven Pro", Arial, sans-serif;
                line-height:1.15em;
                font-weight:500;
            }
            .display .month-day {padding-left:5px;}
            .icon {float:left;padding:0 12px 0 0}
            .display .temperature {font-size:24px;padding:4px 0 0;}
            .display .conditions {text-transform:none;padding:2px 0 0;}
    .lt-ie9 .display { /* IE rgba Fallback */
        background:transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff);
        zoom:1;
    } 
The Issue

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

Windows

Windows Coded Design Alignment

Mac

Mac Coded Design Alignment

Note

Я встраиваю шрифты через таблицу стилей Google Web Fonts.

Tested

Я пробовал следующее:

Set line-heights on every element. Set font-weights on every element. Set heights on every element. A combination of height/padding-top on every element. Used percentages/em/px for padding.

Кажется, что независимо от того, что я пытаюсь, контент никогда не будет идеально выравниваться по центру на Mac и ПК.

My Question(s)

Можно ли достичь того, что я пытаюсь сделать, в упрощенном виде?

Должен ли я отказаться отdisplay:table-cell; Маршрут и установить конкретные высоты / отступы для каждого элемента и дочернего элемента? Я все еще буду сталкиваться с проблемами заполнения / пробелов между двумя ОС.

Что я должен классифицировать эту проблему под? Высота линии? Таблица-клетка? ОПЕРАЦИОННЫЕ СИСТЕМЫ? так далее...

Thanks in advance!

Вы используете сброс CSS? И если так, что вы используете? user570350
Я где-то читал, что вертикальный интервал можно изменить с помощью FontForge, если кто-то знает, как это исправить с помощью FontForge, будет золотым ответом. Dan
Для ответа FontForge см мой ответ ниже Luke
Да, я использую сброс CSS, и это по своему усмотрению, но это не похоже на нормализацию CSS. rebz
Не могу поверить, что по этому вопросу онлайн больше нет BjarkeCK

Ваш Ответ

9   ответов
0

Это связано с историей форматов шрифтов и войнами Windows / Mac. Существуют разные способы вычисления высоты строки, и если они не синхронизируются в используемом вами шрифте, в некоторых системах произойдет сбой.

Вам нужно исправить свой шрифт (если это разрешено лицензированием) или перейти на него без этой проблемы

Увидетьhttp://www.webfonts.info/node/330 (предупреждение, это рекламный ролик, даже если техническая информация верна)

Лучше, чтобы ваш дизайн не зависел от точного значения здесь

4

Мое решение этого (очень раздражающая проблема):

Set all elements to float:left;

Set explicit line-heights;

Enjoy a victory over cross-browser/platform css ridiculousness.

32

Если это решено с использованием другого шрифта (Arial), то проблема заключается в шрифте, а не в CSS. Как вы заметили, рендеринг шрифтов отличается в разных браузерах.

Одним из возможных решений может быть загрузка шрифта Cutive (я вижу, что у него есть лицензия SIL), а затем запуск его через генератор шрифтов-шрифтов Font Squirrel. В & quot; Эксперте & quot; В режиме есть опция «Fix Vertical Metrics». что может быть то, что вы ищете.

К сожалению, Font Squirrel сказал, что мой шрифт занесен в черный список (я понятия не имею, почему, поскольку я купил его на законных основаниях), поэтому я использовал «исправить вертикальные метрики»; вариант на transfonter.org вместо этого. Работал угощение! ура
Ура! Исправить вертикальные метрики сделали свое дело.
спасибо за «генератор шрифтов лица шрифта» совет - это сделал!
Спасибо! Исправление вертикальных метрик просто спасло меня от ударов головой о стену.
Похоже, что это единственная рекомендация, чтобы исправить это, я проверил это с 4 шрифтами, они не были исправлены. Поэтому я считаю, что это может сработать несколько раз.
1

Я тоже сталкивался с этой проблемой. Ответ Люка помог мне. Мне пришлось настроить шрифты с помощью FontForge с помощью этих настроек:

FontForge Settings

Снимите все флажки "Смещено" чекбоксы, а также & quot; Действительно использовать метрики Typo & quot; флажок. У меня было большинство проблем с Firefox и IE. Игра со значением «Win Descent» исправил это для этих двух браузеров.

1

Частично проблема может заключаться в том, как Windows / Mac OSX отображает шрифты. В частности те, которые вводятся через @ font-face. Вы пробовали переключаться, какие форматы шрифтов используются?

Я использую Google Web Fonts. Если я использую Arial, шрифт идеально выровнен по вертикали. Так что да, это проблема рендеринга шрифтов. Хотя я не уверен, что это проблема, связанная с @ font-face. Я еще не тестировал, чтобы увидеть, как будет выглядеть результат рендеринга, если на компьютере пользователя установлены шрифты. rebz
-1

Mac правильно отображает длины ниже базовой линии как принадлежащие высоте строки. Похоже, что OS X считает снизу вверх, тогда как Windows рассчитывает сверху.

Поскольку 1em является шириной заглавной буквы M используемого шрифта, она обычно меньше общей высоты шрифта.

Вы пытались установить высоту строки равной высоте элемента? Это обычно помогает решить подобные проблемы.

Да, я пытался установить высоту строки на основе высоты контейнера, размера шрифта, размеров отступов и т. Д. Это потому, что Mac отображает высоту строки снизу вверх, что у меня возникла эта проблема. rebz
Вы пробовали разные вертикальные выравнивания? Может быть, базовый или топ конкретно помочь.
6

Я столкнулся с этой проблемой с помощью специального шрифта, который был создан для бренда клиента. Я открыл шрифт TTF в Font Forge. Способ, которым я создал единообразие при рендеринге, состоял в том, чтобы отрегулировать значения в Element-> Font Info-> OS / 2-> Metrics.

Значения Win Ascent / Descent работают иначе, чем другие значения. У меня были следующие значения:

Win Ascent: 1000

Win Descent: 0

Typo Ascent: 750

Typo Descent: -250

HHead Ascent: 750

HHead Descent: -250

Я изменил значения Win Ascent и Descent:

Win Ascent: 750

Win Descent: 250 (обратите внимание на положительное значение)

Похоже, вам нужно сопоставить значения, за исключением того, что в моем случае мне нужно было инвертировать значение Win Descent в положительное.

У меня очень ограниченные знания о шрифтах, но это помогло решить мою проблему. Я сгенерировал шрифт как TTF, а затем запустил его через веб-генератор шрифтов. Шрифты теперь отображаются одинаково на Mac / Windows 7 / Android / iOS.

Надеюсь, это кому-нибудь поможет.

Спасибо! Это сработало для меня, когда я пытался использовать семейный шрифт Gill Sans в браузерах, работающих под Windows.
Спасибо @Luke, этот направил меня в правильном направлении.
1

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

Если у вас есть TTF, загрузите его вFontSquirrelвыберите & quot; Эксперт & quot; вариант, а затем сохраняя все параметры по умолчанию. Я полагаю, что исправляет это «Fix Vertical Metrics». но у меня были проблемы при изменении значений по умолчанию, поэтому я рекомендую оставить их как есть.

Теперь высота строки шрифта отображается одинаково на MAC и ПК (у меня это работало).

1

Я был свидетелем той же проблемы с нестандартным шрифтом (Trade Gothic), обслуживаемым FastFonts.

Windows сделала то, что должна. Но все остальные браузеры на компьютерах с Linux, Mac, iOS, Android перенесли эту проблему.

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

Тогда мои стили могли бы переопределить высоту строки, специфичную для устройств, отличных от Windows.

Похожие вопросы