28172 sujets

CSS et mise en forme, CSS3

Canvas fontes pour site web

Bonjour,
J'ai décidé de reprendre la main sur les polices (et les chargés en local) qui étaient gérés par les templates de Joomla.
Pour cela, je voulai savoir si vous connaîtriez un excellent tuto ou votre modèle à vous sachant bien évidement qu'il devra être adapté.
A titre d'exemple, voici le mien, mais je me pose des questions sur l'utilisation des balises html et/ou body, span ... pour évider d'avoir des parties en ... arial !

Il y a aussi le problème de compatibilité avec le max de navigateurs.
Je vois par exemple que les anciennes versions IE<11 ne gèrent pas complètement les font-size avec chiffre (https://developer.mozilla.org/fr/docs/Web/CSS/font-size) ou il pourrait y a voir des problèmes avec rem ...


html {
	Verdana, sans-serif;
	font-size: 62.5%;
   font-size: calc(1em * 0.625); /* fix IE ? */
}
body{
	font-family: 'Merriweather',  serif;
 	font-size: 1.2rem; 
}
#sp-menu a{
	font-family: 'Lora', Verdana, sans-serif;
 	font-size: 2rem; 
 	font-weight: 600;
}
h1,h2,h3,h4{
	font-family: 'Lora',  serif;
}
h1{
	font-family: 'Lora',  serif;
	font-size: 2rem; 
 	font-weight: 600;
}
h2{
	font-family: 'Lora',  serif;
	font-size: 1.8rem; 
 	font-weight: 500;
}
...
/* merriweather-regular - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: normal;
  src: url('../_fontes/merriweather-v21-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Merriweather Regular'), local('Merriweather-Regular'),
       url('../_fontes/merriweather-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_fontes/merriweather-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_fontes/merriweather-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../_fontes/merriweather-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../_fontes/merriweather-v21-latin-regular.svg#Merriweather') format('svg'); /* Legacy iOS */
}

@+
Modifié par HDcms (04 Oct 2019 - 11:50)
Administrateur
Bonjour,

Une typo : il manque la propriété dans la 1ère règle Smiley smile

Est-ce que tu supportes des navigateurs plus supportés par leur fabricant (y compris les failles de sécurité !) ? Si tu ne testes même pas vraiment dans IE11, à quoi bon supporter ce navigateur ? Encore pour celui-là, ça dépend des clients (les nôtres c'est oui). Mais iOS 4 et IE 9 par contre Smiley rolleyes
EDIT : perso je ne charge que WOFF2 et WOFF, ça suffit pour tous les navigateurs IE11 et plus récent, Android et iOS même plus très récents.

Raphaël est arrivé à ça dans KNACSS : https://github.com/alsacreations/KNACSS/blob/master/sass/_library/_base.scss#L30 (EDIT2 : que tu as déjà dans ton code, j'avais pas fait gaffe Smiley confus )
Pour ce qui est des fontes, j'étais régulièrement embêté à devoir écraser la police déclarée sur les éléments h2-h5 donc on est arrivé en compliquant un peu le code (ligne 59 dans le lien précédent) à se passer de toute déclaration si la police sur les titres est la même que sur le texte de labeur. Toujours privilégier la cascade quand on peut Smiley smile
Modifié par Felipe (04 Oct 2019 - 14:19)
Bonjour,
Merci pour la contribution.
Pour ce nouveau site, je n'ai pas encore de stats suffisamment importante. Clairement je fais le choix de ne pa)as ternir compte des navigateurs obsolètes. Le problème est toujours dans la zone intermédiaire avec des versions comme IE11 !

Ok pour WOFF2 et WOF mais par ttf pour Safari ?

Le lien m'impressionne. Il n'est pas si basic que cela pour moi qui n'est pas touché aux css depuis des années.
Du coup, j'aurai besoin de traduction :
$weight-medium, @include font-size(h2); @if variable_exists, &:focus, ...

voir intérêts de reprendre toutes les balises: p, address, ol, ul, dl, blockquote, pre ...
surtout si on se base sur les 3 ou 4 types de navigateurs les plus importants

Il y a un fil en lien de discussion en lien ? explications dans une doc ? ou tutoriel ?
@+
Administrateur
C'est la source en Sass (enfin Scss) mais tu peux regarder le résultat compilé => knacss-unminified.css.
1ère partie = reboot.css, le "reset" de Bootstrap et 2e partie le fichier en lien précédemment, compilé.
Il y a 2 variables Scss pour 2 familles de fontes "texte de labeur" et "titres" que je configure au début d'un projet client. Si c'est identique pour un client donné, aucune font-family n'est déclarée sur les titres puisque pas besoin, ils héritent de body ou html.
La font-family à rallonge que tu peux voir, c'est la liste des fontes pré-installées sur pleiiiin de devices : iOS, Android, Windows, OS X, etc etc Il n'y a en effet pas "Arial" partout et les dévs de GitHub sont arrivés à cette belle liste qui fonctionne partout.
Évidemment tu vas vouloir ta ou tes fontes custom en 1er lieu mais ce fallback est très robuste.

Pour TTF => je ne vois qu'iOS 4 qui accepte TTF mais pas WOFF.
C'est une info qui s'obtient fastidieusement en comparant https://caniuse.com/#search=woff et https://caniuse.com/#search=ttf (et woff2 et svg et l'antédiluvien eot). Ou bien tu regardes WOFF, tu vois que c'est supporté par tout ce que tu supportes et c'est bon.
WOFF2 est ajouté (avant WOFF) parce que plus léger donc meilleures perfs.

Plus généralement => c'est très utile de déclarer le moins de choses possibles sur les éléments eux-mêmes, ça évite d'autant les surcharges dans la suite du projet.
Sachant que ma méthodologie c'est de mettre des classes HTML partout et de styler en CSS via ces classes. Chaque "composant" a sa feuille CSS (*) et ne style jamais un autre composant. Et n'est pas stylé par un autre composant non plus.
Les sélecteurs CSS sont donc à 98% des classes et pour des projets de moyenne importance, ça évite de devenir fou (ce n'est pas la seule méthodo possible loin de là).
(*) à la fin elles sont toutes concaténées en 1 seul maousse CSS, automatiquement.
Sujet clos
Aller à