[Résolu] Problème d'héritage

Bonjour à tous
En affichant la page https://tests.osirisnet.net/news/n_09_18.htm?fr sur une tablette, je constate que la taille des caractères est trop petite.
J'ai regardé avec l'outil de développement de Firefox, je ne parviens pas à comprendre comment fonctionne l'héritage des font-size, ce qui me permettrait d'agrandir celui-ci.
par exemple avec le code :

<main id="pageBody"class="newsPage">
  ..........
  <article class="news">
    <header class="title">
      ..........
    </header>
    .................
  </article>
  ..........
</main>

Je constate que
<main> a un font-size défini par le CSS de #pageBody
<article a un font-size défini par .news
mais <header> hérite du font-size défini par #pageBody, alors que je m'attendrais à ce que ce soit celui de <article>

Il y a manifestement quelque chose que je ne comprends pas dans l'héritage des propriétés CSS
Pouvez vous m'aider à y voir plus clair?
Merci de votre aide

D'après l'inspecteur, ton header a bien la taille prévue par .news, donc les articles.


Modifié par Raphael (02 Oct 2018 - 19:05)

bazooka07 a écrit :
A la ligne n°119 du fichier common.css, font-size dépend de la largeur de l'écran :

@media screen and (max-width: 1024px)
html {
    font-size: 1.7vw;
}

Pas sûr que cela soit judicieux. A désactiver !

Certainement pas, c'est cette ligne de code qui rend tout le site responsive.

bazooka07 a écrit :
A la ligne n°112, il y a ceci :

html {
    font-size: 17px;
    font-family: 'AdelonSerial-Medium' ;
}

J'ai remplacé par ceci :

html {
    font-size: 16pt;
    font-family: 'Noto Sans', AdelonSerial-Medium, Sans-Serif ;
}

Cela rend les choses nettement plus sympa.
Où as tu pêché cette font "AdelonSerial-Medium" ?

Nous avons trouvé une revue d'égyptologie (imprimée) dont le style nous a paru correct.
Nous avons retrouvé le nom de la police par https://www.myfonts.com/WhatTheFont/ et acheté les droits sur le même site.
Modifié par PapyJP (03 Oct 2018 - 11:28)

J'ai fait en sorte que la taille des caractères ne descende pas au dessous de 13px

@media screen and (max-width:800px) {
	.news {font-size:13px;}
}

Si une tablette a une résolution 2 fois plus forte, les caractères seront 2 fois plus petits.

A lire à propos de la taille des polices (font-size) :
https://developer.mozilla.org/fr/docs/Web/CSS/font-size

bazooka07 a écrit :
Si une tablette a une résolution 2 fois plus forte, les caractères seront 2 fois plus petits.
A lire à propos de la taille des polices (font-size) :
https://developer.mozilla.org/fr/docs/Web/CSS/font-size

Oui, il parait que ça existe, mais personne ne m'a signalé de problème, je suppose que les possesseurs de ces tablettes ne vont pas visiter le site.
Je vois pas dans cette page comment on traite le problème de ces tablettes, il doit y avoir un @media qui permet de tester, mais je n'ai pas trouvé comment.

Sur le fond, le but de cette mécanique est d'adapter la taille des caractères à la taille de l'écran.
Pour un PC ou un appareil mobile de grande largeur, je mets une taille fixe de17px (il faudrait évidemment rendre ce nombre proportionnel à la résolution de l'écran) Pour une petite taille, j'ai mis un minimum à 12px, et entre les deux c'est proportionnel à la largeur de l'écran.
Il y a un mécanisme analogue pour les images qui illustrent ces pas: elles ont un max-width du genre 40vw pour ne pas occuper trop de place sur l'écran quand elles sont sensées être dans le flot du texte.

Quelqu'un peut il me donner un pointeur sur une doc permettant de traiter la haute définition?