Веб-компонент трафарета выглядит странно, когда страница начинает загружаться, а импортированные шрифты не работают должным образом - PullRequest
Новая
       11

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

0 голосов
/ 02 сентября 2018

Я клонировал хранилище:

https://github.com/ionic-team/stencil-component-starter

и на его основе я создал следующий репозиторий:

https://github.com/napolev/web-components

Проверьте демо здесь:

https://napolev.github.io/web-components/

Помимо этого я создал 2 пользовательских web-components:

{<thumb-01-product />, <thumb-02-product />}

Вот использование для каждого из них: 

<thumb-01-product
    thumb="https://placeimg.com/900/400/1/1"
    name="PICTURE 01"
    button-text="PURCHASE"
></thumb-01-product>

<thumb-02-product
    thumb="https://placeimg.com/215/170/2/1"
    description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    button-text="READ MORE"
    url="https://www.google.com/search?num=5&q=image+1"
    target="_blank"
></thumb-02-product>

и вот как они выглядят:

enter image description here

У меня 2 проблемы с этими 2 компонентами.

Выпуск 1:

В самом начале, когда страница начинает загружаться (в самую первую секунду), она показывает данные, указанные в тегах HTML моих компонентов без форматирования, и это не очень хорошо выглядит, как вы можете видеть на следующем изображение:

enter image description here

Выпуск 2:

Я импортирую два внешних шрифта: {Open Sans (из Google Fonts) и Font Awesome}

Пожалуйста, проверьте самое начало этого файла:

https://github.com/napolev/web-components/blob/master/src/components/thumb-01-product/thumb-01-product.scss

Моя проблема в том, что на Google Chrome оба шрифта не работают, как вы можете видеть на следующем изображении:

enter image description here

С другой стороны, на Mozilla Firefox, Internet Explorer и Microsoft Edge шрифты работают правильно, как вы можете видеть на первом предварительном просмотре.

Есть идеи, как решить эти проблемы?

Спасибо!

...