Проблема рендеринга в Chrome из-за @ Font-Face

Question

У меня есть крупномасштабное приложение, разработанное с использованием Angular 4, похоже, что проблема рендеринга точно такая же, как упомянуто в этом посте Проблемы рендеринга Angular 2 в Chrome DOM . Когда я перемещаюсь с помощью маршрутизатора из одного компонентак другому, хотя на этот вопрос уже есть ответ, я все еще не могу решить эту проблему.

Моя структура приложения выглядит следующим образом:

app-home --- > app-main --- > app-sub --- > <router-outlet> (contents)

Каждый из этого селектора импортирует один и тот же файл миксинов.который используется для import @font-face, в то время как решение, упомянутое в вышеупомянутом посте, предлагает использовать родительский компонент и использовать ViewEncapsulation.NONE , я не могу сделать то же самое, так как естьиспользование импортированного шрифта face в каждом из этих компонентов app-home, app-main, app-sub и последующих потомках.Когда я удаляю оператор @import из файлов .less, я получаю исключение, подобное

Variable @helvetica-bold is undefined

Есть ли обходной путь, чтобы мои тексты нормально отображались в chrome при маршрутизации от одного компонента к другому.

Answer 1

Необходимо убедиться, что импорт шрифтов вызывается только один раз.Следовательно, вы должны удалить все импортированные шрифты из файла mixin, как вы уже попробовали в своем ответе.

Но вы также должны убедиться, что сами шрифты все еще присутствуют в вашем приложении, и все представления могут получить к ним доступ.Это.Вероятно, у вас есть файл типа «app.less» или что-то подобное, в котором содержатся стили, доступные во всех частях вашего приложения.Вырежьте импорт шрифтов из вашего миксина и вместо этого поместите его в этот файл (убедитесь, что ссылки на пути все еще действительны, возможно, их придется скорректировать).Если у вас еще нет такого файла, вам нужно будет его создать и загрузить один раз при запуске приложения.