HTML CSS Уменьшить размер текста в %

146

17 ноября 2019, 15:30

Допустим есть блок a с font-size: 13px; затем блок b с 12.5px и c со 100%. Возможно ли увеличить / уменьшить размер текста в них без прямого редактирования, то есть к примеру прибавить 10% ко всем, чтобы в a вышло 13.13px, в блоке c 110% и т.д. ? Чтобы вышло на подобии text-transform: scale(1.1);

Answer 1

Используйте единицы измерения em. Почитать можно тут.

.c1 { 
font-size: 13px; 
} 
.c2 { 
font-size: 26px; 
} 
.v1 { 
color: red; 
font-size: 1em; 
} 
.v2 { 
color: green; 
font-size: 1.3em; 
}

<div class="c1"> 
<span class="v1">Текст 1 к 1</span> 
<span class="v2">Текст +30%</span> 
</div> 
 
<div class="c2"> 
<span class="v1">Текст 1 к 1</span> 
<span class="v2">Текст +30%</span> 
</div>

По сути, вы задаете внутренним блокам значения, где 1em - это размер родителя, а 1.15em - +15% к размеру родителя. Соответсвенно, изменив размер родителя, все внутренние блоки изменятся тоже.

Answer 2

Используйте em. 1em - 100% , 1.01em это уже 101% , думаю суть понятна. Одна сотая это 1%