Увеличить размер шрифта поочерёдно

262

14 мая 2017, 23:44

Как увеличить размер шрифта поочерёдно? Например, у меня есть 4 тега <p> с текстом внутри. Я хочу, чтобы у первого элемента размер шрифта был 10, у второго 12, и третьего 14 и так далее. Чтобы для каждого следующего элемента шрифт увеличивался на 2.

Answer 1

Поддерживаю ответ shugich.

Предлагаю еще вариант ниже. Особенности:

1) без JS;

2) размер шрифта указан в em, а не в px;

3) лаконичный CSS;

4) минус — нельзя указать шаг изменения в px, потому что размер шрифта вложенного блока здесь вычисляется в em, т.е. по сути, в процентах от размера шрифта родителя;

5) еще минус — в таком варианте ноль семантики. Поэтому если у вас реально абзацы текста, а не просто оформление, то так делать плохо.

body {font-size: 16px;} 
div {font-size: 1.1em;}

<div> 
Lorem Ipsum is simply dummy text 
  <div> 
  Lorem Ipsum is simply dummy text 
    <div> 
    Lorem Ipsum is simply dummy text 
      <div> 
      Lorem Ipsum is simply dummy text 
        <div> 
        Lorem Ipsum is simply dummy text 
          <div> 
          Lorem Ipsum is simply dummy text 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

Answer 2

Самый простой способ:

p { 
  font-size: 12px; 
} 
p:nth-child(2) { 
  font-size: 14px; 
} 
p:nth-child(3) { 
  font-size: 16px; 
} 
p:nth-child(4) { 
  font-size: 18px; 
}

<p>Lorem Ipsum is simply dummy text</p> 
<p>Lorem Ipsum is simply dummy text</p> 
<p>Lorem Ipsum is simply dummy text</p> 
<p>Lorem Ipsum is simply dummy text</p>

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

Есть решение на JavaScript:

function formatText(fontSize, step) { 
  var paragraphs = document.querySelectorAll('p'); 
  paragraphs.forEach(function(p) { 
    p.style.fontSize = fontSize + 'px'; 
    fontSize = fontSize + step; 
  }); 
} 
formatText(12, 2)

<p>Lorem Ipsum is simply dummy text</p> 
<p>Lorem Ipsum is simply dummy text</p> 
<p>Lorem Ipsum is simply dummy text</p> 
<p>Lorem Ipsum is simply dummy text</p>

У этого решения тоже есть минус. Текст обработается только после загрузки страницы. Может произойти неприятный «скачок».

Я еще представляю, что можно до загрузки страницы формировать необходимые размеры на PHP (если вы пользуетесь PHP, конечно). Но в таком случае надо смотреть контекст.