@ Проблемы с загрузкой шрифтов в сборке Android Ionic Framework

Question

@ Проблемы с загрузкой шрифтов в сборке Android Ionic Framework

0

Я столкнулся с очень странной проблемой при разработке приложения в Ionic Framework.

Я импортирую @font-face в мое приложение Ionic Framework, а затем запускаю приложение на устройстве Android (Galaxy SIII). Как вы можете видеть, шрифт (Montserrat) загружается повсюду, кроме под изображением (и на начальном экране). Они загружаются в режиме предварительного просмотра в Интернете. Они также загружаются штрафом при использовании системного шрифта ("Робот" в этом случае). Мне интересно, вызвано ли это тем, что шрифты не были предварительно загружены для немедленного использования, а DOM отображает до того, как он загрузит шрифт на эти конкретные элементы.

Я установил фон в красный цвет, и появится красный блок, поэтому фактический контент доставляется, но он просто выглядит как текст не рендеринг. Текст представляет собой простой формат HTML. Но я также ввел ее через выражение, чтобы понять, не имеет ли это никакого эффекта. Это не так. Импортированный шрифт для ионных значков также работает безупречно.

Вот что я чувствую, это лучший намек... Если я провёл экран, вуаля, текст волшебным образом появится. После этого больше ничего не происходит.

Я включаю в себя мой шрифт CSS @font-face на всякий случай, когда я что-то пропустил...

  @font-face {
    font-family: 'montserratregular';
    src: url('montserrat-regular-webfont.eot#montserratregular');
    src: url('montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('montserrat-regular-webfont.woff2#montserratregular') format('woff2'),
         url('montserrat-regular-webfont.woff#montserratregular') format('woff'),
         url('montserrat-regular-webfont.ttf#montserratregular') format('truetype'),
         url('montserrat-regular-webfont.svg#montserratregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }

* {
      font-family: 'montserratregular', 'Helvetica Neue', 'Arial', sans-serif!important;
      font-weight: normal !important;
  }

... и соответствующий HTML-код

<div ng-click="testTime()" class="fullwidth-container start-test begin" ng-if="reactionFrame === 0">
<img src="img/touch.svg" class="tap-icon">
<h1 class="test-prompt">Tap to begin</h1>
<h3>Please follow the instructions on the next screen as quickly as possible.</h3>
</div>

Кто-нибудь знает, почему это может произойти, и если да, то каким будет решение?

Jeff Callahan 19 авг. 2015, в 06:02

Источник

1

Можете ли вы опубликовать свой код в GitHub или Codepen или Fiddle, чтобы посмотреть
Anil kumar 19 авг. 2015, в 03:42
0

@Anilkumar, извините, я пропустил это, но в итоге выяснил, что является причиной проблемы, хотя я не уверен, почему это именно проблема. Подробнее в моем ответе ниже.
Jeff Callahan 21 авг. 2015, в 03:49
0

Хм, хорошо, когда это возможно для вас, пожалуйста, загрузите ваш код в github или codepen, чтобы я попытался выяснить это @Jeff Callahan
Anil kumar 21 авг. 2015, в 03:58

Показать ещё 1 комментарий

Теги:

android

ionic-framework

angularjs

css

font-face

1 ответ

Ещё вопросы

Можете ли вы опубликовать свой код в GitHub или Codepen или Fiddle, чтобы посмотреть
@Anilkumar, извините, я пропустил это, но в итоге выяснил, что является причиной проблемы, хотя я не уверен, почему это именно проблема. Подробнее в моем ответе ниже.
Хм, хорошо, когда это возможно для вас, пожалуйста, загрузите ваш код в github или codepen, чтобы я попытался выяснить это @Jeff Callahan

Jeff Callahan · Accepted Answer · 2015-08-21T02-45-00.000Z

После многих проб и ошибок я закончил трассировку проблемы обратно на css, включенную в таблицу стилей Ionic по умолчанию. В частности, эти стили (исключая этот блок, он исправил проблему - никогда не был изолирован только одним стилем):

.content {
  position: relative; }

    .scroll-content {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      margin-top: -1px;
      padding-top: 1px;
      margin-bottom: -1px;
      width: auto;
      height: auto; }

    .menu .scroll-content.scroll-content-false {
      z-index: 11; }

    .scroll-view {
      position: relative;
      display: block;
      overflow: hidden;
      margin-top: -1px; }

Кажется, что состояние прокрутки вызывает задержку загрузки шрифта. Вместо изменения файла Ionic.css я отключил прокрутку на <ion-content> и <ion-pane>, выполнив <ion-content scroll="false"> и <ion-pane scroll="false">, соответственно. Текст теперь загружается как следует.