Maison > interface Web > tutoriel CSS > le corps du texte

Comment puis-je créer des polices Web avec des symboles de plan multilingue supplémentaire Unicode à l'aide de l'application Icomoon ?

Mary-Kate Olsen
Libérer: 2024-11-01 14:38:29
original
597 Les gens l'ont consulté

How can I create webfonts with Unicode Supplementary Multilingual Plane symbols using Icomoon App?

Création de polices Web avec des symboles de plan multilingues supplémentaires Unicode

Pour résoudre le problème de l'affichage des caractères du plan Unicode 1 (tels que les symboles de cartes à jouer) sur les systèmes d'exploitation comme Windows et Android, une solution simple consiste à créer des polices Web contenant uniquement les points de code pertinents. Le Webfont Generator de Font Squirrel le permet, mais il ne peut pas actuellement gérer les caractères de ce plan Unicode.

Solution utilisant l'application Icomoon

Heureusement, il existe une solution alternative utilisant le Application Icomoon, qui offre les fonctionnalités suivantes :

  • Récupération d'icônes à partir de polices d'icônes populaires ou téléchargement de polices personnalisées
  • Téléchargement de fichiers SVG sous forme d'icônes
  • Combinaison d'icônes de diverses sources
  • Définition des valeurs hexadécimales Unicode pour des caractères spécifiques
  • Exportation et enregistrement de jeux de polices personnalisés

Création de la police

Pour évitez d'inclure des caractères inutiles dans la police, utilisez l'application Icomoon pour créer une police personnalisée contenant uniquement les points de code souhaités (par exemple, U 1F0A0 à U 1F0DF). Cela permet une taille de police plus compacte.

Utilisation de la police

Dans votre CSS, incluez le code suivant pour incorporer la police de l'icône :

<code class="css">@font-face {
    font-family: 'myfont';
    /* ... Font source URLs ... */
}

.icon {
    font-family: 'myfont', Verdana, Arial, sans-serif; /* Use regular fonts as fallback */
    /* ... Other styling properties ... */
}</code>
Copier après la connexion

Pour afficher une icône dans HTML, utilisez l'une des méthodes suivantes :

  • Méthode 1 : Utilisez directement les caractères UTF-8 pour une meilleure lisibilité.
  • Méthode 2 :Utilisez des codes d'entité pour une prise en charge UTF-8 incertaine.
  • Méthode 3 :Définissez une famille de polices personnalisée pour les icônes dans les éléments HTML.
  • Méthode 4 : Utilisez des codes d'entité et une famille de polices personnalisée pour les icônes dans les éléments HTML.
  • Méthode 5 : Créez des balises HTML distinctes pour chaque icône.
  • Méthode 6 : Utilisez des balises HTML et des codes d'entité distincts pour chaque icône.
  • Méthode 7 : Définissez une famille de polices personnalisée pour les icônes et utilisez les règles CSS avec un sélecteur ':before' pour afficher les caractères (par exemple, .icon-star:before { content: "2605"; }).

Considérations

  • Les méthodes 1, 3 et 5 nécessitent l'utilisation du codage UTF-8 et des caractères spéciaux.
  • Les méthodes 2, 4 et 6 nécessitent des codes d'entité, ce qui peut réduire la lisibilité.
  • La méthode 7 nécessite la prise en charge des « :before selectors » et des séquences d'échappement de caractères UNICODE.

En utilisant l'application Icomoon pour créer une police personnalisée et en implémentant l'une de ces méthodes dans votre code, vous pouvez facilement afficher Unicode. Planez les caractères 1 dans les polices Web, résolvant le problème que vous avez rencontré avec DejaVu Sans.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal