CSS - Les guillemets autour de la police

Mar 12 Mai 2015 - 10:12

Alumine

Age : 27Messages : 487

Mar 12 Mai 2015 - 10:12

Bonjour !

Voilà une discussion qui m'est venue en faisant une observation aujourd'hui:
Je suis sur un ordi du lycée, qui est un mac avec une version récente de Chrome... Je fais un tour sur mon forum test, et là surprise, une des polices, sans-serif, qui est installée de base sur tous les forums ne s'affiche pas, c'est la police par défaut qui s'affiche.
Etrange, surtout que je l'utilise aussi autre part sur le forum, et que là ça fonctionne ! Bilan après examination: la seule différence entre là où ça marche et là où ça marche pas c'est les guillemets dans le CSS. :hum:

Donc là où ça ne marche pas j'ai ça:

Code:: font-family:'sans-serif';

Et en enlevant les apostrophes ça fonctionne ! J'ai aussi essayé avec des guillemets, là non plus ça ne va pas.

Autre observation tout aussi étrange: pour les polices que j'ai ajoutées sur mon forum, l'utilisation de guillemets ou d'apostrophes n'a aucun effet particulier, les polices s'affichent.

D'où ma question: on dit toujours de mettre les guillemets autour des noms de police, alors pourquoi ça en entrave le fonctionnement ? Et connaissez-vous les règles complètes à ce sujet ? Parce que là vraiment je trouve ça bizarre x)
En fait je pensais que les guillemets étaient utiles dans le cas où les polices avaient un nom en deux parties, séparées par un espace, afin que le navigateur reconnaisse les deux mots comme faisant partie du même nom de police...

Mar 12 Mai 2015 - 10:34

NyoTheNeko

Age : 30Messages : 5683

Mar 12 Mai 2015 - 10:34

Alors en réalité, je te lie l'article de W3 sur les polices: click

Là, tu as ce passage:

W3 a écrit:Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means most punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

For example, the following declarations are invalid:

font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

If a sequence of identifiers is given as a font family name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces.

To avoid mistakes in escaping, it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens:

Code:

body { font-family: "New Century Schoolbook", serif } <BODY STYLE="font-family: '21st Century', fantasy">

Font family names that happen to be the same as a keyword value ('inherit', 'serif', 'sans-serif', 'monospace', 'fantasy', and 'cursive') must be quoted to prevent confusion with the keywords with the same names. The keywords 'initial' and 'default' are reserved for future use and must also be quoted when used as font names. UAs must not consider these keywords as matching the '< family-name >' type.

Donc tu apprends que:

Toutes les polices qui ont un espace, ont un numéro ou tout autre caractère non-alpabétque doit être entouré de guillemets.
Si tu es dans un style, tu utilises les apostrophes ('') sinon tu utilises les guillemets ("") (question logique de fermeture/ouverture de balise pour les apostrophes)
Tu dois échapper aussi les serif, inherit, etc s'ils ne sont pas par rapport aux font de base du forum

Donc là, e dernier point t'explique ton problèmes: tu échappes sans serif qui est quelque chsoe de "base" dans ton ordi, alors il fait comme si ce n'était PAS une police de base de l'ordi ^^

Mar 12 Mai 2015 - 10:51

A-Lice

Age : 30Messages : 4939

Mar 12 Mai 2015 - 10:51

C'est mac, ça fait chier, rien de plus Twisted Evil

Sinon je ne savais pas pourquoi c'était obligatoire. J'en apprends donc aussi (même si j'avoue ne pas tout avoir compris en anglais ><).

Mar 12 Mai 2015 - 22:27

Alumine

Age : 27Messages : 487

Mar 12 Mai 2015 - 22:27

Ok, je comprends mieux !
Mais du coup, il ne faut pas mettre de guillemets autour des polices que l'ordi a déjà ?
Le problème c'est quand il y a des utilisateurs comme moi qui utilisent un Linux où toutes les polices sont des copies open-source des grands classiques... Résultat: pas de Georgia, ni de Sans-serif, ni de Times...
Et pourtant, pour moi ça marche :hum:

Au final, c'est seulement les macs qui font chier ? Ou le navigateur qui veut bien interpréter mon code même s'il contient des "fautes" ?

Dim 17 Mai 2015 - 19:32

Invité

Dim 17 Mai 2015 - 19:32

Finalement n'est ce pas plus simple de rajouter avec un lien Google Font toutes les polices utilisées sur le forum, même celles qui sont de base ?

Lun 18 Mai 2015 - 10:45

Yui

Age : 35Messages : 334

Lun 18 Mai 2015 - 10:45

Hello!

En fait, ce n’est pas une question de police installée "de base", mais de mot-clé. Si on met "sans-serif" entre guillemets, le navigateur cherche une police expressément nommée "sans-serif", mais si on met simplement sans-serif, alors c’est une valeur CSS de la propriété font-family. Le navigateur va simplement aller chercher la police sans-serif par défaut de l’ordinateur/tablette/smartphone (par ex, sur Windows il trouvera Arial et sur Mac, ce sera Helvetica : tous les terminaux ne possèdent pas les mêmes police de base selon leur système d’exploitation).

Le souci vient probablement du Chrome Mac qui n’est pas identique en tout point aux autres Chrome. Je suppose que dans les navigateurs où ça fonctionne, en l’absence de police nommée "sans-serif", ils reconnaissent tout de même le mot-clé et s’en servent de valeur, mais ça reste une correction de l’erreur, car ça n’est pas censé fonctionner avec les guillemets. En revanche, pour les noms de police, peu importe leur provenance, il faut bien toujours les guillemets dans les cas cités par Nyo. Là aussi, il se peut que ça fonctionne sans chez certains navigateurs, mais ça n’est pas censé être le cas, et si on tombe sur un navigateur moins tolérant, la police ne s’affichera peut-être pas Very Happy

Faut-il utiliser le CSS3 pour charger explicitement les polices pour des basiques? Comme dit, les systèmes n’ont pas les mêmes basiques. Des raisons de vouloir absolument Arial ou Helvetica ? Honnêtement, je ne fais pas la différence. Mes amis graphistes me crieraient "sacrilège", car pour eux, Helvetica est bien plus jolie (c’est vrai, mais à la lecture, franchement, je remarque pas, un truc de graphiste fana de typo, ça xD). Si vous êtes de ceux-là et que vous voulez absolument que tous vos visiteurs profitent d’Helvetica (ou toute autre police basique), why not. Sinon, à moins d’un design calé au pixel près (les différences entre polices, même similaires, peuvent parfois occasionner des différences dans des textes, un retour à la ligne de plus par ex), je n’en vois pas l’intérêt, et ça rajoute un chargement. De plus, si vous vous trouvez sur un poste un peu âgé, les propriėtés CSS3 peuvent ne pas fonctionner du tout, c’est toujours le risque.

Autrement, en général, on conseille toujours, dans la propriété font-family, d’indiquer en plus d’une ou plusieurs polices, une propriétė CSS qui sera correctement interprétée à coup sûr (si on lui met pas de guillemets ^^) afin d’avoir une police qui reste dans l’esprit du design, comme dans l’exemple de Nyo où si l’ordinateur n’a pas la police citée, il utilisera la police sans-serif par défaut Very Happy

Sinon, on a généralement droit å du serif.

Petit détail : les utilisateurs sont normalement libres de changer les polices utilisées par défaut dans les paramètres de leur navigateur ^^ C’est rarement paramétré, parce qu’au final, ça risque de devenir gênant pour la navigation (et puis la plupart des gens ignore l’existence de ce paramètre), mais c’est toujours bon à savoir :) Je crois que c’est pour ça qu’on précise souvent les basiques de cette façon (mettre sans-serif tout court est censé faire pareil) :

Code:: body { font-family: Arial, Helvetica, sans-serif; }

Mar 19 Mai 2015 - 22:02

Alumine

Age : 27Messages : 487

Mar 19 Mai 2015 - 22:02

Merci Yui, je comprends mieux ^^ Toujours là pour les questions ardues, whoa °°
Mais outre les pages internet de base, est-ce que les forums de forumactif disposent de ces polices installées "par défaut" ? Les polices de base je veux dire: Georgia, Arial, Courier new, etc.
Parce que même sur mon ordi où je n'ai pourtant que des copies de ces polices certaines fonctionnent. Est-ce que c'est juste un réglage qui a été fait, avec à la place de Georgia la police qui lui ressemble le plus ?

Mer 20 Mai 2015 - 0:50

Yui

Age : 35Messages : 334

Mer 20 Mai 2015 - 0:50

De rien :) Pour tes autres questions, alors en toute honnêteté, je n'ai pas l'habitude de travailler pour du Linux scratch

Mais j'ai cherché un peu sur le web, car il me paraît improbable que ForumActif fasse ce genre de chose, et je vois que les polices que tu mentionnes font partie d'un package de typo installable sur Linux : msttcorefonts

Ce paquet installe les polices suivantes :
Andale Mono
Arial Black
Arial (Bold, Italic, Bold Italic)
Comic Sans MS (Bold)
Courier New (Bold, Italic, Bold Italic)
Georgia (Bold, Italic, Bold Italic)
Impact
Times New Roman (Bold, Italic, Bold Italic)
Trebuchet (Bold, Italic, Bold Italic)
Verdana (Bold, Italic, Bold Italic)
Webdings

Donc ces polices ne semblent pas incompatibles avec Linux, peut-être as-tu installé ce package ? Je vois qu'il est dispo pour plusieurs distributions en tout cas.

Jeu 21 Mai 2015 - 19:06

Alumine

Age : 27Messages : 487

Jeu 21 Mai 2015 - 19:06

Ha, merci ! Enfin pour l'instant ça ne me dérange pas d'avoir des polices bizarres ^^ Ca ne me pose pas de problème à vrai dire !

Jeu 21 Mai 2015 - 19:47

Yui

Age : 35Messages : 334

Jeu 21 Mai 2015 - 19:47

Ah, mais je ne te proposais pas de les installer, mon message n'était peut-être pas clair, je suis désolée ^^' Ce que je voulais dire, c'est que tu as peut-être déjà installé ces polices sur ta machine, via ce package ou un autre, ce qui expliquerait pourquoi elles fonctionnent. Tu es bien sûre qu'elles ne sont pas installées ?

Si tu es certaine qu'elles ne sont pas sur ta machine, tu peux faire un check en créant une page HTML sur ton ordinateur et en la lançant dans ton navigateur habituel pour voir si les polices s'affichent indépendamment de ForumActif. Si oui, c'est ton ordinateur/navigateur qui trouve un équivalent (ça me paraît tiré par les cheveux, mais pourquoi pas), si non, et si on parle bien d'un thème où l'admin n'a pas rajouté font-face, alors ça vient effectivement de FA. Mais dans ce cas, je deviens curieuse, j'aimerais bien avoir un lien pour jeter un coup d'oeil, bien que je ne sois pas sûre de trouver d'où ça vient Razz

Dans les consoles d'inspection des navigateurs, on a généralement accès à la liste des fichiers téléchargés dans une page web, alors il est facile de voir les polices chargées dans une page comme cela, et je nl'ai jamais vu des polices comme Georgia dedans (sauf si l'admin les renseigne, effectivement).

Ces deux hypothèses me paraissent peu probables en fait, c'est pourquoi je voulais vérifier la présence ou non de ces polices sur ton poste, car elles sont visiblement compatibles avec ton OS Very Happy

Contenu sponsorisé

CSS - Les guillemets autour de la police

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Tags
Recherche avancée