recherche

Maison  >  Article  >  interface Web  >  Que sont les polices Web sécurisées et les polices de secours en CSS ?

Que sont les polices Web sécurisées et les polices de secours en CSS ?

王林
王林avant
2023-08-25 23:33:121586parcourir

CSS 中的网络安全字体和后备字体是什么？

Le site Web est conçu pour fournir aux utilisateurs des informations sur les entreprises, les produits et les services. Tout site Web doit être clair et beau pour que les lecteurs puissent y répondre. La typographie d'un site internet est un facteur clé pour le rendre cohérent et lui donner un côté esthétique. La personnalité de l'ensemble du site Web est construite par la typographie, qui est cruciale dans la création de l'identité de la marque. Si vous utilisez une typographie unique et cohérente, les utilisateurs commenceront à associer une certaine police à votre marque.

Lorsque vous utilisez une bonne typographie, vous pouvez maintenir l'intérêt des lecteurs et les persuader de rester plus longtemps sur votre site Web. En générant un équilibre graphique solide et une forte hiérarchie visuelle, cela aide à établir le ton global du site Web. les décisions sont prises et ont un impact significatif sur la façon dont les lecteurs traitent et interprètent le contenu du texte et ont donc un impact sur la lisibilité du site

. Grâce aux différentes polices Web sécurisées introduites par Google pour les développeurs, vous pouvez Le téléchargement est gratuit. Dans cet article, nous aborderons les polices sécurisées pour le Web et les polices de secours.

Les polices fournies par CSS sont disponibles pour les développeurs.

Que sont les polices sécurisées pour le Web ?

Les

Polices sécurisées pour le Web sont des polices prises en charge par tous les navigateurs sur n'importe quel appareil. Ces polices permettent aux développeurs de les afficher correctement même si elles ne sont pas installées sur l'appareil des utilisateurs

.

Avant le développement des polices sécurisées pour le Web, les navigateurs affichaient des polices génériques telles que Times New Roman si la police n'était pas installée sur le système local de l'utilisateur. Cependant, le développeur ne peut pas détecter si la police s'affiche correctement côté serveur. Cela se traduit par une mauvaise expérience utilisateur.

L'utilisation de polices Web sécurisées résout ce problème. Lors de la conception Web, si vous utilisez des polices Web sécurisées, vous pouvez être assuré que vos polices seront affichées telles quelles sur chaque appareil

.

Grammaire

element{
   font-family: font1;
}

Types de polices sécurisées pour le Web

Il existe six polices sécurisées pour le Web. Ils sont les suivants −

  • Serif - Ces polices contiennent de petites saillies présentes dans le corps de chaque lettre. Elles sont plus faciles à lire à l'écran et sur les formulaires imprimés. Times New Roman est une police serif.

  • Monospace - Ces polices sont des polices avec un espacement égal entre les lettres. Space Mono, Courier, Inconsolata, etc. sont toutes des polices à largeur fixe.

  • Polices Sans Serif - Ces polices sont à l'opposé des polices Serif. Ils ne contiennent pas de petites saillies. Arial, Helvetica, Futura, Calibri, etc. sont quelques exemples de polices sans empattement.

  • Fantasy - Ces polices sont hautement stylisées et décoratives. Papyrus, Herculanum, Luminari sont des polices fantastiques.

  • MS - Ce sont les polices introduites par Microsoft Trebuchet MS, MS Gothic, Georgia etc., sont des polices MS..

  • Cursive - Ces polices sont similaires à l'écriture manuscrite cursive. Brush Script MT, Broadley, Monarda, Raksana, etc. sont des polices cursives.

    • Exemple
<!DOCTYPE html>
<html>
<head>
   <meta charset= "UTF-8">
   <title> Web Safe Fonts </title>
   <link rel= "preconnect" href= "https://fonts.googleapis.com">
   <link rel= "preconnect" href= "https://fonts.gstatic.com">
   <link href= "https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel= "stylesheet">
   <style>
      h1{
         color: green;
         text-decoration: underline;
      }
      .demo1{
         font-family: Times New Roman;
      }
      .demo2{
         font-family: Arial;
      }
      .demo3{
         font-family: Courier;
      }
      .demo4{
         font-family: Brush Script MT;
      }
      .demo5{
         font-family: Trebuchet MS;
      }
      .demo6{
         font-family: fantasy;
      }
   </style>
</head>
<body>
   <center>
      <h2> Web Safe Fonts </h2>
      <div class= "demo1"> This is an example in Times New Roman font. </div>
      <div class= "demo2"> This is an example in Arial font. </div>
      <div class= "demo3"> This is an example in Courier font. </div>
      <div class= "demo4"> This is an example in Brush Script MT font. </div>
      <div class= "demo5"> This is an example in Trebuchet MS font. </div>
      <div class= "demo6"> This is an example in Fantasy font. </div>
   </center>
</body>
</html>

Quelle est la police de secours en CSS ?

CSS propose deux types de familles de polices pour la conception Web. Il s'agit des familles de polices génériques comme serif (Times New Roman, Georgia, etc.) et des familles de polices individuelles comme Arial, Calibri, etc.

Les familles de polices universelles ont un certain nombre de polices d'apparence similaire, donc si aucune police principale n'est disponible sur le système de l'utilisateur, il existe un mécanisme de

sauvegarde

qui contient une liste de familles de polices similaires qui peuvent être utilisées à la place. Ces polices sont appelées polices alternatives. Elles sont utilisées comme sauvegarde dans la conception Web car aucune police Web n’est sûre à 100 %. Il y a toujours la possibilité d'une erreur.

Sauvegarde

Les polices résolvent ce problème en agissant comme une sauvegarde. Les familles de polices sécurisées pour le Web peuvent également être définies comme polices de secours. Quelques exemples de polices

alternatives incluent cursive, fantaisie, monospace, et plus encore Grammaire 

element{
   font-family: font1, font2, font3, font4;
}

Font2, font3, font4

sont les polices de secours qui sont utilisées comme sauvegarde. Si le navigateur ne prend pas en charge font1, alors font2 sera affiché, sinon font2, alors font3 est utilisé et ainsi de suite.

Exemple 

<!DOCTYPE html>
<html>
<head>
   <title> Fallback fonts </title>
   <link rel= "preconnect" href= "https://fonts.googleapis.com">
   <link rel= "preconnect" href= "https://fonts.gstatic.com">
   <link href= "https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel= "stylesheet">
   <style>
      .demo1{
         font-family: verdana,'cursive';
      }
      .demo2{
         font-family: cursive, Cochin, Georgia;
      }
      .demo3{
         font-family: Helvetica, arial, cursive, 'Times New Roman';
      }
      .demo4{
         font-family: 'Times New Roman', Cambria, Cochin, Georgia, Times, serif;
      }
   </style>
</head>
<body>
   <center>
      <h2> Fallback fonts </h2>
      <p class= "demo1"> This is an example. </p>
      <p class= "demo2"> This is an example. </p>
      <p class= "demo3"> This is an example. </p>
      <p class= "demo4"> This is an example. </p>
   </center>
</body>
</html>
Dans l'exemple ci-dessus, la famille de polices du texte est font1. Si un navigateur ne prend pas en charge la famille de polices font1, nous avons à côté une liste de familles de polices qui peuvent être utilisées comme polices de secours.

Conclusion

L'utilisation de polices sécurisées pour le Web dans la conception de sites Web est une bonne pratique car elle garantit aux développeurs qu'elles s'afficheront sur les appareils des utilisateurs. Cependant, les polices sécurisées pour le Web ne sont pas fiables à 100 %. Par conséquent, les polices de secours CSS peuvent être utilisées comme sauvegarde des polices, de sorte que si une famille de polices ne fonctionne pas, le navigateur peut essayer une autre famille de polices répertoriée. C'est une bonne pratique de codage d'utiliser une famille de polices commune comme première police, puis d'utiliser la même famille de polices pour d'autres options.

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!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Mise en route de l'extension CSS Truncate en survol ou en focusArticle suivant：Mise en route de l'extension CSS Truncate en survol ou en focus

Articles Liés

Voir plus