Police d'écriture - Taille et Qualité

22 décembre 2014 à 19:19:44

Salut à toutes et à tous ! Je commence le site web d'un groupe de Métal pour m'améliorer en Html/Css. J'ai choisis mon Background, tout est ok, j'ai mis mes titres, choisis une police, et c'est là qu'il y a deux problème (déjà, me diriez vous !). Je vous explique rapidement

J'ai choisis une police sur le site web Dafont.com : http://www.dafont.com/fr/zombified-anfa.font?text=Since&back=theme

Je la trouve plutôt joli, je décide de l'ajouter en titre. Et là, carnage ! Premier problème, je décide de la mettre en xx-large, et sa la rend encore plus petite qu'avec le h1 normal.. J'ai donc dû mettre le font-size à 200px. Pas un grand problème, mais c'est quand même plus facile de travailler avec des données relatives. Deuxième problème, la qualité est fortement réduite, on ne voit même pas le résultat.. Est-ce que cela viendrait de l'extension de fichier ou du fait que j'ai trop agrandis l'image ? Merci d'avance

Le screenshot du site :

SheepBild

22 décembre 2014 à 21:18:40

Up !

SheepBild

22 décembre 2014 à 23:07:38

Up.. Please..

casperweb

23 décembre 2014 à 1:35:01

bonsoir, pas besoin de faire un up toute les 2 heures, il faut attendre normalement 24h avant de remonté un sujet. De plus c'est la nuit, tu as seulement 1 818 visiteurs en ligne à cette heure.

je viens de regarder le fichier zombified-demo.html générer par Font Squirrel et les caractères on l'air d'être clair. tu n'aurais pas indiqué ta police en gras par hasard?

met ta page en ligne, pour voir si c'est le même effet sur un serveur.

Dégooglisons Internet

SnowH52

23 décembre 2014 à 8:00:45

Hello!

tu peux mettre ton code stp?^^

J'arrive pas bien à me représenter ton problème...

N'aies pas peur d'être curieux, qui n'essaie rien n'a rien :)

SheepBild

24 décembre 2014 à 1:42:10

Désolé pour le spam, et merci de m'avoir répondu Alors ! Pour le lien, c'est ici !

Pour le code HTML :

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="index.css" />
        <title>Since | Accueil</title>
    </head>

    <body>
		<header>
			<h1>S i n c e</h1>
			<h2> Le métal à l'état pur </h2>
		</header>
		<section>
			<h1> Actualités </h1>
			<article>
				<h2>Répetition première semaine</h2>
				<p>Aujourd'hui, Etienne a pris des pates dans le nez. Bonsoir le cadavre.</p>
			</article>
		</section>
		<section>
		<h1>Les compos</h1>
		</section>
    </body>
</html>

Et pour le CSS :

@font-face
{
    font-family: 'Zombie';
    src: url('ZOMBIFIED.ttf');
}

body
{
    background-image: url("images/zombie_bg.jpg");
	background-position: top right;
	background-repeat: no-repeat;
}

header h1
{
	font-family: Zombie;
	font-size: 200px;
}

Merci pour votre réponse et bonne soirée !

casperweb

24 décembre 2014 à 3:45:19

Bonsoir,

De manière générale on ne place pas un espace entre chaque lettre dans un texte (titre), si tu veux plus ou moins d'espace entre les lettres tu as la propriété letter-spacing: qui fait cela très bien. C'est ici que s'arrête le conseil techniques, le reste n'est fondé que sur des sensations et interprétation visuels.

Pour ce type de police, et vu l'image de fond, tu joues sur les contrastes blanc noir uniquement.

Le fait d'espacer les lettres crée un vide de couleur blanc, il serais plus profitable à l’œil humain de ne pas avoir ce changement de contraste. En limitant cet espace d'interlettrage tu donnes un effet visuel comme si tu avais un background noir.
Selon l’emplacement de ton texte, l'image de fond vient perturber le contraste blanc former par l'intérieur des lettres, tu peux indiquer un background blanc avec transparence. Si tu ne désire pas que cet effet de transparence traverse toute la page, tu peux passer ton titre en display inline .
N’hésite pas à agrandir la taille (je l'ai agrandis jusque 17em pour voir ce que cela donne) si après ces paramétrage cela ne te convient pas
l'affichage diffère avec le navigateur, sur chrome et opéra les taches noir à l'intérieur des lettres sont plus rapprochée donc plus sombre et moins lisible, l'inverse sur safari.

PS je suppose que tu sais qu' en précisant une seul police dans ta déclaration font-family, en cas de problème avec cette police, c'est la police par défaut du navigateur qui serra affichée.

voici le code que je te propose (sans obligation aucune, car sujet à interprétation)

header h1
{
    font-family: Zombie;
    font-size: 15em;
	 background: rgba(255,255,255,0.8); 
	 letter-spacing:  0.1em;
}

avec comme html (sans espace donc)

<h1>Since</h1>

et voici le rendu visuel, (à gauche chrome, à droite safari)

et pour Firefox (page entière)

maintenant c'est à toi de voir ce qu'il à lieu de faire, je ne vois pas comment je pourrais t'aider plus sur ce sujet.

Dégooglisons Internet

SheepBild

24 décembre 2014 à 17:57:25

Tout d'abord, merci beaucoup, merci d'avoir pris le temps de répondre !

J'ai corrigé les erreurs tout sa, mais dois-je en déduire que ma police sera forcément de mauvaise qualité du Google et Opéra ? N'y a-t-il pas une solution ?

casperweb

24 décembre 2014 à 18:58:32

si bien sur il y as des solutions, je dirais en premier "Quels sont les raisons qui vous poussent à choisir cette police?"

en deuxième pourquoi ne pas gérer plusieurs fichier de police, votre déclaration @font-face est incomplète regardez celle du cours (pour IE c'est la police par défaut du navigateur qui s'applique) . En sélectionnant un autre fichier, peut être plus adapté, la police affichée serais plus lisible.

il est aussi possible (selon vos capacités) de modifier les fichiers de cette police ou créer votre propre police.

et enfin je dirais que vous pouvez, coté serveur en php au autre, renvoyer une police personnalisée et adaptée selon les différents navigateur (ou moteur de rendu) . (édit: police ou style différent)

les solutions ne manque pas, il serais intéressant de ce pauser la question du pourquoi une police personnalisée, et la plus-value que cela apporte à vos visiteurs. Ainsi que de l’opportunité de la dépense d’énergie (en temps et argent) pour cette fonctionnalité.

en dernier recours, et ce pour respecté une charte graphique précise (mais ce n'est pas votre cas), l'utilisation d'une image (par dessus un titre en html)

et d'autre solutions auxquelles je n'ai pas pensé....

pour toutes ces raisons

casperweb a écrit:

maintenant c'est à toi de voir ce qu'il à lieu de faire.

-
Edité par casperweb 24 décembre 2014 à 19:01:29

Dégooglisons Internet

thecenz1

24 décembre 2014 à 20:46:56

Salut, c'est juste une petite amélioration mais tu peux inclure le code suivant dans le CSS qui formate ton texte :

-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;

rigs

25 décembre 2014 à 0:57:08

Ou alors plus simple (enfin si c'est ce rendu que tu veux... comme on n'a pas de référence fourni) tu joue sur le font-weight.

Par exemple avec font-weight:100 (ou ce qui semble pareil font-weight:normal) le résultat me semble meilleur.

Edit : en utiliser les outils de chrome je viens de découvrir que pour h1 le paramètre par défaut de font-weight soit Bold.

-
Edité par rigs 25 décembre 2014 à 1:05:20

SheepBild

25 décembre 2014 à 19:13:58

Merci Rigs, c'est bon !

J'ai une belle police toute neuve

Je retourne coder, à la prochaine !

SheepBild

25 décembre 2014 à 19:20:55

Et Thecenz, merci, mais pourrait-tu développer ces basiles ? Que font-elles, précisément ?

thecenz1

5 janvier 2015 à 15:12:23

Pour la premiére çà lisse les caractéres (lissage du crenelage des pixels), voici un exemple :
http://maxvoltar.com/sandbox/fontsmoothing/

Pour la seconde :

Le navigateur privilégie la lisibilité par rapport à la vitesse de rendu ou la précision géométrique. Ceci active le crénage et les ligatures.

SheepBild

8 janvier 2015 à 18:30:53

Alors c'est ce que je cherchais, merci beaucoup !

J'ai complètement changé le design du site, mais il prend forme !