Можно ли изменить встроенную высоту текста, а не только высоту строки?

Question

Мне интересно, возможно ли изменить высоту встроенного текста, не растягивая шрифт и не изменяя высоту строки в css.

Возникает проблема, когда у меня есть многострочные ссылки с эффектом наведения: при наведении курсора на линии эффект мигает из-за увеличения высоты строки: Пример

Есть ли другой способ сделать это?

Answer 1

Вы можете увеличить высоту шрифта, используя ниже CSS

transform:scale(2,3); /* W3C */
-webkit-transform:scale(2,3); /* Safari and Chrome */
-moz-transform:scale(2,3); /* Firefox */
-ms-transform:scale(2,3); /* IE 9 */
-o-transform:scale(2,3); /* Opera */

JSFIDDLE

Answer 2

Вы не сможете изменить высоту шрифта в одиночку, но вы можете настроить font-size для работы с установленной высотой строки.

Answer 3

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

Answer 4

Вы можете увеличить высоту, ширину текста, используя свойство transform. Например: transform: scale (0.7, 1.0);

1. Первое значение в свойстве масштаба изменяет ширина буквы / текста.
2. И второе значение изменяет высоту буквы / текста.

 **h1 {
    font-size: 60px;
    transform: scale(0.7, 1.0);
    margin-left: -90px 
}**

Я использовал поля для выравнивания текста

Примечание. Всегда рекомендуется использовать префиксы поставщиков

• -webkit- (Chrome, Safari, более новые версии Opera.)
• -moz- (Firefox)
• -o- (Старые версии Opera)
• -ms- (Internet Explorer)

Пример : -webkit-transform: scale (0.7, 1.0);

Answer 5

http://www.css3.com/css-font-stretch/

Эта команда поможет вам решить проблему

Это тебе поможет!

Answer 6

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

Свойство, на которое я ссылаюсь, является font-size-adjust CSS-свойством.

MDN имеет это, чтобы сказать :

Свойство font-size-adjust CSS указывает, что размер шрифта должен выбираться на основе высоты строчных букв, а не высоты заглавных букв. Это полезно, поскольку разборчивость шрифтов, особенно при небольших размерах, определяется в большей степени размером строчных букв, чем размером заглавных букв.

Как я уже говорил поддержка ужасна . На данный момент Firefox является единственным браузером, который поддерживает его. Начиная с версии 43 Chrome его можно включить под флагом экспериментальных функций веб-платформы.

Answer 7

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

• уменьшение letter-spacing ( Примечание : вы можете использовать отрицательный letter-spacing, если вам нужно.)
• уменьшение font-weight
• и при увеличении font-size

Answer 8

Вы можете увеличить высоту, используя transform: scale (3,5) Высота зависит от второго параметра преобразования: масштаб

<div>
<span>Text</span>  
</div>

div {
text-align:center;
 }

span
{    
display:inline-block;
transform:scale(3,5); 
-webkit-transform:scale(3,1); 
}

http://codepen.io/smarty_tech/pen/ZWvWav