Lösung für Fehler beim Laden von Schriftarten, die durch domänenübergreifende Miniprogramm-Schriftartendateien verursacht werden, insbesondere für Android

Schriftartenschema laden

Wenn Sie das Mobiltelefon verwenden, müssen Sie die LoadFontFace-API verwenden, um Schriftartdateien zu laden. Sie können uniapp oder WeChat verwenden. Anweisungen zur Verwendung finden Sie in den offiziellen Website-Anweisungen:uni.loadFontFace(Object object) | Offizielle Uni-App-Website

Wenn Sie die CSS-Lademethode verwenden, können Sie die Ursache des Schriftartfehlers möglicherweise nicht finden. LoadFontFace verfügt jedoch über eine Schnittstelle zum Laden von Fehlern, sodass Sie die Fehlerursache überprüfen können. Im Folgenden wird die Lademethode beschrieben Schriftarten mit CSS. Es wird nicht empfohlen.

@font-face {
    font-family: 'hado-font';
    src: url('https://字体文件链接');
}

Verwenden Sie den API-Code von loadFontFace: Verwenden Sie ihn in der onLunch-Hook-Funktion in app.vue

  // 加载网络字体
  uni.loadFontFace({
    family: 'hado-font',
    global: true,
    source: 'url("https://你的域名字体文件地址")',
    success() {
      console.log('hado-font加载成功')
    },
    fail(err) {
      console.log('hado-font加载失败', err)
    },
    complete() {
      console.log('hado-font字体加载');
    }
  })

Wiederkehr des Problems

Das Laden von Schriftarten ist fehlgeschlagen und wurde nicht wirksam: Dieses Problem tritt hauptsächlich bei Android-Mobil-Applets und H5-Enden auf. Apple-Mobil-Applets scheinen nicht zu existieren, aber der Grund für das Problem ist derselbe, das heißt, es kommt zu domänenübergreifenden Cors: Die Das Folgende ist domänenübergreifend auf der h5-Seite

Auf dem Android-Mobiltelefon wird der folgende Fehler gemeldet: „loadFontFace:fail“, was nicht darauf hindeutet, dass er durch domänenübergreifenden Zugriff verursacht wird. Wenn jedoch kein Problem mit Ihren Schriftartdateien und Links vorliegt, liegt die Ursache darin domänenübergreifend.

 

Lösung

Voraussetzungshinweis: Der Link zur Schriftartdatei muss https sein und die Schriftartdatei muss normal verwendet werden können. Fügen Sie den Domänennamen zur Liste der legalen Domänennamen von downloadFile im Hintergrund des Miniprogramms hinzu. Es wird empfohlen, auch den Link zum hinzuzufügen Fordern Sie eine Liste legaler Domainnamen an.

1. Konfigurieren Sie auf dem Server oder Nginx, um domänenübergreifend zuzulassen. Dazu konfiguriere ich Nginx domänenübergreifend. Suchen Sie die Nginx-Konfigurationsdatei und fügen Sie dann eine Nginx-Konfiguration hinzu:

location ~ .*\.(eot|otf|ttf|woff|woff2|svg)$
{
  add_header Access-Control-Allow-Origin *;
}

Überprüfen Sie, ob die Konfiguration korrekt ist: OK und Erfolg zeigen an, dass kein Problem vorliegt

 sudo nginx -t

Nachdem die Konfiguration in Ordnung ist, müssen Sie die Konfigurationsdatei neu laden und nginx neu starten, damit die Konfigurationsdatei wirksam wird

nginx -s reload

 Dann habe ich es erneut geöffnet und festgestellt, dass die Schriftart erfolgreich geladen wurde: Solange es kein Problem mit h5 gibt, ist das Android-Telefon auch in Ordnung.