Léon Woronꜩoff

Notes ponctuelles

Conſeils ſi vous utiliſez des polices de caractères ſur vos ſites

Dernière miſe à jour

Tout d' abord, choiſiſſez bien vos polices de caractères, en effet, chacune doit idéalement:

Voici un morceau de code de feuille de ſtyle en caſcade illuſtratif:

@font-face { font-family: "freesans"; src: local("FreeSans"), url("free_sans.woff") format("woff"); }

Et, ailleurs dans votre feuille de ſtyle, là où vous voulez utiliſer la police de caractères, par exemple pour l' élément body:

body { font-family: "freesans"; }

Bien ſûr, il faut que le fichier de la police (dans cette illuſtration: free_sans.woff) ſoit ſur votre ſerveur dans le répertoire que vous indiquez (ici, dans le même répertoire que la feuille de ſtyle puiſqu' aucun répertoir n' eſt indiqué).

Utiliſer local() permet de charger la police de caractères plus vite ſi elle eſt inſtallé en local. Par ailleurs, il faut ſavoir que mettre format() avant url() poſe problème à certains navigateurs!

D' autre part, n' utiliſez jamais des polices autre que celles dont l' extenſion eſt .eot pour le format opentype, .ttf pour le format truetype et .woff ou .woff2 pour les woff et woff2. Certains navigateurs conſidèrent tout l' attribut src comme erroné ſi l' on utiliſe un autre format.

J' ai, par exemple, confondu l' extenſion .otf et .eot qui ſont tout les deux du format opentype, mais ſeul la ſeconde eſt prévue pour être utiliſé avec un navigateur.

J' ajoute le conſeil ſuivant: après avoir eſſayé le nom local() de la police de caractères, déſinſtallez là, ainſi, non ſeulement vous pouvez réellement eſſayé url() mais, ſurtout, lorſque vous reviendrez deſſus pour une raiſon ou une autre, vous ſerez dans les mêmes conditions qu' un utiliſateur n' ayant aucune des polices que vous utiliſez.

Ajouter une police de caractères de remplacement

Si vous voulez utiliſer une police de caractères qui contient peu de caractères et que vous avez une autre police de caractères ſuffiſamment proche que pour combler les vides, il ſuffit d' utiliſer le code ſuivant:

@font-face { font-family: "Agnès"; src: local("Agnès"), url("agnes_regular.woff") format("woff"); } @font-face { font-family: "freesans"; src: local("FreeSans"), url("free_sans.woff") format("woff"); }

Et dans le reſte de la feuille de ſtyle (je reprends l' exemple de l' élément body):

body { font-family: "Agnès", "freesans"; }

Ainſi à chaque fois qu' il y a un caractère qui manque dans la première police de caractère, la deuxième police de caractères eſt utiliſée pour afficher chaque caractère manquant. Vous pouvez même utiliſer pluſieurs polices de caractères, à chaque fois plus complètes ſi jamais la police de caractère la plus complète et trop différente de la première que vous utiliſez.

Attention que le remplacement de caractère ne ſ' opère que ſi la première police de caractère n' a rien rempli pour le caractère en queſtion, hors, il arrive, hélas ſouvent, que les créateurs de polices de caractères laiſſent des blancs (plus ou moins long) ou leur logo ſur certains caractères qui devraient contenir des lettres, dès lors, le navigateur conſidère que le caractère exiſte dans la police en queſtion et affiche le blanc ou le logo au lieux de laiſſer la police ſuivante prendre le relet.

Si vous conſtatez un tel problème, il faut éditer la police de caractères (raiſon de plus pour en utiliſer une du domaine publique ou ſous licence libre) et ſupprimer tous ces blancs indéſirables (liſez bien la licence, en effet, même dans les polices de caractères ſous licence libre, il y a parfois quelques ſurpriſes, par exemple, la Summer Inſtitute of Linguiſtics Open Font Licenſe obligent à changer de nom lorſqu' on modifie une police de caractères ſous cette licence, dans ce cas, il faut connaître ſuffiſement les logiciels de modification de polices de caractères que pour bien changer le nom dans les méta-données et changer auſſi l' identifiant unique de la police de caractères; ce peut être aſſez facile à faire, mais ſans ſavoir qu' il faut changer de nom, on peut avoir des problèmes de légalité qui peuvent avoir des conſéquences financières tout bêtement parce que l' on n' a pris le temps de lire la licence).

Un autre avantage à utiliſer une police de caractères libre eſt que, ſ' il manque un caractère, vous pouvez facilement faire vous-même à l' aide d' un autre caractère exiſtant dans cette même police de caractères. Dans ce cas, vous pouvez envoyer la police modifiée au créateur qui utiliſera ou non votre (voire vos) nouveau(x) caractère(s) pour enrichir ſa police de caractère "officielle".

Je me demandais qu' eût eu-t-il d' utile et, de même, pour finir les phraſes qui finiſſent bien?

Certaines polices de caractères utiliſent les aires à uſage privé, ſoit des plages de chaques formes en Unicode — ſtandard déterminant l' ordre de codage des caractères utiliſés par chaques polices — réſervées au concepteurs de polices de caractères pour y mettre les caractères qu' ils veulent.

Ces aires à uſage privé ſont très utiles pour les caractères qui ne ſont prévus en Unicode. Par exemple — et cela cause un avertissement dans la vérification du langage de description de données utilisé car cela: “ne devrait être utilisé dans des documents échangés publiquement” —: “” (“Qu” dont le trait du “Q” majuſcule va en deſſous du “u”) eſt une ligature aſſez utiliſé et, pourtant, elle n' a jamais été ajouté à la norme Unicode.

Comme ces caractères ſont privé (et que donc, chaque créateur de police de caractères peut y mettre ce qu' il veut dans l' ordre qu' il veut), il eſt important de bien indiquer la police de caractères à utiliſer afin d' éviter quelque caractère inopportun que ce ſoi.

Il eſt tout auſſi important de mettre en place une alternative en cas de problème. Pour ſe faire, vous pouvez, par exemple, entourer le mot contenant un ou pluſieurs caractère(s) qui ſe trouve dans une aire à uſage privé d' un élément span avec l' attribut title contenant le mot avec des caractères dont vous êtes ſûr qu' ils ſont liſible (car à une poſition ſtandard). En voici un code illuſtratif:

<p class="qufont"><span title="“Qu' eût eu” voire “Qu”…">' eût eu</span>-t-il me demandais-je?</p>

Notez que ce code de Langage à Éléments Hypertextes n' affiche nullement le caractère “” dans ce morceau de code, car je préfère garder une certaine police de caractaire monoſpace pour le code et que celle-ci ne contient rien dans l' aire à uſage privé de la forme en Unicode que j' utiliſe, à la place, une ſorte de rectangle ſ' affiche (il eſt poſſible que votre navigateur affiche autre choſe; il faut d' ailleur ſe faire à l' idée, lorſqu' on utiliſe des caractères de l' air à uſage privé, que le caractère que l' on voit dans ſon éditeur de texte n' a, en général, rien voir avec le caractère que l' on utiliſe effectivement, puiſque ce logiciel utiliſe la police de caractère de ſon choix).

Pour parfaire cette exemple, utiliſez dans le code de votre feuille de ſtyle en caſcade la claſſe .qufont{} pour indiquer la police de votre choix contenant les caractères à uſage privé qui vous ſont utiles, ce en ſuivant les explications du début du préſent article.

Et pour finir (…la phraſe)

Il exiſte des polices de caractères avec des caractères alternatifs, les polices de caractères au format opentype ont même un mécaniſme pour paſſer d' une lettre à ſon alternative (c' eſt en cours de normaliſation pour le langage de préſentations de donnée en feuille de ſtyle en caſcade). C' eſt notament utiliſer pour avoir des caractères de fin de phraſe (voire de fin de mot) “élégant” comme montré dans l' exemple ſuivant — qui utiliſe la police de caractères intitulée: “Junicode” qui, à mon humble avis, eſt aſſez complète, il me ſemble même que je n' avais jamais vu certains des caractères qu' elle contient (par contre, elle utiliſe la Summer Inſtitute of Linguiſtics Open Font Licenſe évoquée plus haut, ceci étant, leurs concepteurs ſemble aſſez rigoureux, il n' y a donc aucun caractère blanc ou autre caractère intempeſtif). Voici donc un exemple et ſon illuſtration:

<p class="elegantending"><span title="Fin">Fi</span>.</p>

Fi.

Signaler une erreur

Pour me ſignaler les fautes (orthographe, grammaire, conjugaiſon, typographie, …) que je peux faire, veuillez me contacter plutôt que de faire un commentaire. Je vous en remercie d' avance.

Commentaire(s)

Il n' y a actuellement aucun commentaire.

Commenter

À lire au minimum avant d' envoyer un commentaire pour le faire en connaiſſance de cauſe: ce qui ſert de règlement d' ordre intérieur.

Envoyer un commentaire

Rétro-lien

Adreſſe de rétro-lien de ce billet (notez que certain moteur de journal extime informe d' une erreur comme par exemple le fait que cette adreſſe n' eſt nullement une adreſſe de rétro-lien, mais c' en eſt bien une et le rétro-lien ſe fait de toute façon).