Tutoriel CSS

CSS ACCUEIL Présentation CSS Syntaxe CSS Sélecteurs CSS CSS Comment faire Commentaires CSS Couleurs CSS Arrière-plans CSS Bordures CSS Marges CSS Rembourrage CSS CSS Hauteur/Largeur Modèle de boîte CSS Aperçu CSS Texte CSS Polices CSS Icônes CSS Liens CSS Listes CSS CSS Tables Affichage CSS CSS Max-width Poste CSS Index Z CSS Débordement CSS Flottant CSS Bloc en ligne CSS Alignement CSS Combinateurs CSS Pseudo-classe CSS Pseudo-élément CSS Opacité CSS Barre de navigation CSS Listes déroulantes CSS Galerie d'images CSS Sprites d'image CSS Sélecteurs d'attributs CSS Formulaires CSS Compteurs CSS Mise en page du site Web CSS Unités CSS Spécificité CSS CSS !important Fonctions mathématiques CSS

CSS avancé

Coins arrondis CSS Images de bordure CSS Arrière-plans CSS Couleurs CSS Mots-clés de couleur CSS Dégradés CSS Ombres CSS Effets de texte CSS Polices Web CSS Transformations CSS 2D Transformations 3D CSS Transitions CSS Animation CSS Info-bulles CSS CSS Style Images Réflexion d'image CSS Ajustement d'objet CSS Position d'objet CSS Masquage CSS Boutons CSS Pagination CSS CSS plusieurs colonnes Interface utilisateur CSS Variables CSS Dimensionnement des boîtes CSS Requêtes média CSS Exemples CSS MQ Boîte flexible CSS

CSS réactif

RWD Introduction Fenêtre RWD Affichage de la grille RWD Requêtes multimédia RWD Images RWD Vidéos RWD Cadres RWD Modèles RWD

Grille CSS

Grille d'introduction Conteneur de grille Élément de grille

CSS SASS

Tutoriel SASS

Exemples CSS

Modèles CSS Exemples CSS CSS Quiz Exercices CSS Certificat CSS

Références CSS

Référence CSS Sélecteurs CSS Fonctions CSS Audit de référence CSS Polices sécurisées pour le Web CSS CSS animable Unités CSS Convertisseur CSS PX-EM Couleurs CSS Valeurs de couleur CSS Valeurs CSS par défaut Prise en charge du navigateur CSS

Polices sécurisées pour le Web CSS


Que sont les polices Web Safe ?

Les polices sécurisées pour le Web sont des polices qui sont installées de manière universelle sur tous les navigateurs et appareils.


Polices de secours

Cependant, il n'existe pas de polices entièrement sécurisées pour le Web. Il y a toujours un risque qu'une police ne soit pas trouvée ou ne soit pas installée correctement.

Par conséquent, il est très important de toujours utiliser des polices de secours.

Cela signifie que vous devez ajouter une liste de "polices de sauvegarde" similaires dans la font-family propriété. Si la première police ne fonctionne pas, le navigateur essaiera la suivante, et la suivante, et ainsi de suite. Terminez toujours la liste par un nom de famille de police générique.

Exemple

Ici, il existe trois types de polices : Tahoma, Verdana et sans empattement. Les deuxième et troisième polices sont des sauvegardes, au cas où la première ne serait pas trouvée.

p {
font-family: Tahoma, Verdana, sans-serif;
}

Meilleures polices Web sécurisées pour HTML et CSS

La liste suivante répertorie les meilleures polices Web sécurisées pour HTML et CSS :

  • Arial (sans empattement)
  • Verdana (sans-serif)
  • Helvetica (sans empattement)
  • Tahoma (sans-serif)
  • Trébuchet MS (sans empattement)
  • Times New Roman (empattement)
  • Géorgie (empattement)
  • Garamond (empattement)
  • Courrier Nouveau (monospace)
  • Brush Script MT (cursif)

Remarque : Avant de publier votre site Web, vérifiez toujours comment vos polices apparaissent sur différents navigateurs et appareils, et utilisez toujours des polices de secours !



Arial (sans empattement)

Arial est la police la plus utilisée pour les médias en ligne et imprimés. Arial est également la police par défaut dans Google Docs.

Arial est l'une des polices Web les plus sûres et elle est disponible sur tous les principaux systèmes d'exploitation.

Exemple

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Verdana (sans-serif)

Verdana est une police très populaire. Verdana est facilement lisible même pour les petites tailles de police.

Exemple

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Helvetica (sans empattement)

La police Helvetica est appréciée des designers. Il convient à de nombreux types d'entreprises.

Exemple

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Tahoma (sans-serif)

La police Tahoma a moins d'espace entre les caractères.

Exemple

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Trébuchet MS (sans empattement)

Trebuchet MS a été conçu par Microsoft en 1996. Utilisez cette police avec précaution. Non pris en charge par tous les systèmes d'exploitation mobiles.

Exemple

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Times New Roman (empattement)

Times New Roman est l'une des polices les plus reconnaissables au monde. Il a l'air professionnel et est utilisé dans de nombreux journaux et sites Web "d'actualités". C'est également la police principale pour les appareils et les applications Windows.

Exemple

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Géorgie (empattement)

Georgia est une police serif élégante. Il est très lisible à différentes tailles de police, c'est donc un bon candidat pour une conception adaptée aux mobiles.

Exemple

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Garamond (empattement)

Garamond est une police classique utilisée pour de nombreux livres imprimés. Il a un look intemporel et une bonne lisibilité.

Exemple

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Courrier Nouveau (monospace)

Courier New est la police à empattement monospace la plus utilisée. Courier New est souvent utilisé avec les écrans de codage, et de nombreux fournisseurs de messagerie l'utilisent comme police par défaut. Courier New est également la police standard pour les scénarios de films.

Exemple

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9


Brush Script MT (cursif)

La police Brush Script MT a été conçue pour imiter l'écriture manuscrite. Il est élégant et sophistiqué, mais peut être difficile à lire. Utilisez-le avec précaution.

Exemple

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Conseil : Découvrez également toutes les polices Google disponibles et comment les utiliser.