L'utilisation des polices fait partie intégrante de la conception Web. Souvent, nous souhaitons utiliser une police spécifique dans une page Web, mais la police n'est pas une police intégrée du système d'exploitation traditionnel, de sorte que les utilisateurs peuvent ne pas voir le design réel lorsqu'ils parcourent la page. La méthode la plus couramment utilisée par les designers artistiques consiste à transformer le texte souhaité en images. Cette méthode présente plusieurs défauts évidents : 1. Il est impossible d'utiliser la police à grande échelle. 2. Le contenu de l'image n'est pas facile à modifier en comparaison ; à l'utilisation de texte ; 3. Il n'est pas facile de modifier la police. Propice au référencement du site Web (les moteurs de recherche grand public n'utiliseront pas le contenu alternatif des images comme facteur efficace pour juger de la pertinence du contenu Web). Il existe quelques méthodes utilisant la technologie sIFR ou le hack javascript/flash sur Internet, mais elles sont soit lourdes, soit défectueuses à mettre en œuvre. Ce dont je vais parler ensuite, c'est comment intégrer n'importe quelle police dans une page Web uniquement via l'attribut @font-face de CSS.

premier pas

Obtenez les trois formats de fichier de la police à utiliser et assurez-vous que la police peut être affichée normalement dans les navigateurs grand public.

• .TTF ou .OTF pour Firefox 3.5, Safari, Opera
• .EOT, pour Internet Explorer 4.0+
• .SVG pour Chrome, iPhone

La prochaine chose à résoudre est de savoir comment obtenir ces trois fichiers de format d'une certaine police. Généralement, nous disposons d'un certain format de fichier de police (ou l'avons trouvé sur un site de ressources de conception), le plus courant est un fichier .TTF, et nous devons convertir ce format de fichier vers les deux autres formats de fichier. La conversion des formats de fichiers de polices peut être obtenue via le service de conversion de polices en ligne fourni par le site Web FontsQuirrel ou onlinefontconverter. Nous recommandons ici le premier site, qui nous permet de sélectionner les caractères dont nous avons besoin pour générer les fichiers de polices (la dernière option du service), ce qui réduit considérablement la taille des fichiers de polices et rend cette solution plus pratique.

Étape 2

Après avoir obtenu les fichiers de polices dans trois formats, l'étape suivante consiste à déclarer la police dans la feuille de style et à l'utiliser si nécessaire.

La déclaration de police est la suivante :

@font-face {
famille de polices : 'fontNameRegular' ;
src: url('fontName.eot');
src : local('fontName Regular'),
local('Nom de police'),
url('fontName.woff') format('woff'),
url('fontName.ttf') format('truetype'),
url('fontName.svg#fontName') format('svg');
}
/*Remplacez fontName par votre nom de police*/

Utilisez la police si nécessaire dans la page :

p { police : 13px fontNameRegular, Arial, sans-serif }
h1{font-family : fontNameRegular}

ou

En tenant la lune dans l'eau, le parfum des fleurs tombées remplit les vêtements

Voici un exemple de ce que j'ai fait à travers les deux étapes ci-dessus :

Boîte de code d'exécution
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">



http://www.blueidea.com/articleimg/2009/12/7263/style.css " />