Correspondance entre polices

[FlodAriege]

Bonjour,

J'utilise un Template JoomlaShine qui utilise des polices non standards. Celles ci sont plutôt bien prises en charge par à peu près tous les systèmes... sauf ceux à la pomme.
Je suis donc à la recherche de moyens d'afficher correctement, sans trop changer son aspect, mon site :
- polices équivalentes et prises en charge par Apple
- syntaxe des modifs à apporter à mon css.

Au départ, voici l'analyse faite par l'excellent PhilJ, dans un autre (très long) post sans rapport avec ce sujet :

Comme à son habitude, Apple (iPad et iPhone notamment) fait bande à part et est fâché avec à peu près tout ce qui ne vient pas de chez Apple (slogan : ma pomme, c'est moi !), notamment Microsoft, Adobe... et Google. Or JSN BOOT fait appel par défaut à des polices téléchargées depuis Google Fonts.

On trouve par exemple ceci dans css/styles/business.css :

@import url(https://fonts.googleapis.com/css?fam...regular,bold);

Et, autre exemple, le code source (= CTRL+U) montre que le site charge également la police Droid depuis Google Fonts :

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans" type="text/css" />

Bon, moi, avec mes petits yeux de débutante, je n'arrive pas trop à comprendre ce que vient faire la police Droid dans cette histoire.
En effet, moi qui ne met pas vraiment le nez dans le moteur, je ne vois que les choses apparentes, à savoir :
titres en Oswald
textes en Segoe UI

A noter aussi : JSN BOOT utilise une police non standard sans la télécharger chez Google Fonts : Segoe UI. Cette police (signée Microsoft) peut il est vrai se trouver sur de nombreux ordinateurs, et dans ce cas en effet n'a pas besoin d'être téléchargée (ou embarquée). Mais qu'advient-il sur d'autres machines (les Mac par exemple) qui ne l'ont pas en stock ? La réponse est au tout début de business.css :

body {
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
font-size: 85%;
}

...Autrement dit, si Segoe UI n'est pas dans la machine, une police très différente est utilisée : Arial, nettement moins fine (ou, à défaut, Helvetica ou même n'importe quelle police sans serif).

Il existe des solutions à ce type de souci, mais comme déjà dit il vaudrait mieux ouvrir un autre fil (quitte à dérouler une petite bobine ).

Donc, question :
Puis-je me contenter de saisir d'autres polices dans le css, plus ressemblantes à la police Segoe UI ?
Ou bien dois-je saisir une ligne, un code ou je ne sais quoi, pour dire de charger la police ???

Merci d'avance pour vos lumières, vous l'aurez compris je suis néophyte, mais je fais des efforts pour comprendre et apprendre

[messinmaisoui]

Re : Correspondance entre polices

Hello FlodAriege

Je pense qu'il faut dans ce cas s'intéresser au @font-face
et "embarquer" ses propres polices.
=>
http://www.alsacreations.com/astuce/...-site-web.html

On trouve des polices freeware, shareware, de démo ou du domaine public
ex: http://www.dafont.com/fr/
pour avoir le même rendu n'importe où ...

[PhilJ]

Re : Correspondance entre polices

Bonjour,

je n'arrive pas trop à comprendre ce que vient faire la police Droid dans cette histoire.

...Peut-être est-elle utilisée par une extension. Je ne vois pas en effet qu'elle soit appelée dans le code d'origine de JSN Boot.

J'utilise un Template JoomlaShine qui utilise des polices non standards. Celles ci sont plutôt bien prises en charge par à peu près tous les systèmes... sauf ceux à la pomme.

Plus exactement : les mobiles Apple négligent les fontes téléchargées chez Google. Mais les MAC et machines sous Linux n'ont pas forcément non plus Segoe UI, une police répandue sur PC, mais qui n'est pas téléchargée chez Google par le template.

Je suis donc à la recherche de moyens d'afficher correctement, sans trop changer son aspect, mon site :
- polices équivalentes et prises en charge par Apple
- syntaxe des modifs à apporter à mon css.

Il faut bien distinguer le cas d'Oswald et celui de Segoe UI.

Oswald est une police sous licence SIL open source. Elle est donc utilisable gratuitement, notamment comme web fonte.

Segoe UI est quant à elle la propriété de Microsoft, laquelle société livre cette police avec bon nombre d'applications sous Windows (http://en.wikipedia.org/wiki/Segoe#Availability), dont les systèmes d'exploitation eux-mêmes, ainsi que MS Office — mais la police n'est pas livrée dans la version Mac Office, ni dans aucun autre produit Microsoft à destination du matériel Apple (nananère ! ).

Il est légal d'utiliser Segoe UI pour un usage personnel, et même pour réaliser des documents papier. En revanche, elle ne se trouve pas dans https://www.google.com/fonts. Et plus généralement, il n'est pas permis, sauf erreur, d'utiliser Segoe UI comme web fonte sur un serveur distant — sauf bien sûr moyennant le versement de quelques dizaines de $$$ (35 je crois bien), ou bien plusieurs centaines de milliers en cas de fraude avérée :-\

Une solution, pour cette police privée (sans jeu de mot), est de l'accompagner d'une police très proche : Lucida Grande (standard sur MAC), Helvetica Neue, Droid Sans ou Ubuntu. Pour une comparaison détaillée et en images de ces différentes polices comparées à Segoe UI, regarder ici : http://www.design-by-izo.com/2011/10...-a-ui-typeface. Il y a bien sûr d'autres polices voisines (par exemple : Source Sans Pro Regular, WeeblySleek UI...). Il est possible d'intervenir pour cela dans css/styles/business.css (peut-être ailleurs aussi, c'est à voir), mais le mieux, comme toujours, est de ne pas modifier les fichiers d'origine, et d'intervenir plutôt en surcharge dans /templates/jsn_boot_pro/custom.css.

Inconvénients :

1. Les iPhones et iPad seront toujours pénalisés.
2. Les autres appareils non, mais malgré leur ressemblance, ces polices ne sont pas parfaitement identiques.

L'autre solution est plus subtile et plus technique, mais présente le double avantage de l'indépendance et d'une totale compatibilité avec toutes les machines, iPhone et iPad y compris.

En résumé : (1°) télécharger une police libre / open source, (2°) demander à l'ami Font Squirrel de transformer la police en question en pack webfont compatible toutes machines, (3°) installer les différentes versions de la police ainsi obtenues sur le serveur, et modifier les styles CSS en conséquence.

=> Supposons par exemple — au hasard — que nous souhaitions remplacer Segoe UI par Ubuntu.

1 - On télécharge la police Ubuntu : http://www.fontsquirrel.com/fonts/ubuntu.

2 - On envoie la police ainsi téléchargée sur la page 'WebFont Generator' de Font Squirrel : http://www.fontsquirrel.com/tools/webfont-generator (choix : « Optimal »).

3 - On récupère le fichier compressé ainsi obtenu (nom : quelque chose comme ubuntufontkit....zip).

4 - On décompresse cette archive, laquelle contient notamment une petite démonstration, mais surtout quatre versions de la même police : ubuntu.ttf, ubuntu.eot, ubuntu.woff, et ubuntu.svg. Sans entrer dans les détails, disons qu'en déclarant ces 4 formats, nous sommes certains que n'importe quelle machine pourra utiliser la police choisie. Par exemple, les mobiles Apple utiliseront exclusivement la version svg.

5 -On envoie les 4 précieux fichiers évoqués sur notre serveur. Par exemple, pour JSN Boot, un emplacement tout indiqué pour déposer ces fichiers de police pourrait être /templates/jsn_boot_pro/fonts.

6 - On déclare cet emplacement en haut de la feuille de style /templates/jsn_boot_pro/custom.css.

Je n'ai pas sous la main les fichiers Ubuntu, mais voici ce que l'on peut insérer dans le custom.css pour Oswald Regular (car la méthode peut bien sûr très bien s'appliquer aussi à Oswald) :

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

7 - Il reste à remplacer, partout où c'est nécessaire, les références à Oswald par Oswaldregular, et bien sûr les références à Sego UI par Ubuntu (voir plus haut) — de préférence dans le custom.css, de façon à ne pas toucher aux fichiers d'origine du template.


Et c'est tout (si l'on peut dire). Enfin presque, puisque ensuite il faudrait que tu adaptes le menu principal aux écrans de dimensions moyenne (à vue de nez : les écrans dont la largeur est comprise entre 960 et 1260 px), ainsi que la position du lien 'Mentions Légales', en bas à droite.

[FlodAriege]

Re : Correspondance entre polices

Plus exactement : les mobiles Apple négligent les fontes téléchargées chez Google. Mais les MAC et machines sous Linux n'ont pas forcément non plus Segoe UI, une police répandue sur PC, mais qui n'est pas téléchargée chez Google par le template.

Il faut bien distinguer le cas d'Oswald et celui de Segoe UI. (...)

OK, capté, donc disons que je garde Oswald pour mes Hn, et que je choisis Ubuntu, qui est effectivement très ressemblante, pour remplacer Segoe UI dans mes textes.

L'autre solution est plus subtile et plus technique, mais présente le double avantage de l'indépendance et d'une totale compatibilité avec toutes les machines, iPhone et iPad y compris.

En résumé : (1°) télécharger une police libre / open source, (2°) demander à l'ami Font Squirrel de transformer la police en question en pack webfont compatible toutes machines, (3°) installer les différentes versions de la police ainsi obtenues sur le serveur, et modifier les styles CSS en conséquence.

=> Supposons par exemple — au hasard — que nous souhaitions remplacer Segoe UI par Ubuntu.

1 - On télécharge la police Ubuntu : http://www.fontsquirrel.com/fonts/ubuntu.

2 - On envoie la police ainsi téléchargée sur la page 'WebFont Generator' de Font Squirrel : http://www.fontsquirrel.com/tools/webfont-generator (choix : « Optimal »).

3 - On récupère le fichier compressé ainsi obtenu (nom : quelque chose comme ubuntufontkit....zip).

4 - On décompresse cette archive, laquelle contient notamment une petite démonstration, mais surtout quatre versions de la même police : ubuntu.ttf, ubuntu.eot, ubuntu.woff, et ubuntu.svg. Sans entrer dans les détails, disons qu'en déclarant ces 4 formats, nous sommes certains que n'importe quelle machine pourra utiliser la police choisie. Par exemple, les mobiles Apple utiliseront exclusivement la version svg.

5 -On envoie les 4 précieux fichiers évoqués sur notre serveur. Par exemple, pour JSN Boot, un emplacement tout indiqué pour déposer ces fichiers de police pourrait être /templates/jsn_boot_pro/fonts.

OK, jusque là, je te suis, ça va je m'en sors. Enfin jusqu'au 4 parce que pour le 5 j'ai un gros doute.
Pour Oswald c'est facile : seule la version Regular est utilisée par le site, donc je n'ai que 4 fichiers à envoyer sur mon serveur.

Mais pour Ubuntu : bien sûr j'ai besoin de bold et italic en plus du regular.
Comment les combinaisons se font-elles ?
J'ai tout téléchargé, et ça me donne ceci :

Regular
Italic
Bold
Bold Italic
Light
Light Italic

(et aussi medium, medium italic, et condensed, mais je ne crois pas avoir besoin de ça)

J'hésite un peu entre light et regular, j'aimerais bien pouvoir faire le test sur mon site avant de décider, mais peu importe, ce que je veux comprendre c'est comment écrire, à l'étape 6, les lignes qui vont bien pour que mon site puisse afficher correctement l'ensemble des combinaisons, disons sur la base de la version regular ?

6 - On déclare cet emplacement en haut de la feuille de style /templates/jsn_boot_pro/custom.css.

Je n'ai pas sous la main les fichiers Ubuntu, mais voici ce que l'on peut insérer dans le custom.css pour Oswald Regular (car la méthode peut bien sûr très bien s'appliquer aussi à Oswald) :

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

7 - Il reste à remplacer, partout où c'est nécessaire, les références à Oswald par Oswaldregular, et bien sûr les références à Sego UI par Ubuntu (voir plus haut) — de préférence dans le custom.css, de façon à ne pas toucher aux fichiers d'origine du template.

Et c'est tout (si l'on peut dire). Enfin presque, puisque ensuite il faudrait que tu adaptes le menu principal aux écrans de dimensions moyenne (à vue de nez : les écrans dont la largeur est comprise entre 960 et 1260 px), ainsi que la position du lien 'Mentions Légales', en bas à droite.

Pour adapter le menu principal aux écrans de dimensions moyennes, que me conseilles-tu ?
Y a-t-il un moyen de forcer l'affichage en mode mobile en deçà d'une certaine largeur d'écran ?
Ou bien me conseilles-tu plutôt d'essayer de raccourcir le texte (enlever "nos" par exemple) de mes liens de menu pour qu'ils s'affichent sur une seule ligne y compris sur des écrans de 960 à 1260 px ?

[PhilJ]

Re : Correspondance entre polices

Bonjour,

[...] OK, jusque là, je te suis, ça va je m'en sors. Enfin jusqu'au 4 parce que pour le 5 j'ai un gros doute. Pour Oswald c'est facile : seule la version Regular est utilisée par le site, donc je n'ai que 4 fichiers à envoyer sur mon serveur. Mais pour Ubuntu : bien sûr j'ai besoin de bold et italic en plus du regular.
Comment les combinaisons se font-elles ? J'ai tout téléchargé, et ça me donne ceci :

Regular
Italic
Bold
Bold Italic
Light
Light Italic

(et aussi medium, medium italic, et condensed, mais je ne crois pas avoir besoin de ça)

J'hésite un peu entre light et regular, j'aimerais bien pouvoir faire le test sur mon site avant de décider

...En effet, il vaudrait mieux opérer une sélection. Sinon, la vitesse de chargement des pages risque d'en subir les effets.

=> Tu peux essayer de copier coller une ou deux phrases dans Google Fonts pour voir la différence de rendu entre les versions regular et light.

[...] comment écrire, à l'étape 6, les lignes qui vont bien pour que mon site puisse afficher correctement l'ensemble des combinaisons, disons sur la base de la version regular ?

...C'est précisément l'exemple que j'ai donné précédemment : tu insères la déclaration CSS @fontface pour Oswald Regular au début de la feuille de style custom.css du template.

Les modèles de déclaration pour les différentes variantes de la même police se trouvent dans la feuille stylesheet.css délivrée par Font Squirrel (à adapter cependant avec le bon chemin vers le dossier où sont déposées les fontes).

Et bien sûr idem pour Ubuntu.

...Mais bien sûr, une fois ceci fait, il te faudra faire des surcharges de style dans custom.css (Joomla ne pourra pas deviner tout seul que tu souhaites utiliser les polices Oswald Regular dans telle ou telle balise, et Ubuntu pour telle ou telle autre balise).

Pour adapter le menu principal aux écrans de dimensions moyennes, que me conseilles-tu ?
Y a-t-il un moyen de forcer l'affichage en mode mobile en deçà d'une certaine largeur d'écran ?
Ou bien me conseilles-tu plutôt d'essayer de raccourcir le texte (enlever "nos" par exemple) de mes liens de menu pour qu'ils s'affichent sur une seule ligne y compris sur des écrans de 960 à 1260 px ?

J'ai fait l'essai (Firebug), et la réponse est non : enlever seulement l'adjectif possessif, qui en l'occurrence est très court ('Nos') ne suffira pas. Il faut intervenir au niveau CSS dans la feuille custom.css. Plus exactement, dans une section 'media queries' à créer.

La « fenêtre à cibler » se situe entre 960 et 1200 px. En-deçà de 960 px, le menu devient compact, et le menu est correct au-delà de 1200 px.

Peut-être même les valeurs les plus cohérentes, par rapport à l'existant, seraient-elle plus exactement : 961 px et 1199 px.

=> Tu peux essayer d'insérer très exactement ce qui suit à la fin du custom.css :
—

/* =============== MEDIA QUEYRIES =============== */

@media screen and (min-width: 961px) and (max-width: 1199px) {

div.jsn-modulecontainer ul.menu-mainmenu > li > a {
font-size: 1.1em; /* au lieu de 1.3em */
}

}
/* =============== ============== =============== */

—
Dernière chose, pendant que nous y sommes :

Remplacer text-align: right; dans :
—

<p style="text-align: right;"><a title="La transition énergétique est une chance !" href="http://............" target="_blank"><img style="vertical-align: top;" title="La transition énergétique est une chance !" onmouseover="this.src='/images/logos/logo-transitionenergetique_org-50x68-pressed.png';" onmouseout="this.src='/images/logos/logo-transitionenergetique_org-50x68-normal.png';" src="/images/logos/logo-transitionenergetique_org-50x68-normal.png" alt="logo-transitionenergetique org-50x68-normal" /></a>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="/index.php/mentions-legales">Mentions légales</a></p>
—

par : text-align: center;

Ou bien, mieux : remplacer <p style="text-align: right;"> dans ce même code, par : <p class="legal">, puis insérer :

1. Dans la partie haute du custom.css :
   —
   p.legal {
   text-align: right;
   }
   —
2. Et à l'intérieur de la déclaration media queries du custom.css :
   —
   p.legal {
   text-align: center;
   }
   —

...ceci afin que le lien vers les mentions légales soit toujours accessible (= cliquable).

[FlodAriege]

Re : Correspondance entre polices

...C'est précisément l'exemple que j'ai donné précédemment : tu insères la déclaration CSS @fontface pour Oswald Regular au début de la feuille de style custom.css du template.

Les modèles de déclaration pour les différentes variantes de la même police se trouvent dans la feuille stylesheet.css délivrée par Font Squirrel (à adapter cependant avec le bon chemin vers le dossier où sont déposées les fontes).

Et bien sûr idem pour Ubuntu.

Donc je mets les différentes variantes d'Ubuntu regular, si je te suis bien, càd, en admettant que je choisisse regular (et non light) :
Regular
Italic
Bold
Bold Italic

@font-face {
font-family: 'ubunturegular';
src: url('ubuntu-r-webfont.eot');
src: url('ubuntu-r-webfont.eot?#iefix') format('embedded-opentype'),
url('ubuntu-r-webfont.woff') format('woff'),
url('ubuntu-r-webfont.ttf') format('truetype'),
url('ubuntu-r-webfont.svg#ubunturegular') format('svg');
font-weight: normal;
font-style: normal;

}


@font-face {
font-family: 'ubuntubold_italic';
src: url('ubuntu-bi-webfont.eot');
src: url('ubuntu-bi-webfont.eot?#iefix') format('embedded-opentype'),
url('ubuntu-bi-webfont.woff') format('woff'),
url('ubuntu-bi-webfont.ttf') format('truetype'),
url('ubuntu-bi-webfont.svg#ubuntubold_italic') format('svg');
font-weight: normal;
font-style: normal;

}




@font-face {
font-family: 'ubuntubold';
src: url('ubuntu-b-webfont.eot');
src: url('ubuntu-b-webfont.eot?#iefix') format('embedded-opentype'),
url('ubuntu-b-webfont.woff') format('woff'),
url('ubuntu-b-webfont.ttf') format('truetype'),
url('ubuntu-b-webfont.svg#ubuntubold') format('svg');
font-weight: normal;
font-style: normal;

}


@font-face {
font-family: 'ubuntuitalic';
src: url('ubuntu-ri-webfont.eot');
src: url('ubuntu-ri-webfont.eot?#iefix') format('embedded-opentype'),
url('ubuntu-ri-webfont.woff') format('woff'),
url('ubuntu-ri-webfont.ttf') format('truetype'),
url('ubuntu-ri-webfont.svg#ubuntuitalic') format('svg');
font-weight: normal;
font-style: normal;

}

...Mais bien sûr, une fois ceci fait, il te faudra faire des surcharges de style dans custom.css (Joomla ne pourra pas deviner tout seul que tu souhaites utiliser les polices Oswald Regular dans telle ou telle balise, et Ubuntu pour telle ou telle autre balise).

J'ai bcp de mal à comprendre comment Joomla s'y retrouve mais j'imagine que quand je mets une balise em il ira chercher la fonte ubuntuitalic, et strong ce sera ubuntubold, etc.

Pour ces "surcharges de style", j'imagine que si je te demande comment on fait tu vas me dire que tu l'as déjà expliqué dans ton précédent post... Bon, faut être indulgent PhilJ, le css tu sais bien que c'est du klingon pour moi

J'ai fait l'essai (Firebug), et la réponse est non : enlever seulement l'adjectif possessif, qui en l'occurrence est très court ('Nos') ne suffira pas. Il faut intervenir au niveau CSS dans la feuille custom.css. Plus exactement, dans une section 'media queries' à créer..

Tu veux sérieusement que je "crée une section" dans la feuille css ?? OK, je vais potasser ça ce weekend, je serais moins c*** lundi.
Merci d'avoir analysé mon problème pour moi et de m'apporter les solutions toutes calibrées, c'est super gentil de ta part.
A très vite (quand je commencerai à prendre l'eau dans la feuille css).
Bonne soirée.

[PhilJ]

Re : Correspondance entre polices

Donc je mets les différentes variantes d'Ubuntu regular, si je te suis bien, càd, en admettant que je choisisse regular [...]

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

...Non pas. En effet, le dossier des polices n'est pas le dossier courant (= /templates/jsn_boot_pro/css) mais un autre dossier, même s'il est situé au même niveau (= /templates/jsn_boot_pro/fonts).

Si tu écris littéralement comme ci-dessus, Joomla ne trouvera pas la police Ubuntu Regular, parce qu'il va la chercher dans le dossier courant de la feuille de style (= en l'occurrence /templates/jsn_boot_pro/css), alors que tu l'auras déposée dans /templates/jsn_boot_pro/fonts.

Le modèle que j'ai donné est :

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

Donc, si les polices sont, comme dans l'exemple ci-dessus, dans /templates/jsn_boot_pro/fonts, l'écriture correcte est :

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

je "crée une section" dans la feuille css ??

...Oui, enfin je dis section mais je ne garantis pas l'appellation. Plus important est de comprendre l'idée.

En l'occurrence, avec :
—

_______________________________________

@media screen and (min-width: 961px) and (max-width: 1199px) {
—
div.jsn-modulecontainer ul.menu-mainmenu > li > a {
font-size: 1.1em; /* au lieu de 1.3em */
}
—
}
_______________________________________
—

on impose à l'interpréteur CSS qui est dans le navigateur (= la plupart des navigateurs, sauf les anciennes versions) d'afficher les liens de menus avec une taille de police plus faible que la taille par défaut lorsque la largeur d'écran de l'appareil utilisé par le visiteur est comprise entre 961 et 1199 px : 1.1 em au lieu de 1.3 em par défaut.

Dès que cette idée est comprise, les altérations en fonction des largeurs des écrans des machines connectées deviennent elles aussi faciles à comprendre.

Un autre exemple pour que ce soit bien clair : un site propose un champ de recherche dans un container répondant au doux nom de search, mais on estime que les mobinautes n'ont pas besoin d'un tel champ.

Si l'on considère que la largeur d'écran à partir de laquelle on a affaire à une tablette plutôt qu'à un smartphone est 768 px (= largeur de l'iPad en mode portrait), on peut faire disparaître le champ en question d'un seul coup d'un seul en empêchant son affichage sur tous les smartphones ainsi définis avec :

_______________________________________

@media screen and (max-width: 767px) {
—
.search {
display: none;
}
—
}
_______________________________________

Traduction : si le média (@media) est un écran (screen), et (and) si la largeur de l'écran est au maximum de 767 px (max-width: 767px), alors ne pas afficher le champ de recherche.

[lefabdu51]

Re : Correspondance entre polices

il y a des erreurs dans la declaration font face:

si tu declare une police italique, alors il faut lui indiquer
font-style: italic et non font-style=normal;

si tu declare une police pour le gras,
tu doit lui indiquer font-weight:bold; et non font-weight:normal.

donc pour unbuntuitalic tu doit avoir :
font-style: italic

pour unbuntubold tu doit avoir :
font-weight:bold

ce qui permet d utiliser les propriétés font-stylee et font-weight.
Vu ce qu il y a d ecrit dans ce que je vois au dessus, ces deux propriétés css sont inopérante.


@font-face {
font-family: "Ma Super Fonte";
src: url('MaSuperFonte-Regular.ttf');
}
@font-face {
font-family: "Ma Super Fonte";
font-style: italic;
src: url('MaSuperFonte-Italic.ttf');
}
@font-face {
font-family: "Ma Super Fonte";
font-weight: bold;
src: url('MaSuperFonte-Bold.ttf');
}

[PhilJ]

Re : Correspondance entre polices

il y a des erreurs dans la declaration font face:

si tu declare une police italique, alors il faut lui indiquer
font-style: italic et non font-style=normal;

si tu declare une police pour le gras,
tu doit lui indiquer font-weight:bold; et non font-weight:normal.

...Exact. J'étais focalisé sur le chemin incorrect, mais il y avait aussi des erreurs sur le style et la graisse.

[FlodAriege]

Re : Correspondance entre polices

...Exact. J'étais focalisé sur le chemin incorrect, mais il y avait aussi des erreurs sur le style et la graisse.

Ah. Alors que moi pour l'instant j'essayais justement de comprendre comment gérer les gras, les italiques et… les gras italiques.
Je trouvais ça bizarre de voir 'normal' partout.
Donc merci pour ça déjà et maintenant comment on fait pour bolditalic ?


Sent from my iPhone using Forum Joomla.fr mobile app

[lefabdu51]

Re : Correspondance entre polices

il faut combiner font-style et font-weight dans ta declaration et utiliser une police dédiée :
@font-face {
font-family: "Ma Super Fonte";
font-weight: bold;
font-style: italic;
src: url('MaSuperFonte-Bold-italic.ttf');
}

attention, l'ordre de declaration as de l importance:
Les selecteurs font-face ayant de multiples propriétés doivent etre déclarés après ceux ayant une simple propriété.

[FlodAriege]

Re : Correspondance entre polices

[/INDENT]
—
Dernière chose, pendant que nous y sommes :

Remplacer text-align: right; dans :
—

<p style="text-align: right;"><a title="La transition énergétique est une chance !" href="http://............" target="_blank"><img style="vertical-align: top;" title="La transition énergétique est une chance !" onmouseover="this.src='/images/logos/logo-transitionenergetique_org-50x68-pressed.png';" onmouseout="this.src='/images/logos/logo-transitionenergetique_org-50x68-normal.png';" src="/images/logos/logo-transitionenergetique_org-50x68-normal.png" alt="logo-transitionenergetique org-50x68-normal" /></a>*** ***** <a href="/index.php/mentions-legales">Mentions légales</a></p>
—

par : text-align: center;

(...)
...ceci afin que le lien vers les mentions légales soit toujours accessible (= cliquable).

J'ai viré le "text-align-right" (qui de toutes façons ne servait à rien vu que ce module est aligné par défaut à droite...) et ai inversé "mentions légales" et le logo : comme ça maintenant on peut toujours accéder aux mentions légales. Mais au détriment du logo Transition énergétique.
En effet, si j'aligne au centre (ou à gauche), tout se décale vers le milieu de l'écran : ce module doit vraiment être aligné à droite pour un rendu propre à l'écran.

Daneel me reprochait l'utilisation d'"espaces insécables" pour créer l'espace entre Mentions légales et le logo Transition énergétique.

Donc, tant que j'y suis, connaîtrais-tu une tactique pour obtenir le même résultat* sans ces " & n b s p " qui, je le comprends, s'apparentent à faire une tabulation ou une marge sous Word en frappant la barre espace comme une folle... Ca marche, mais c'est vraiment pas clean

Oui, mais... comment créer cet espace sans recourir à.. des espaces ???
En tout cas dans cette configuration (2 éléments sur la même ligne)

[lefabdu51]

Re : Correspondance entre polices

<span><a href="lien1.html"><img src="image1.png" /></a></span><span class="mg"><a href="mentions_legales.html">Mentions legales</a></span>

dans le fichier css:
.mg {margin-left:1em; }

[FlodAriege]

Re : Correspondance entre polices

Bon alors, petit edit :

J'ai tout bien fait, tout réussi à faire, je veux dire, sans que ça plante le site (ce qui est un miracle) mais...
malgré un après-midi passé à essayer de trouver les bons réglages, je ne suis pas arrivée à reproduire le résultat initial.

Je me retrouvais avec des Hn bien trop petits j'ai bien tenté qq réglages en em ou en %, mais sans bons résultats...

Ubuntu light, pas mal (regular bien trop condensé à l'écran) mais alors pour gérer Oswald comme les concepteurs du Template l'ont fait... pas moyen.

Résultat, j'ai (presque) tout remis dans son état initial.

Au moins aurai-je :
- appris à faire une surcharge css
- à remplacer une série d'espaces par une marge bien propre
- à réduire la police du main menu quand la taille d'écran le nécessite.

Et les mentions légales sont toujours cliquables.

J'ai quand même changé les polices de remplacement, mai ça ne résout pas le pb pour les mac.

[FlodAriege]

Re : Correspondance entre polices

<span><a href="lien1.html"><img src="image1.png" /></a></span><span class="mg"><a href="mentions_legales.html">Mentions legales</a></span>

dans le fichier css:
.mg {margin-left:1em; }

Super, merci ! Marche du feu de dieu.
Mais bizarrement pas en affichage mobile*... une idée de ce que je pourrais faire pour arranger ça ?

* la vue adaptative de Mozilla ne voit pas de problème, pourtant sur mon iPhone l'espace disparaît complètement...