Расчетный размер шрифта возвращается меньше, чем высота div ⇐ Javascript

[Anonymous]

Я пытаюсь поместить немного длинного текста в Div, и я использую следующую функцию JavaScript для расчета требуемого размера шрифта. Контейнер - это фактический Div, который будет отображаться, а измерение - временный див, который взял все свойства контейнера, так что одинаковые поля, прокладки и т. Д.
Однако измерение возвращает меньший размер фонда, но правильный дивизион. Нагружает, он отображает этот меньший шрифт. Но выполнение мягкой перезагрузки (CTRL-R) отображает шрифт правильного размера, идеально подходящий в Div. Выполнение жесткой перезагрузки (ctrl-shift-r) снова перезагружает меньший шрифт. < /P>
Что может вызвать это странное поведение?const introText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

function buildPage() {

var titleTag = document.createElement("title");
var titleText = document.createTextNode("Shrink Text");
titleTag.appendChild(titleText);

var metaLink1 = document.createElement('meta');
metaLink1.httpEquiv = "Content-Type";
metaLink1.content = "text/html; charset=UTF-8";

var metaLink2 = document.createElement('meta');
metaLink2.httpEquiv = "X-UA-Compatible";
metaLink2.content = "IE=edge";

var metaLink3 = document.createElement('meta');
metaLink3.name = "viewport";
metaLink3.content = "width=device-width, maximum-scale=1, user-scalable=1";

var faviconLink = document.createElement('link');
faviconLink.href = "favicon.png";
faviconLink.rel = "shortcut icon";
faviconLink.type = "image/x-icon";

var cssLink = document.createElement('link');
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";

document.head.appendChild(titleTag);
document.head.appendChild(metaLink1);
document.head.appendChild(metaLink2);
document.head.appendChild(metaLink3);
document.head.appendChild(faviconLink);
document.head.appendChild(cssLink);

// cssLink.onload = function() {
buildSplash();
// }

}

function buildSplash() {

var splash = document.createElement('div');
splash.id = 'splash';

const splashIntro = document.createElement('div');
splashIntro.id = 'splash-intro';

const passwordBox = document.createElement('form');
passwordBox.id = 'password-box';
passwordBox.style.backgroundColor = "#f4dbdbff"

splash.appendChild(splashIntro);
splash.appendChild(passwordBox);

document.body.appendChild(splash);

const fontSize = optimumFontSize(introText, splashIntro);
splashIntro.style.fontSize = fontSize + "px";
splashIntro.innerHTML = introText;

}

function optimumFontSize(text, container) {

const measurer = document.createElement("div");
const containerStyles = getComputedStyle(container);
for (let prop of containerStyles) {
measurer.style[prop] = containerStyles.getPropertyValue(prop);
}
measurer.style.display = "hidden";
measurer.style.position = "absolute";
measurer.style.height = "auto";
measurer.innerHTML = text;
document.body.appendChild(measurer);

var fontSize = parseInt(measurer.style.fontSize, 10)
while (measurer.offsetHeight == 0 || measurer.offsetHeight >= container.offsetHeight) {
measurer.style.fontSize = (fontSize--) + "px";
measurer.innerHTML = "";
measurer.innerHTML = text;
}
document.body.removeChild(measurer);

return fontSize;
}

// document.addEventListener('DOMContentLoaded', () => {
buildPage();
//});< /code>
@font-face {
font-family: 'Alex';
src: url('https://fonts.cdnfonts.com/css/alex') format('truetype');
}

body,
html {
margin: 0px;
padding: 0px;
height: 100vh;
}

#splash {
margin: 25 auto;
padding: 5%;
width: 75vw;
height: 75vh;
max-height: 100vh;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
border-radius: 12px;
}

#splash-intro {
box-sizing: border-box;
margin: 0 auto;
width: 96%;
height: 70%;
padding: 2%;
color: black;
font-size: 100px;
text-align: center;
font-family: 'Alex', serif;
overflow-y: auto;
}

#password-box {
box-sizing: border-box;
margin: 0;
padding: 0;
width: 100%;
height: 30%;
text-align: center;
font-family: 'Arial', serif;
}< /code>






< /code>
< /div>
< /div>
< /p>

Обновление: < /strong> < /p>
Проблема решается (больше похоже на обходной путь) < /em>, выполняя расчеты Font с помощью базового Font, подобного ARIAL, затем присвоить SERIF, затем присвоение SERIF. Кажется, работает. < /P>
Все помощь и предложения высоко ценятся. Я оставлю вопрос открытым, если у кого -то еще есть какие -либо идеи.


Подробнее здесь: https://stackoverflow.com/questions/797 ... div-height