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

Я использую 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 я увеличить процент размера шрифта шрифт не будет отображаться, если не загружен его первый компонент. Как только я переключаю страницы, он исчезает. Если я изменю размер окна, он появится.

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

источник

2016-09-11 Josh Elias

Эй, я подозреваю, что у моего Chrome такая же проблема, как и у вас. Есть ли шанс, что вы сможете воспроизвести свою проблему где-нибудь, с чем я могу играть? – AVAVT

Windows 10 OS? –

Мы испытываем такую же ошибку, как и в очень большом приложении. Он начался после обновления до полной (не бета-версии) версии Angular 2 или после обновления до webpack 2 (мы не уверены, что вызвало это). Во всяком случае, мы не нашли решения проблемы, которую вы описываете (какой-то текст не отображается, пока вы не измените размер окна или не измените вручную css с помощью инструментов разработчика). –

Вы можете попробовать выстрелить window.resize с кодом на document.ready как обходные.

источник

2016-09-11 05:56:09 JoostS

Я попробую это спасибо –

@JoshElias это сработало для вас? Благодаря! – JackKalish

Хром использует файл .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 on Chrome

источник

2017-02-23 15:24:26 ZombieChowder

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

источник

2017-02-24 21:00:48 kemsky

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

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

источник

2017-02-28 16:27:43

Попробуйте настроить таргетинг WebKit браузеров, чтобы загрузить шрифт только из 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’); 
    } 
}

In depth article here

источник

2017-03-01 06:37:21 Vishu

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

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

источник

2017-03-01 14:10:43

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

ответ

Смежные вопросы