Léon Woronꜩoff

Notes ponctuelles

Conſeiʪ ſ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 morceꜷ 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 fꜷt qᵫ le fichier de la police (dans cette illuſtration: free_sans.woff) ſoit ſur votre ſerveur dans le répertoire qᵫ vous indiqᵫz (ici, dans le même répertoire qᵫ la feuille de ſtyle puiſqu'ꜷcun 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 fꜷt ſavoir qᵫ mettre format() avant url() poſe problème à certains navigateurs!

D'ꜷtre part, n'utiliſez jamais des polices ꜷtre qᵫ celles dont l'extenſion eſt .eot pour le format opentype, .ttf pour le format trᵫtype et .woff pour le format woff. Certains navigateurs conſidèrent tout l'attribut src comme erroné ſi l'on utiliſe un ꜷtre 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évᵫ pour être utiliſé avec un navigateur.

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

Si vous voulez utiliſer une police de caractères qui contient peu de caractères et qᵫ vous avez une ꜷtre police de caractères ſuffiſamment proche qᵫ 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 à chaqᵫ fois qu'il y a un caractère qui manqᵫ dans la première police de caractère, la deuxième police de caractères eſt utiliſée pour afficher chaqᵫ caractère manquant. Vous pouvez même utiliſer pluſieurs polices de caractères, à chaqᵫ fois plus complètes ſi jamais la police de caractère la plus complète et trop différente de la première qᵫ vous utiliſez.

Attention qᵫ le remplacement de caractère ne ſ'opère qᵫ ſi la première police de caractère n'a rien rempli pour le caractère en qᵫſtion, hors, il arrive hélas ſouvent qᵫ 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 qᵫ le caractère exiſte dans la police en qᵫſtion et affiche le blanc ou le logo ꜷ lieux de laiſſer la police ſuivante prendre le relet.

Si vous conſtatez un tel problème, il fꜷt éditer la police de caractères (raiſon de plus pour en utiliſer une du domaine publiqᵫ 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 qᵫlqᵫs ſ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 fꜷt connaître ſuffiſement les logicieʪ de modification de polices de caractères qᵫ pour bien changer le nom dans les méta-donnée et changer ꜷſſi l'identifiant uniqᵫ de la police de caractères; ce peut être aſſez facile à faire, mais ſans ſavoir qu'il fꜷt changer de nom, on peut avoir des problèmes de légalité qui peuvent avoir des conſéqᵫnces financières tout bêtement parce qᵫ l'on n'a pris le temps de lire la licence).

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

Je me demandais qu'êut 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 chaqᵫs formes en Unicode — ſtandard déterminant l'ordre de codage des caractères utiliſés par chaqᵫs polices — réſervées ꜷ concepteurs de polices de caractères pour y mettre les caractères qu'iʪ veulent.

Ces aires à uſage privé ſont très utiles pour les caractères qui ne ſont prévus en Unicode. Par exemple: “” (“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 qᵫ donc, chaqᵫ 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 indiqᵫr la police de caractères à utiliſer afin d'éviter qᵫlqᵫ caractère inopportun qᵫ ce ſoi.

Il eſt tout ꜷſſ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'iʪ ſ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 qᵫ ce code de Langage à Élémenʦ Hypertextes n'affiche nullement le caractère “” dans ce morceꜷ de code, car je préfère garder une certaine police de caractaire monoſpace pour le code et qᵫ celle-ci ne contient rien dans l'aire à uſage privé de la forme en Unicode qᵫ j'utiliſe, à la place, une ſorte de rectangle ſ'affiche (il eſt poſſible qᵫ votre navigateur affiche ꜷtre choſe; il fꜷt d'ailleur ſe faire à l'idée, lorſqu'on utiliſe des caractères de l'air à uſage privé, qᵫ le caractère qᵫ l'on voit dans ſon éditeur de texte n'a, en général, rien voir avec le caractère qᵫ l'on utiliſe effectivement, puiſqᵫ 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 indiqᵫr 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 ꜷ 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 qᵫ 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 hꜷt, ceci étant, leurs concepteurs ſemble aſſez rigoureux, il n'y a donc ꜷcun caractère blanc ou ꜷtre 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).