Table des matières:
Vidéo: Comment ANIMER du TEXTE dans Adobe PREMIERE PRO 2025
Bien qu'un développeur Web HTML5 puisse suggérer n'importe quelle police pour une page Web, les fichiers de police sont traditionnellement un atout client. Si le client n'a pas la police installée, elle ne le verra pas. Heureusement, CSS3 supporte une solution raisonnable pour fournir des polices téléchargeables.
Le style ne fonctionne pas comme la plupart des éléments CSS. Il ne s'applique pas à certaines parties de la page. Au lieu de cela, il définit une nouvelle valeur CSS qui peut être utilisée dans d'autres balisages. Plus précisément, il vous permet de placer un fichier de police sur votre serveur et de définir une famille de polices utilisant cette police.
@ font-face {font-famille: "Miama"; src: url ("Miama otf");}
L'attribut font-family indique le nom que vous allez donner à cette police dans le reste de votre code CSS. Généralement, il est similaire au nom du fichier de police. L'attribut font-family est l'URL du fichier de police actuel tel qu'il se trouve sur le serveur. Une fois qu'une police a été définie, elle peut être utilisée dans un attribut ordinaire du reste de votre code CSS:
h1 {font-family: Miama;}
Voici le code de l'exemple de police personnalisée:
EmbeddedFont @ font-face {font-family: "Miama"; src: url ("Miama otf");} @ font-face {font-famille: "spray"; src: url ("ideoma_SPRAY. otf");} h1 {font-famille: Miama; font-size: 300%;} h2 {font-family: spray;}
Démonstration de police intégrée
Voici une autre police personnalisée
Bien que tous les navigateurs modernes supportent la fonction @ font-face, les types de fichiers varient d'un navigateur à l'autre. Voici les types de polices primaires:
-
TTF: Le format TrueType standard est bien supporté, mais pas par tous les navigateurs. De nombreuses polices open-source sont disponibles dans ce format.
-
OTF: Ceci est similaire à TTF, mais est un standard vraiment ouvert, donc il est préféré par ceux qui sont intéressés par les normes ouvertes. Il est pris en charge par la plupart des navigateurs sauf IE.
-
WOFF: WOFF est un format standard proposé actuellement pris en charge par Firefox. Microsoft a laissé entendre à soutenir ce format dans IE.
-
EOT: Ceci est le format de police intégré de Microsoft. Cela fonctionne seulement dans IE, mais pour être juste, Microsoft a eu le support intégré de police pendant beaucoup d'années.
Vous pouvez utiliser un outil de conversion de polices tel que onlinefontconverter. com / pour convertir n'importe quel format de police que vous préférez.
Il est possible de fournir plusieurs attributs src. De cette façon, vous pouvez inclure à la fois une version EOT et une version OTF d'une police afin qu'elle fonctionne sur une grande variété de navigateurs.
Lorsque vous utilisez cette technique, vous devez avoir une copie du fichier de police localement.Il devrait être dans le même répertoire que votre page Web. Lorsque vous commencez à héberger sur un serveur Web, vous devez déplacer votre fichier de police sur le serveur avec toutes les autres ressources dont votre page Web a besoin. Juste parce que vous pouvez inclure une police ne signifie pas que vous devriez. Réfléchissez bien à la lisibilité.
Aussi, soyez respectueux de la propriété intellectuelle. Heureusement, il existe de nombreuses polices gratuites d'open-source disponibles. Commencez par regarder la bibliothèque de polices ouverte. Google Fonts est une autre excellente ressource pour les polices gratuites. Avec l'outil Google Font, vous pouvez sélectionner une police intégrée sur les serveurs de Google, et vous pouvez copier le code qui rend la police disponible sans téléchargement.
