Пользовательские Шрифт Ширина не отображается правильно в Internet Explorer 11

Question

На одном из наших сайтов, мы используем шрифт из typotheque.com, импортируя его следующим образом:

@import url("http://fonts.typotheque.com/WF-XXXXX-XXXXX.css"); 

Шрифт корректно отображается на Chrome и т.п. , В Internet Explorer 11 в Windows 7 шрифт отображается, но его ширина неверна. Кажется, что ширина текста отображается до применяется шрифт.

---

Как следствие, текст получает перекрыт и слова не оборачивать точно:

---

В Chrome, ширина шрифта вычисляются и слова правильно обернуты:

---

Другие вещи, которые мы пытались:

• Мы следовали инструкциям здесь typotheque.com
• Мы удостоверились, чтобы связать файлы CSS до тех файлов JavaScript, as stated here.

Любые намеки или толчки в правильном направлении для решения этой проблемы очень ценятся. Вы можете найти на сайте здесь: http://www.claireundgeorge.ch/fr/

Edit:

• Добавлено word-break: break-all;: без изменений
• Удален всего шрифт устрашающего-материал: без изменений

Answer 1

При сравнении что подсчитано в FireFox с тем, что подсчитано в IE, вы можете видеть, что здесь плохой мальчик.

В IE свойство padding-bottom h2 равно 4px. Когда я сниму это свойство, это выглядит хорошо для меня.

Я не могу загрузить фотографии здесь из-за глупый предел репутации вещи, но я надеюсь, что я descriped это достаточно хорошо ...

Answer 2

У меня также есть Typotheque WebFont + проблема IE. Мое обходное решение на данный момент немного грязное: я использую jquery $ (window) .load, чтобы настроить добавление элементов на 1px, а затем IE правильно перерисовывает шрифт.