L'applet Android et ios utilisent des polices personnalisées pour résoudre le problème selon lequel Android ne prend pas effet

Présentation du site officiel

• Le fichier loadFontFace du site officiel peut également réaliser l'introduction et l'utilisation de polices personnalisées. Si vous avez besoin de l'utiliser dans app.js, n'oubliez pas d'ajouter global: true, sinon app.js ne sera pas exécuté.
• Contexte : dans le projet, toutes les polices doivent être modifiées en Arial, ici j'utilise font-face pour importer des fichiers de polices externes

Préparer les fichiers de police

• Ici, je prépare les fichiers OTF, que je veux de l'interface utilisateur.
• Téléchargez le fichier sur votre propre serveur et générez un lien d'accès.
• Utiliser dans app.wxss

@font-face {
    
    
  font-family: 'SimSun700';
  src: url('链接地址必须是https的')format('truetype');
}

.sim-sun700 {
    
    
  font-family: 'SimSun700' !important;
}

• Définissez le nom de la classe de css, afin que vous puissiez utiliser le nom de la classe directement lorsque vous en avez besoin

test

• Après avoir défini la police, vous constaterez que la police est valide sur le simulateur et le téléphone mobile ios, mais que la police n'est pas valide sur Android.

Débogage Android pour résoudre le problème d'échec de police

• En utilisant la méthode officielle de loadFontFace, on constate qu'il n'est pas facile à utiliser sur Android. Cependant, il y a un rappel de la fonction d'échec dans la méthode du site Web officiel, et il s'avère que la police n'a pas été chargée avec succès. Il y a une explication sur le site officiel : le lien de la police doit être sous la même origine, ou le support cors est activé, et le nom de domaine de l'applet est servicewechat.com
• On suppose que cela devrait être le problème de la même politique d'origine, laissez l'arrière-plan aller au serveur pour ouvrir la solution inter-domaines.

//nginx 配置，亲测可用
location ~* \.(eot|ttf|woff|woff2|svg)$ {
    
    
    add_header Access-Control-Allow-Origin *;
}

• Après avoir configuré le code ci-dessus, l'importation de la police Android à l'aide de font-face et loadFontFace est effective.