Определение ширины подключаймого шрифта в iphone

257
11 июля 2017, 20:35

Столкнулся с нетривиальной проблемой причиной которой стали подключаемые шрифты и ios.

На сайте используется функция для ресайза текста под размер адаптивного свг и выглядит она так:

function TextSize(inValue, defaultFontSize, maxFontSize, minFontSize, font) {
            $dummy = $("#dr1").css("font-family", font).html(inValue);
            console.log($dummy.css("font-family") + " / " + $dummy.css("font-size") + " / " + $dummy.width() + " / " + self.SvgWidth);
            if($dummy.width() < self.SvgWidth) {
                if(parseInt($dummy.css("font-size")) <= maxFontSize) {
                    $dummy.css("font-size", (parseInt($dummy.css("font-size")) + 1));
                    if($dummy.width() > self.SvgWidth) {
                        if((parseInt($dummy.css("font-size")) - 1) > minFontSize) {
                            $dummy.css("font-size", (parseInt($dummy.css("font-size")) - 1));
                            return parseInt($dummy.css("font-size"));
                        }
                        else {
                            return minFontSize;
                        }
                    }
                    else {
                        TextSize(inValue, defaultFontSize, maxFontSize, minFontSize, font);
                        if($dummy.width() > self.SvgWidth) {
                            return false;
                        }
                        else {
                            return parseInt($dummy.css("font-size"));                       
                        }
                    }
                }
                else {
                    return defaultFontSize;
                }
            }
            else {
                $dummy.css("font-size", (parseInt($dummy.css("font-size")) - 1));
                if($dummy.width() > self.SvgWidth) {
                    TextSize(inValue, defaultFontSize, maxFontSize, minFontSize, font);
                    if($dummy.width() > self.SvgWidth) {
                        return false;
                    }
                    else {
                        if(parseInt($dummy.css("font-size")) > minFontSize) {
                            return parseInt($dummy.css("font-size"));
                        }
                        else {
                            return minFontSize;
                        }
                    }
                }
                else {
                    if(parseInt($dummy.css("font-size")) > minFontSize) {
                        return parseInt($dummy.css("font-size"));
                    }
                    else {
                        return minFontSize;
                    }
                }
            } 
        }

В функцию передаются сам текст, стандартный размер шрифта, максимальный и минимальный размер, а так же тип (название) шрифта. Циклично сравнивая текущий размер текста и допустимый размер (self.SvgWidth) на примере скрытого блока, уменьшает и увеличивает размер шрифта в поисках оптимального значения, а затем возвращает его.

Но только на iphone 5-6 существует баг из-за которого при первом вызове функции она возвращает некорректный размер шрифта. Причем появляется баг только при взаимодействии с подключаемым шрифтом, при взаимодействии со стандартным все ок.

сonsole.log из функции на iphone 6s+ (весь не влез, но пр

console.log из функции на пк и других девайсах)

Скорее всего ios как-то странно подключает шрифт в момент его использования. Что посоветуете, как исправить?

READ ALSO
Почему анимация отменяет transform?

Почему анимация отменяет transform?

ПриветИспользую для вертикального центрирования элемента свойства:

206
Как сделать из &lt;input&gt; dropdown?

Как сделать из <input> dropdown?

ЗдравствуйтеИспользую Bootstrap-4 и есть задача сделать из выпадающий список

220
Наезд блоков друг на друга в bootstrap

Наезд блоков друг на друга в bootstrap

Попробовал сегодня впервые bootstrapИ сразу впал в недоумение

538