ATOZ CSS Screencast: Unicode Range et @ FONT-FACE

Résumé des points clés

Les règles
• de CSS @font-face permettent d'utiliser des polices personnalisées dans la conception Web, améliorant ainsi les performances et améliorant la typographie. Assurez-vous de tester ces polices personnalisées sur différents systèmes d'exploitation et navigateurs pour vous assurer qu'ils apparaissent correctement.
La propriété
• CSS unicode-range peut être utilisée pour limiter la plage de caractères des polices personnalisées à appliquer. Ceci est particulièrement utile pour ajouter des caractères ou des symboles spéciaux directement à la balise, ou en utilisant des polices spéciales pour des caractères spécifiques.
• En utilisant la propriété unicode-range, vous pouvez améliorer les performances de la page Web en vous assurant que seuls les caractères nécessaires sont téléchargés et utilisés, réduisant ainsi la quantité de données qui doivent être chargées. Cependant, il est important de noter que tous les navigateurs ne prennent pas en charge cette propriété, donc des polices alternatives doivent être fournies dans le code CSS.

Explication vidéo (extrait du projet de texte)

Dans la section précédente, nous avons appris divers attributs de style de texte.

Dans les navigateurs modernes (et IE4 et plus tard), nous pouvons ajouter Polices personnalisées pour améliorer la conception du site Web.

Nous pouvons utiliser les différentes fonctionnalités de ces polices personnalisées pour aider à améliorer les performances et à améliorer la typographie globale.

Nous apprendrons cette section:

• @font-face Explication détaillée des règles
• comment utiliser la pile de polices et unicode-range pour contrôler la typographie

@font-face

Dans le passé, la sélection des polices sur les pages Web était limitée à un petit nombre de polices de "sécurité du réseau", telles que:

• Arial
• Comic Sans
• Courier New
• Géorgie
• Impact
• Palatino
• tahoma
• fois nouveau Roman
• Trebuchet
• Verdana

Certaines de ces polices sont excellentes et parfaites pour les pages Web - la Géorgie est une police Serif, Arial ou Verdana sont de grandes polices. Comic Sans n'est certainement pas le meilleur ...

Mais maintenant, nous pouvons utiliser une variété de polices personnalisées et la faire apparaître sur tous les navigateurs en utilisant @font-face.

Bien que nous puissions le faire , il vaut toujours la peine de tester toutes les polices personnalisées sur une gamme de systèmes d'exploitation et de navigateurs pour s'assurer qu'ils ressemblent comme prévu.

N'oubliez pas non plus que les fichiers de police peuvent être de taille assez grande, alors utilisez-les judicieusement pour éviter les problèmes de performances.

La syntaxe de

est la suivante: @font-face

Les polices

@font-face {
  font-family: 'Baskerville';
  src: url('baskerville.eot?#iefix') format('embedded-opentype'); 
  url('baskerville.woff') format('woff'); 
  url('baskerville.ttf') format('truetype');
  url('baskerville.svg#Baskerville') format('svg');
}

sont nommées à l'aide de l'attribut

, puis fournissent une gamme de différents types de fichiers et formats pour différents navigateurs. font-family

Pour éviter aux utilisateurs de télécharger des polices existantes dans le système, vous pouvez spécifier le nom local de la police à rechercher

. local()

Pour créer tous les formats de police corrects pour différents navigateurs, j'ai utilisé une excellente ressource en ligne appelée Font Squirrel.

Ils ont un générateur de polices Web qui fonctionne très bien. Le téléchargement qu'ils fournissent comprend également tous les extraits de code pour ajouter ces polices personnalisées dans CSS, ce qui est également pratique!

unicode-range

Chaque caractère d'une police peut être décrit par son numéro Unicode, sous la forme:

@font-face {
  font-family: 'Baskerville';
  src: url('baskerville.eot?#iefix') format('embedded-opentype'); 
  url('baskerville.woff') format('woff'); 
  url('baskerville.ttf') format('truetype');
  url('baskerville.svg#Baskerville') format('svg');
}

La chaîne "AToz CSS" peut être représentée par Unicode comme suit:

<code>U+0041</code>

Chaque caractère, y compris les espaces, a un numéro Unicode unique. Le jeu de caractères UTF-8 contient également une série de caractères spéciaux, qui est utile pour ajouter des formes et des symboles directement au balisage.

Lors de l'ajout de polices personnalisées avec @font-face, nous pouvons limiter la gamme de personnages qu'ils appliquent, ce qui, à première vue, est un peu bizarre, mais soyez patient avec moi pour expliquer.

Le symbole italique de la police de Baskerville est très beau et de nombreux designers aiment l'utiliser même s'ils n'utilisent pas le reste de la police de Baskerville.

Une façon d'utiliser cette police spéciale pour l'ampère et uniquement est de l'envelopper dans la balise <span> et de définir un autre font-family pour cela. Mais c'est un peu lourd et peut être fait complètement sans marquage supplémentaire.

Nous pouvons créer une police qui ne contient que ce caractère et l'ajouter à notre pile de polices comme la première police de la liste.

Lorsque le navigateur rencontre un caractère qui n'existe pas dans la police, il scannera la pile jusqu'à ce qu'il trouve la police contenant les caractères requis. Nous pouvons profiter de ce comportement pour ajouter des ampères et des ampères spéciales lors de l'utilisation d'une police personnalisée ou de sécurité réseau.

Tout d'abord, nous créons la règle @font-face pour charger une police à un seul caractère. Je vais le nommer "AmperSand" et utiliser une source de fichier de police locale pour enregistrer la bande passante.

Je spécifie unicode-range comme u 0026 pour un seul caractère ampère et. La gamme complète de caractères peut être spécifiée, comme le montre le nom de la propriété, mais dans ce cas, un seul caractère est requis.

<code>A      t      o      Z      space  C      S      S
U+0041 U+0074 U+006F U+005A U+0020 U+0043 U+0053 U+0053</code>

Dans cet exemple de fichier HTML, j'ai une série de titres et de paragraphes, qui contiennent tous deux plusieurs symboles.

Je vais créer deux piles de polices différentes, une pour le titre et une pour le corps. Dans chaque cas, la première police de la pile sera une police "AmperSand" personnalisée.

Pour les titres, j'ajouterai des polices Museo ou Rockwell ou Serif comme polices alternatives.

Pour le corps, j'ajouterai Avenir, Arial ou Sans-Serif comme police alternative.

@font-face {
  font-family: 'Ampersand';
  src: local('Baskerville-italic');
  unicode-range: U+0026;
}

c'est tout. Lorsque le navigateur rend le texte, la première police de la pile ne contient qu'un seul caractère Ampersand, il rendra donc le reste des caractères en utilisant la police suivante de la liste (si elle est trouvée).

La prise en charge du navigateur

unicode-range est bonne. Il est pris en charge dans tous les navigateurs modernes (sauf Firefox) ainsi que dans IE9 et plus tard. Comme il s'agit d'une amélioration purement visuelle, le support du navigateur n'est pas un gros problème pour moi - les navigateurs non pris en charge n'obtiendront que la première police de la pile qui peut être chargée avec succès.

(La partie FAQ suivante a été omise car elle ne correspond pas à l'objectif pseudo-original et est trop long. Le contenu central s'est reflété dans les parties ci-dessus.)

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!