Choisir une police arabe pour les sites et applications : Guide pour les développeurs

Choisir une police arabe pour les sites et applications

Pourquoi la typographie arabe sur le web est-elle plus difficile que l'anglaise ?

Lors de la configuration d'une interface arabe, testez la direction de l'écriture, le rendu des caractères et les diacritiques sur la page réelle :

Polices pouvant être disponibles sur certains systèmes

Des polices comme Arial et Times New Roman peuvent être disponibles sur certains systèmes, mais ne supposez pas qu'une police spécifique existe pour tous les visiteurs. Ajoutez une liste de polices de secours et testez l'apparence du texte en l'absence de la police principale.

Pour Windows :

Exemples de polices arabes à tester

Ce sont des exemples pour comparaison et non un classement des meilleures ; vérifiez la licence et la couverture linguistique de chaque police auprès de sa source.

Méthodes d'intégration des polices arabes dans le site

Méthode 1 : Utiliser Google Fonts

```html

<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">

```

```css

body {

font-family: 'Cairo', sans-serif;

text-align: right;

}

```

Méthode 2 : Intégrer une police personnalisée (@font-face)

```css

@font-face {

font-family: 'MyArabicFont';

src: url('/fonts/my-font.woff2') format('woff2'),

url('/fonts/my-font.woff') format('woff');

font-display: swap;

}

```

Méthode 3 : Polices via CDN

La police peut être chargée depuis un service externe ou hébergée sur votre site. Un CDN seul ne garantit pas une meilleure vitesse ; comparez le temps de chargement, la confidentialité et la fiabilité, et consultez les termes de la licence.

Règles RTL pour les développeurs

Configuration HTML :

```html

<html lang="ar" dir="rtl">

```

L'attribut `dir` détermine la direction du texte en HTML ; utilisez-le au niveau du document ou de l'élément selon le contenu.

Configuration CSS :

```css

/* Paramètres globaux */

body {

text-align: right;

font-family: 'Cairo', sans-serif;

}

/* Pour le contenu anglais sur un site en arabe */

.english-content {

text-align: left;

}

```

Définissez `dir="ltr"` sur l'élément de contenu anglais lui-même au lieu de compter uniquement sur le style CSS.

Tester Flexbox avec RTL :

```css

.container {

display: flex;

}

```

Définissez `dir="rtl"` sur le conteneur en HTML, puis testez l'ordre et la direction des éléments sur l'interface réelle.

Impact de la police sur la vitesse du site

Taille du fichier et indicateurs de performance :

Une plage de taille fixe ne peut pas être généralisée à un format entier ; la taille change selon la police, le nombre de graisses, les caractères et la méthode de préparation du fichier. Vérifiez la taille réelle du fichier et mesurez son impact sur la page qui l'utilise.

Le choix du format dépend des navigateurs cibles, de la licence et des outils de génération. Comparez les tailles de fichiers résultantes au lieu de supposer qu'un format est le plus petit dans chaque cas.

Techniques d'optimisation de la performance :

#### 1. Choisir une stratégie d'affichage de police

`font-display` détermine le comportement d'affichage du texte pendant le chargement de la police. Consultez les options et choisissez ce qui convient à l'interface ; l'exemple suivant utilise `swap` et ne représente pas le réglage le plus approprié pour chaque site.

```css

@font-face {

font-family: 'MyFont';

src: url('font.woff2') format('woff2');

font-display: swap; /* Afficher immédiatement le texte de remplacement, puis le remplacer au chargement de la police */

}

```

#### 2. Précharger uniquement les polices critiques

```html

<link rel="preload" href="/fonts/arabic-font.woff2" as="font" type="font/woff2" crossorigin>

```

#### 3. Réduire les caractères si nécessaire

Un sous-ensemble de caractères peut être préparé pour réduire ce qui est chargé, à condition que la licence le permette et que l'ensemble inclue toutes les lettres et diacritiques dont le contenu a besoin.

Vérification du support de l'arabe par la police

Vérification de l'état de chargement :

```javascript

console.log(document.fonts.check('16px "MyArabicFont"'));

```

Cette fonction affiche l'état de chargement de la police, mais elle ne prouve pas à elle seule que chaque caractère arabe ou signe diacritique y est présent. Inspectez visuellement le texte, y compris les ligatures et les diacritiques, et comparez-le avec une police de secours.

Caractères de base pour le test :

"ب ت ث ج ح خ ص ض ع غ — écrivez ceci pour assurer le support complet des caractères"

Exemples de comparaison par type de site

Ce sont des points de départ pour les tests, pas un classement ou une garantie d'adéquation.

| Type de site | Polices à tester | Ce qu'il faut tester |

|-----------|------------|------|

| Boutique en ligne | Cairo, Tajawal | Clarté des noms de produits et des prix |

| Site d'actualités | Noto Naskh | Lecture de longs paragraphes |

| Site institutionnel | Amiri, Scheherazade | Clarté du texte sur les appareils cibles |

| Application mobile | Cairo, IBM Plex Arabic | Taille et chargement sur mobile |

| Plateforme éducative | Noto Kufi | Clarté des lettres et diacritiques pour le public cible |

Conclusion

Testez la police sur les textes et appareils cibles, et assurez-vous de la direction RTL, de la couverture des caractères et de la licence avant la publication. Comparez les tailles de fichiers résultantes et choisissez une stratégie de chargement adaptée à l'interface. Les pages xfontat affichent les formats disponibles pour chaque fichier ; ne convertissez pas et ne redistribuez pas la police à moins que sa licence ne le permette.

Références techniques

Tous les articles