Исправить размер шрифта шрифта с помощью CSS

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

Этот пользовательский шрифт (FF DIN) имеет естественную вертикальную внецентровую высоту линии, что заставляет меня поместить некоторый хак-хаус, чтобы компенсировать верхнее пространство на элементе, таком как кнопка и вход.

Пример: шрифт в зеленом (Helvetica Neue) правильно выровнен, где пользовательский шрифт, который мы используем (FF DIN), находится вертикально вне центра:

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

Спасибо.

Ответ 1

В конце концов, я в конечном итоге вручную исправил шрифт, используя справку из этого ответа:

Пользовательское вертикальное выравнивание шрифта UIButton

Ответ 2

Здесь речь идет не о высоте строки, а о вертикальном размещении глифов, в частности о местоположении базовой линии текста. Это то, что решил дизайнер шрифтов; дизайнер рисует глифы и помещает их в квадрат em, концептуальное устройство, которое имеет высоту, равную (или определенную) высоту шрифта. В частности, дизайнер решает, сколько места находится ниже базовой линии, с одной стороны, и выше высоты заглавных букв, с другой. Обычно эти пространства равны или почти равны, но они не обязательно должны быть. Если они существенно отличаются, предполагаемое использование шрифта, вероятно, является особенным и не включает использование, как показано на изображении. Это говорит о том, что выбор шрифта должен быть пересмотрен, но позволяет предположить его фиксированный.

Существует несколько способов решения проблемы. Если над буквами слишком много места, уменьшение line-height делает его меньше, но оно также влияет на пространство выше. Верхнее дополнение помогает в определенном смысле, но увеличивает общую высоту, занимаемую элементом. Вы также можете играть с vertical-align, но это влияет на высоту строк.

Вероятно, самый простой подход - использовать относительное позиционирование, предполагая, что проблема связана с текстом с одним слоем. Относительное позиционирование просто перемещает контент определенным образом, не влияя на расположение в противном случае. Для этого вам понадобится обертка, т.е. Элемент, содержащий текст, так что вы можете вытеснить только текст, а не фон.

В следующей демонстрации используется шрифт Google, Candal, который имеет аналогичную проблему, но в другом направлении: базовый уровень слишком низок. Модификации этого подхода для удовлетворения исходной проблемы должны быть очевидными, но точное количество перемещения необходимо определить эмпирически (или из информации, извлеченной из файла шрифта с помощью инспектора шрифтов). Разумеется, здесь следует использовать блок em, даже если вы задаете размер шрифта в пикселях или точках (так что код не нужно менять, если размер шрифта изменится когда-нибудь).

<link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet'>
<style>
div { font-family: Candal }
div { background: lightgreen; font-size: 200%}
</style>
<p>What we have got initially:
<div>BRAKE HOSE AND AIR CHAMBER</div>
<p>Reducing line height (even "setting solid") does not really help:
<div style="line-height: 1">BRAKE HOSE AND AIR CHAMBER</div>
<p>But displacing the text upwards by 0.1em does:
<div><span style="position: relative; bottom: 0.1em">
BRAKE HOSE AND AIR CHAMBER</span></div>

Ответ 3

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

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

p {

    vertical-align: text-bottom;
    line-height: 1.5;

}

Ответ 4

У меня была эта проблема и в прошлом, даже разные браузеры дали разные высоты линии! Я думаю, что это происходит при использовании генератора webfont и может быть исправлено только с использованием различной высоты строки, насколько мне известно.

Вы попробовали fontsquirrel? Есть несколько вариантов с разными результатами.

http://everythingfonts.com/font-face

http://www.font2web.com/

http://www.fontsquirrel.com/tools/webfont-generator

https://www.web-font-generator.com/

Ответ 5

В Chrome я обнаружил, что если вы используете декларацию font-face. Вы можете решить проблему с высотой строки с помощью вызова стиля = "" в HTML или просто объявления высоты строки ПОСЛЕ объявления шрифта в вашем CSS.

Я думаю, что Chrome просто не знает, как рассчитать высоту линии, пока не отобразит пользовательский шрифт.