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.
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
.
element{
font-family: font1;
}
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.
<!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>
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 policesalternatives incluent cursive, fantaisie, monospace, et plus encore Grammaire
element{
font-family: font1, font2, font3, font4;
}
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>
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!
Introduction au middleware Laravel
Comment déverrouiller le verrouillage par mot de passe sur votre téléphone Apple si vous l'oubliez
Que faire si la température du processeur est trop élevée
Solution à l'autorisation refusée
tableau d'insertion de mots
Comment vérifier l'historique de téléchargement sur TikTok
Comment convertir des fichiers HTML en fichiers PDF
Comment utiliser la fonction de filtre
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
