Quelles règles CSS sont nécessaires pour définir des polices personnalisées ?

La définition d'une police personnalisée nécessite la règle CSS "@font-face". La règle "@font-face" consiste principalement à intégrer des polices Web définies par l'utilisateur dans des pages Web. La syntaxe est "@font-face{font-family: 'font name';src:url('file address');} ".

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment faire en sorte que votre page prenne en charge les polices personnalisées peut être réalisé en une phrase en utilisant @font-face.

@font-face est un module en CSS3. Il intègre principalement des polices Web auto-définies dans vos pages Web. Avec l'émergence du module @font-face, nous l'utilisons dans le développement Web. Les polices n'ont pas peur. d'utiliser uniquement des polices sécurisées pour le Web. Voyons comment utiliser @font-face.

Tout d'abord, jetons un coup d'œil aux règles grammaticales de @font-face :

   @font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

Description de la valeur

1 YourWebFontName : Cette valeur fait référence à votre nom de police personnalisé. Il est préférable d'utiliser la police par défaut que vous avez téléchargée. qui sera référencé à la famille de polices dans votre élément Web. Tel que « font-family : « YourWebFontName » ; »

2 Source : Cette valeur fait référence au chemin de stockage de votre police personnalisée, qui peut être un chemin relatif ou absolu

3. to est le format de votre police personnalisée, qui est principalement utilisée pour aider le navigateur à l'identifier. Ses valeurs incluent principalement les types suivants : truetype, opentype, truetype-aat,embedded-opentype, avg, etc. ; , poids et style : vous devez connaître ces deux valeurs. Le poids définit si la police est en gras, et le style définit principalement le style de police, comme l'italique.

Compatible avec les navigateurs

En parlant de problèmes de compatibilité des navigateurs avec @font-face, cela implique un problème de format de police, car différents navigateurs ont une prise en charge incohérente des formats de police, donc tout le monde a Il est nécessaire de savoir de quel type de polices sont prises en charge par différentes versions de navigateurs. J'ai brièvement mentionné plusieurs formats de polices. Je vais maintenant parler de ce problème séparément afin que chacun puisse avoir une idée :

1. Format TrueTpe (.ttf) :

. La police .ttf est la police la plus courante pour Windows et Mac. Il s'agit d'un format RAW, elle n'est donc pas optimisée pour les sites Web. Les navigateurs qui prennent en charge cette police sont [IE9+, Firefox3.5+, Chrome4+, Safari3+, Opera10+, iOS Mobile. Safari4.2+] ;

2. Format OpenType (.otf) :

.otf est considéré comme un format de police original, construit sur la base de TrueType, il fournit donc également plus de fonctions aux navigateurs. prend en charge cette police : [Firefox3.5+, Chrome4.0+, Safari3.1+, Opera10.0+, iOS Mobile Safari4.2+]

3. Format Web Open Font Format (.woff) :

La police .woff est le meilleur format parmi les polices Web. Il s'agit d'une version compressée ouverte de TrueType/OpenType. Elle prend également en charge la séparation des packages de métadonnées et prend en charge cela. Les navigateurs de polices incluent [IE9+, Firefox3.5+, Chrome6+, Safari3. 6+, Opera11.1+] ;

4. Format Embedded Open Type (.eot) :

.eot est une police spéciale pour IE, vous pouvez créer ce format de police à partir des navigateurs qui le prennent en charge. les polices sont [IE4+] ; +, iOS Mobile Safari3.2+].

Cela signifie que dans @font-face nous avons besoin d'au moins deux polices de format, .woff et .eot, et même .svg et d'autres polices pour prendre en charge davantage de versions de navigation.

Afin de permettre à @font-face d'obtenir une meilleure prise en charge des navigateurs, Paul Irish a écrit une syntaxe @font-face unique appelée

Bulletproof @font-face

:

   @font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot?') format('eot');/*IE*/
	src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
   }

Mais afin de permettre une plus grande prise en charge des navigateurs, vous peut aussi l'écrire comme :

   @font-face {
	font-family: 'YourWebFontName';
	src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
	src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
             url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
   }

Cela dit tant de connaissances théoriques vides, tout le monde doit avoir un peu de démangeaisons, alors voyons d'abord comment implémenter la police bleue dans la partie navigation de la page d'accueil de W3CPLUS. Une telle balise DOM nécessite l'application d'une police personnalisée : Code HTML :

   <h2 class="neuesDemo">Neues Bauen Demo</h2>

Définissez votre propre police Web via @font-face :

  @font-face {
    font-family: 'NeuesBauenDemo';
    src: url('../fonts/neues_bauen_demo-webfont.eot');
    src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),
	url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'),
	url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');
    font-weight: normal;
    font-style: normal;
  }

J'utilise un chemin relatif ici, bien sûr, vous pouvez également l'utiliser Chemin absolu. À ce stade, nous devons appliquer la police définie à notre page actuelle :

   h2.neuesDemo {
      font-family: 'NeuesBauenDemo'
   }

Effet :

(Partage vidéo d'apprentissage :

tutoriel vidéo CSS)

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!