L'utilisation des polices est une partie indispensable de la conception Web. Souvent, nous voulons utiliser une police spécifique dans une page Web, mais la police n'est pas une police intégrée pour les systèmes d'exploitation grand public, afin que les utilisateurs ne puissent pas voir la conception réelle lors de la navigation sur la page. La façon la plus courante pour les concepteurs d'art est de faire du texte souhaité en images. . Il existe certaines méthodes sur Internet qui utilisent la technologie SIFR ou le hack JavaScript / Flash, mais l'implémentation est lourde ou défectueuse. Ce que nous voulons parler ci-dessous, 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 fichiers pour utiliser la police pour vous assurer que la police peut être affichée normalement dans les navigateurs grand public.
.TTF ou .otf, adapté à Firefox 3.5, safari, opéra
.Eot, pour Internet Explorer 4.0+
.Svg, adapté à Chrome, iPhone
Ce que nous voulons résoudre ci-dessous, c'est comment obtenir ces trois fichiers de format d'une certaine police. Généralement, nous avons un fichier de format pour cette police à portée de main (ou déjà trouvée sur le site de ressources de conception), dont le plus courant est un fichier .TTF, que nous devons convertir aux deux formats de fichiers restants via ce format de fichier. La conversion des formats de fichiers de police peut être obtenue via le service de conversion de police en ligne fourni par le site Web FonttsQuirrel ou OnlineFontConverter. Le premier site est recommandé ici, qui nous permet de sélectionner les caractères requis pour générer des fichiers de police (la dernière option du service), ce qui réduit considérablement la taille des fichiers de police et rend cette solution plus pratique.
Étape 2
Après avoir obtenu le fichier de police en trois formats, l'étape suivante consiste à déclarer la police dans la feuille de style et à utiliser la police où elle est nécessaire.
La déclaration de police est la suivante:
@ FONT-FACE {
Font-Family: «Fontnamiengular»;
src: url ('fontname.eot');
src: local ('Fontname régulier'),
local ('Fontname'),
url ('fontname.woff') format ('woff'),
url ('fontname.ttf') format ('trueType'),
url ('fontname.svg # fontname') format ('svg');
}
/ * où Fontname est remplacé par votre nom de police * /
Utilisez cette police où vous en avez besoin sur la page:
P {Font: 13px Fontnamiengular, Arial, Sans-Serif;
H1 {Font-Family: Fontnamiengular}
ou
<p style = "font-famille: Fontnamiengular"> blottir la lune dans vos mains, et le parfum des fleurs tombées remplit vos vêtements </p>
Voici un exemple que j'ai fait à travers les deux étapes ci-dessus:
Exécutez la case de code
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Solution complète pour intégrer n'importe quelle police dans les pages Web - CSS9.NET </TITAL>
<link rel = "Stylesheet" href = "http://www.blueidea.com/articleimg/2009/12/7263/style.css" />
<style type = "text / css">
@ FONT-FACE {
Font-Family: «Hakuyoxingshu7000Regular»;
src: url ('http://www.blueidea.com/articleimg/2009/12/7263/7000.eot');
SRC: local ('hakuyoxingshu7000 régulier'), local ('hakuyoxingshu7000'), url ('http://www.blueidea.com/articleimg/2009/12/7263/7000.ttf') format ('trueType'),,, URL ('http://www.blueidea.com/articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000') format ('svg');
}
#poème{
taille de police: 45px;
Font-Family: Hakuyoxingshu7000regular;
Texte-aligne: Centre;
}
#poem p {height: 30px; line-height: 30px;}
</ style>
</ head>
<body>
<div id = "testDiv">
<h1> Solution complète pour intégrer n'importe quelle police dans les pages Web - CSS9.net </h1>
<h2> Accédez au texte d'origine: <a href = "http://css9.net/css-font-face-solution/"> http://css9.net/css-font-face-solution/ </ a > & nbsp; & nbsp; & nbsp; Suivez le développement du Web frontal- <a href = "http://css9.net"> css9.net </a> </h2>
<div id = "poème">
<H3> Le nuage est végétarien </h3>
<p> Il y a des camarades de classe dans la capitale, et nous nous rencontrons dans le pavillon végétarien. </p> <p> L'auditeur n'est toujours pas terminé, mais la personne qui parle a déjà beaucoup parlé. </p> <p> Il y a des amis partout dans la pièce, et je parlerai des sciences civiles. </p> <p> Envoyez de petits mots en zen, soyez prudent et doux. </p>
</div>
</docy>
</html>
[Ctrl + a tous les conseils de sélection: vous pouvez d'abord modifier du code, puis appuyer sur Run]
La police de l'article ci-dessus utilise une police de script de plume de fontaine publiée par ce blog.
Téléchargez le code source de cet exemple: Exemple de police d'intégration de la page Web
Texte d'origine: http://css9.net/css-font-face-solution/