@ Font-face и неправильное значение атрибута offsetWidth - PullRequest
Новая
       14

@ Font-face и неправильное значение атрибута offsetWidth

8 голосов
/ 14 мая 2011

Я столкнулся с этой проблемой в последней версии Chromium. После создания первого элемента с использованием семейства шрифтов, встроенного через @ font-face , мне передают неправильные значения offsetXyz. К тому времени, когда скрипт будет выполнен, хук window.onload уже будет запущен, и, таким образом, шрифт уже будет загружен.

Вот как выглядит скрипт (схематично): 

var e = document.createElement("span");
e["innerText" in e?"innerText":"textContent"] = "fooBar";
e.style.fontFamily = "fontFaceEmbeddedFontFamily";
document.body.appendChild(e);

alert(e.offsetWidth);   // Returns two different values
setTimeout(function() {
  alert(e.offsetWidth); // The latter being correct
}, 1000);

Значение обновляется "тихо". Кажется, нет никакого способа ждать, пока он исправит значения, но просто setInterval-проверить значение и затем отобразить решение. Мне не нравятся такие грязные вещи.

У кого-нибудь есть предложения, как поступить? Происходит только в том случае, если src: local(" ... ") не указан, следовательно, проблема связана с загружаемым шрифтом.

Ответы [ 2 ]

1 голос
/ 19 июня 2011

Вы уже дали ответ сами.Установите src: local(), и этого не произойдет - как правило, когда вы используете @font-face, придерживайтесь пуленепробиваемого синтаксиса , поскольку он был создан для преодоления проблем с браузером, таких как тот, с которым вы сталкиваетесь здесь.

0 голосов
/ 22 января 2012

Я знаю, что почти год, но у меня тоже возникла эта проблема, и мне потребовалось полдня, чтобы выяснить причину.Вы можете просто подождать, пока загрузится вся страница, вместо того, чтобы использовать тайм-аут.src: local() не имеет никакого значения для меня.Таким образом, вы можете использовать: 

<body onload="finished()">

или в jQuery: 

$(window).load(
    function() {
        // this only will execute when the entire page is loaded.
    }
);
...