Шрифт не отображается до изменения размера окна в хроме

Я использую angular2 и webpack. Загрузите мой шрифт так:

@font-face {
  font-family: 'bpmonoregular';
  src: url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.eot');
  src: url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.eot?#iefix') format('embedded-opentype'),
  url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.woff') format('woff'),
  url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.ttf') format('truetype'),
  url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.svg#bpmonoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

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

Это происходит только в chrome

Ответ 1

Вы можете попытаться запустить window.resize с кодом на document.ready как обход.

Ответ 2

Попробуйте загрузить шрифт с помощью статического css (тега стиля или ссылки) вместо стилей компонентов.

Ответ 3

Chrome использует файл .svg в @font-face kit, и его не следует называть последним. Попробуйте переустановить свой код следующим образом:

@font-face {
  font-family: 'bpmonoregular';
  url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.svg#bpmonoregular') format('svg'),
  url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.woff') format('woff'),
  url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.ttf') format('truetype'),
  src: url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.eot');
  src: url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

Поместите url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.svg#bpmonoregular') format('svg') в первую строку.

Основное решение было найдено здесь на этом веб-сайте: Font Face Rendering в Chrome

Ответ 4

Попробуйте использовать его без

 font-weight: normal;
  font-style: normal;

Ответ 5

Попробуйте настроить веб-браузеры для загрузки шрифта только из источника svg

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: ‘bpmonoregular’;
    src: url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.svg#bpmonoregular') format(‘svg’);
  }
}

Подробный текст здесь

Ответ 6

Попробуйте преобразовать шрифт как .woff и импортировать его как:

@font-face {
    font-family: "FontName";
    font-weight: normal;
    font-style: normal;
    src: url("/persist/fonts/FontName.woff") format("woff");
}