Шрифты загружаются случайным образом в приложении Cordova для iOS

Question

У нас есть веб-приложение Cordova (HTML, JS и CSS), и по некоторым причинам на устройствах класса High End, таких как iPhone XS и XR, шрифты иногда не загружаются.

Я загружаю приложение, и шрифты не загружаются, я минимизирую приложение, возвращаюсь снова, и шрифты в порядке.

Иногда я открываю приложение и все нормально! На iPhone, 8, 7, 6 и SE мы не получаем этих ошибок вообще. Это совершенно случайно.

Я меняю порядок импортирования файла SaSS и происходит то же самое

Вот как мы называем фонд через SaSS:

    @include font-face("dosisbold", "../fonts/dosis/dosis-bold-webfont", $__file-formats: woff2 woff ttf);
    @include font-face("dosissemibold", "../fonts/dosis/dosis-semibold-webfont", $__file-formats: woff2 woff ttf);
    @include font-face("dosisextrabold", "../fonts/dosis/dosis-extrabold-webfont", $__file-formats: woff2 woff ttf);

@mixin font-face( $__font-family, $__file-path, $__weight: normal, $__style: normal, $__file-formats: eot woff2 woff ttf svg ) {

    // Possible font formats
    $formats: (
        eot   : "#{$__file-path}.eot?#iefix" format("embedded-opentype"),
        woff2 : "#{$__file-path}.woff2" format("woff2"),
        woff  : "#{$__file-path}.woff" format("woff"),
        ttf   : "#{$__file-path}.ttf" format("truetype"),
        svg   : "#{$__file-path}.svg##{$__font-family}" format("svg")
    );


    // Creates the font sources
    $fonts-src: ();
    @each $formats_key, $formats_values in $formats {
        @if index($__file-formats, $formats_key) != null {
            $fonts-src: append($fonts-src, url(nth($formats_values, 1)) nth($formats_values, 2), comma);
        }
    }


    // Outputs the @font-face rule
    @font-face { font-family: $__font-family; font-weight: $__weight; font-style: $__style; src: $fonts-src; }
}

Answer 1

Полагаю, что ваше микширование может выглядеть следующим образом:

@mixin font-face($style-name, $filepath, $category:"") {

    @font-face {
        font-family: "#{$style-name}";
        src: url($filepath + ".woff2") format('woff2'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf")  format('truetype'), ;
    }

    %#{$style-name} {
        font: {
            @if $category == "" {
              family: "#{$style-name}";
              weight: normal;
            }
            @else {
              family: "#{$style-name}", #{$category};
            }
        }
    }
}

$family: 'dosis';
$file: 'dosis-bold-webfont';
$filepath: "fonts/" + $family + "/" + $file;
@include font-face('dosis', $filepath , 'serif');

Это приведет к:

@font-face {
  font-family: "dosis";
  src: url("fonts/dosis/dosis-bold-webfont.woff2") format("woff2"), url("fonts/dosis/dosis-bold-webfont.woff") format("woff"), url("fonts/dosis/dosis-bold-webfont.ttf") format("truetype");
}

Это то, что вы искали?