Это сработало для меня:
Я пытаюсь приблизиться к размеру шрифта на основе ширины / высоты от установки размера шрифта: 10 пикселей. В основном идея: «Если у меня ширина 20px и высота 11px с размером шрифта: 10px, то каков будет максимальный размер шрифта для математического контейнера с шириной 50px и высотой 30px?»
ответ - система с двойной пропорцией:
{20: 10 = 50: X, 11: 10 = 30: Y} = {X = (10 * 50) / 20, Y = (10 * 30) / 11}
Теперь X - размер шрифта, который будет соответствовать ширине, Y - размер шрифта, который будет соответствовать высоте; возьмите наименьшее значение
function getMaxFontSizeApprox(el){
var fontSize = 10;
var p = el.parentNode;
var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
if(!parent_h)parent_h = 0;
var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
if(!parent_w)parent_w = 0;
el.style.fontSize = fontSize + "px";
var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
if(!el_h)el_h = 0;
var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
if(!el_w)el_w = 0;
//0.5 is the error on the measure that js does
//if real measure had been 12.49 px => js would have said 12px
//so we think about the worst case when could have, we add 0.5 to
//compensate the round error
var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);
fontSize = Math.floor(Math.min(fs1,fs2));
el.style.fontSize = fontSize + "px";
return fontSize;
}
NB: аргумент функции должен быть элементом span или элементом, который меньше, чем родительский, в противном случае, если дети и родитель имеют одинаковые функции ширины и высоты, неудачу