Недавно я купил пару шрифтов для проекта веб-сайта, и я обнаружил, что, в частности, это совсем не интересно работать. Это называется Goodlife Sans и проблема, с которой я получаю результаты из большого количества белого пространства, включенного выше символов шрифта, то есть шрифт занимает больше вертикального пространства, чем сами глифы.Вертикальное выравнивание текста с использованием CSS, когда шрифт имеет раздражающее пространство над ним
Трудно установить вертикальные поля, поскольку я должен учитывать дополнительное пространство, занимаемое шрифтом. Установка line-height: 1em помогает немного, но высота линии измеряется от самой верхней части шрифта, а это означает, что если текст установлен в блочном элементе с overlow: hidden, то днища букв обрезаются.
Следующие изображения показывают высоту шрифта самостоятельно и с помощью взлома строки. Фон элемента блока для ясности окрашен в красный цвет.
http://i.stack.imgur.com/VAjKz.png
http://i.stack.imgur.com/ffL9l.png
Edit: Вот код
@import url("//hello.myfonts.net/count/2e978a");
@font-face {
font-family: "GoodlifeSans";
src: url("fonts/2E978A_0_0.eot");
src: url("fonts/2E978A_0_0.eot?#iefix") format("embedded-opentype"),
url("fonts/2E978A_0_0.woff2") format("woff2"),
url("fonts/2E978A_0_0.woff") format("woff"),
url("fonts/2E978A_0_0.ttf") format("truetype");
}
p {
font-family: "Goodlifesans";
font-size: 344%;
background: red;
text-align: center;
/*line-height: 1em;*/
margin: 0;
padding: 0;
}
body {
margin: 10px;
font-size: 80%;
}
<body>
<p>This is the test title text</p>
</body>
Короткие фактически модификации самого шрифта (который я считаю, лицензирование мешает мне делать в любом случае) является там изящное решение этой проблемы? Я действительно не хочу включать родительский элемент с отрицательным полем каждый раз, когда я использую этот шрифт.
Можете ли вы опубликовать код, пожалуйста? –