时间戳

首页 > 解决方案 > 字体在 iOS 的 Cordova 应用程序上随机加载

javascript - 字体在 iOS 的 Cordova 应用程序上随机加载

问题描述

我们有一个CordovaWeb 应用程序 (HTML和JS) CSS，由于某些原因，在 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; }
}

标签： javascriptioscordova

解决方案

我猜你的混音可能是这样的：

@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");
}

这是你要找的吗？

推荐阅读