Existe-t-il un moyen plus rapide de charger les polices chinoises/japonaises personnalisées en HTML/CSS que @ font-face?

Question

Je travaille sur un site web principalement en langue chinoise mais avec des phrases et phrases japonaises disséminées tout autour. Il est important pour moi de maintenir un style unifié global dans les polices, tout en faisant attention à la façon dont les caractères japonais sont affichés. C'est-à-dire, je ne suis pas autorisé à simplement substituer ces caractères japonais avec leurs homologues proches en chinois. À cette fin, j'utilise actuellement différentes polices personnalisées pour le chinois et le japonais séparément. Ce sont des polices OTF visuellement similaires spécifiquement conçues pour le chinois ou le japonais seulement. Je les charge à travers la commande CSS @font-face. Cependant, ces fichiers de polices .otf sont de plusieurs Mo de taille et prennent quelques secondes, même jusqu'à quelques minutes à charger. De plus, cela se produit pour chaque nouvelle page Web que l'utilisateur ouvre. Je me demande s'il existe un moyen plus rapide de charger ces polices. Votre aide est tres apprecie!

(Attention: Je suis un débutant.)

post-scriptum Mon site Web s'adresse aux téléspectateurs de la Chine continentale afin que les polices de google ne soient pas une bonne solution ici.

Answer 1

Je fini par utiliser la fonctionnalité "dynamique subsetting" fournie par Adobe Typekit. Il génère dynamiquement des fichiers de polices qui incluent uniquement des caractères utilisés sur la page Web et les envoie via son réseau de diffusion de contenu. Tout ce que je devais faire était de créer un compte, sélectionner les polices de leur site Web, et inclure des codes pour les fichiers javascript externes dans mon code HTML. Un inconvénient de cette méthode est que je ne peux plus utiliser mes propres polices, et la gamme de polices chinois/japonais fournies par Adobe Typekit semble limitée. Heureusement, j'étais capable de trouver les polices qui répondent à mes besoins. Aussi, j'ai encore un certain degré de FOUT, mais je suppose que ce n'est pas un gros problème pour moi actuellement. Toujours dans l'espoir d'une solution open-source à l'avenir, cependant.

Answer 2

Vous pouvez utiliser WebFontLoader pour améliorer les performances de @ font-face. Il est développé par Google et Typekit. Vous pouvez l'utiliser avec leurs services et aussi pour les polices auto-hébergées.

1. Incluez les polices dans css en utilisant @ font-face, comme vous l'avez déjà fait.

   @font-face { 
       font-family: 'My Font'; 
       src: ...; 
   } 
   @font-face { 
       font-family: 'My Other Font'; 
       src: ...; 
   } 
   

2. Ajouter ce code au bas de votre page principale, juste avant </body>

   <script> 
       WebFont.load({ 
       custom: { 
        families: ['My Font', 'My Other Font'] 
       } 
       }); 
   </script>