Как изменить размер шрифта в CSS / JS, чтобы иметь определенные поля по бокам относительно его контейнера? - PullRequest
Новая
       0

Как изменить размер шрифта в CSS / JS, чтобы иметь определенные поля по бокам относительно его контейнера?

0 голосов
/ 15 февраля 2020

Я могу сделать шрифт, относящийся к размеру окна просмотра (если я просто поместил его в тело), ​​с помощью 200vh, et c. Но как мне сделать так, чтобы он идеально подходил к контейнеру? То есть я хочу, чтобы на каждой стороне текста было определенное поле, например 8% ширины, и чтобы текст заполнял оставшиеся 84%. Как я могу сделать это с HTML / JS / CSS? 

body {
  font-size: 70vh;
  display: flex;
  text-align: center;
  justify-content: center;
}
hello

1 Ответ

1 голос
/ 15 февраля 2020

Этот подход не идеален по пикселям, но он будет иметь приблизительный результат.
Обтекание текста, например <span>, позволяет получить начальную ширину текста и размер шрифта, который будет использоваться для рассчитайте окончательный размер шрифта, используя также ширину контейнера. 

window.addEventListener('resize', calcFontSize);

var textEl = document.querySelector('span'),
textElParent = textEl.parentNode,
textFontSize = parseFloat(window.getComputedStyle(textEl, null).getPropertyValue('font-size')),
textWidth = textEl.clientWidth,
spaceToFill;

function calcFontSize() {
  spaceToFill = textElParent.clientWidth;
  textEl.style.fontSize = (spaceToFill * textFontSize)/textWidth + "px";
}

calcFontSize();
html {
  background-color: #fff;
}
body {
  background-color: #f3f3f3;
  display: flex;
  text-align: center;
  justify-content: center;
  margin: 0 8%;
}
<body>
  <span>hello</span>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...