[Résolu] Les polices disponibles sous Android

Salut

J'aime le Garamond. Aussi ai-je décidé d'en charger une version allégé (33 Ko) à la place du fallback en Times.

		@font-face { 
			font-family: 'Garamond'; 
			src: local("Garamond"), url('Garamond-Regular-subset.woff') format('woff'); 
			font-display: swap; 
			}

Je n'aime pas sa version italique que j'ai remplacée par du Times italique.

	h3 {
		font-family: Times, serif;
		font-style: italic;
		}

Mais les appareils android n'ont pas l'air d'avoir du tout la police Times !!! et me la remplace par ce que j'ai identifié comme du Noto Serif italique qui est beaucoup trop gros !

J'ai alors tenté

font-family: Times, Garamond, serif;

Firefox android a italisé ma version allégée de Garamond d'une manière plutôt esthétique mais Chrome android s'obstine à me caser ce Noto Ital trop gros (voir images).
http://fra.free.fr/firefox.png
http://fra.free.fr/chrome.png

Je ne souhaite pas charger du Times italic juste pour android. Aussi ai-je tenté la méthode récente du size-adjust dans @font-face :

@font-face { 
		font-family: "Noto Serif"; 
		src: local("Noto Serif"), local("NotoSerif-Regular"), local("NotoSerif"), local("Noto Serif Italic"), local("NotoSerif-Italic"); 
		size-adjust: 82%;
		}
	h3 {
		font-family: Times, Garamond, "Noto Serif", serif;
		font-style: italic;
		}

Mais rien n'y fait ! J'ai toujours ce Noto Serif Italic beaucoup trop gros !
Il ne semble exister de méthode pour cibler que chrome sous android, ni de détecter la fonte réellement utilisée en CSS. (J'aimerais éviter le JS pour si peu.)

Que faire ?
Modifié par kerlutinoec (10 Mar 2022 - 11:34)

Personnellement j'ai considère qu'il y a deux philosophies :
- soit on développe pour un environnement donné, dans ce cas on peut faire confiance à l'environnement, disons... relativement...
- soit on développe pour de multiples plates-formes ; dans ce cas-là, mon paradigme serait plutôt "un pour les gouverner tous", dans ce cas hors de question de faire confiance aux fonts système et j'impose mes propres fonts.

On peut aussi choisir un juste milieu entre ces deux positions assez tranchées. Mais moi je choisis sans problème la deuxième.
Modifié par Olivier C (10 Mar 2022 - 12:32)

Quelles sont les fonts réellement disponibles sous Android ???

Certaines pages web indiquent qu'il s'agit de la font "Noto", d'autres "Roboto" (mais c'est pas ça en serif ital) et parfois "Droid" qui ressemble à Noto comme 2 gouttes d'eau !
Ca se trouve c'est cette dernière et pas Noto ce qui empecherait mon size-adjust de fonctionner.

(PS: Y'a quand même énormément d'article non daté dans le domaine informatique sur le ouèb !)
Modifié par kerlutinoec (10 Mar 2022 - 14:43)

Dernier essai...

Puis-je écrire

src: local("serif")

dans @font-face ?

@font-face { 
	font-family: "NautoSerif"; 
	src: local("serif"), local("Noto Serif"), local("NotoSerif-Regular"), local("NotoSerif"), local("Noto Serif Italic"), local("NotoSerif-Italic"); 
	size-adjust: 82%; 
	}

Ca me permettrait d'être sûr de cibler la bonne font...

Bon au final il semble tout à fait possible de cibler chrome sur android en combinant des @media, des @supports et des not...

J'ai toutefois décider de faire la même chose sur les principaux browsers android.
J'ai remis mon

font-family: Times, serif;

sans Garamond.
Et j'ai ciblé tous les écrans tactiles avec

@media (pointer:coarse)

puis en excluant Safari (seul moteur de rendu sur iPhone) avec

@supports not (-webkit-touch-callout:none)

Ce qui donne

@media (pointer:coarse) { @supports not (-webkit-touch-callout:none) { h3 { font-size: .82em; } } }