Метод Python Wrap Class

Браузер не добавляет никаких дополнений. Вместо этого буквы (даже прописные буквы), как правило, значительно меньше по вертикали, чем высота шрифта, не говоря уже о высоте строки, которая обычно по умолчанию примерно в 1,2 раза превышает высоту шрифта (размер шрифта).

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

Практические решения можно найти путем экспериментов, но они неизбежно зависят от шрифтов. Вам нужно будет установить высоту линии, существенно меньшую размера шрифта. Следующее, кажется, дает желаемый результат в разных браузерах в Windows, для шрифта Arial:

<style>
span.foo {
    display: inline-block;
    font-size: 50px;
    background-color: green;
    line-height: 0.75em;
    font-family: Arial;
}
span.bar {
    position: relative;
    bottom: -0.02em;
}
</style>
<span class=foo><span class=bar>BIG TEXT</span></span>

Вложенные элементы span используются для перемещения текста по вертикали. В противном случае текст находится на базовой линии, и под базовым уровнем есть место, зарезервированное для descenders (как в буквах j и y).

Если вы посмотрите внимательно (с масштабированием), вы заметите, что есть очень маленькое пространство выше и ниже большинства букв здесь. Я установил вещи так, чтобы буква «G» входила. Она простирается вертикально немного дальше других прописных букв, так как буквы выглядят одинаковыми по высоте. Аналогичные проблемы возникают и с другими буквами, такими как «O». И вам нужно настроить настройки, если вам понадобится буква «Q», поскольку у нее есть спускатель, который немного расширяет базовую линию (в Arial). И, конечно, если вам когда-нибудь понадобится «É» или почти любая диакритическая отметка, у вас проблемы.

11
задан double-beep 18 April 2019 в 17:19
поделиться