fonte monospace : rendu étrange

Marsh Posté le 02-04-2013 à 14:32:49

Hi all :hello:

J'ai actuellement un petit souci avec une fonte / police de caractère externe, de type monospace ( source code pro ) : la hauteur de certains chiffre varie selon la taille appliquée, et juste pour corser les choses, ce ne sont pas toujours les mêmes dont la hauteur varie :pt1cable:

exemple : ( 16px, 18px et 22px )

( gauche et droite sont identiques, j'ai juste mis les différences de hauteur en évidence à gauche)

16px : tous les chiffres ont la même hauteur, excepté le 1 qui est plus grand
18px : tous les chiffres ont la même hauteur, excepté le 4 , 5 , 6 , 7 qui sont plus petits
22px : tous les chiffres ont la même hauteur, excepté le 5 et le 7 qui sont plus petits

Si quelqu'un a une explication valable, je suis preneur :bounce:

ci-après, le code de la page de test ( nécessite les polices externes, cf-lien ci-dessus )

Code :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml;charset=utf-8" />
<title>font test</title>
<style type="text/css">
* {
padding : 0 ;
margin : 0 ;
border : 0 ;
font-family : 'Source Code', monospace ;
font-weight : normal ;
}
h1 ,
h2 ,
p
{
padding : 1em 20px ;
border-bottom : 1px rgb(170,170,170) solid ;
color : rgb(150,150,150) ;
}
h1 {
font-size : 16px ;
}
h2 {
font-size : 18px ;
}
p {
font-size : 22px ;
}
@font-face
{
font-family : 'Source Code' ;
src : url('fonts/woff/source-code-regular.woff') format('woff') ,
url('fonts/ttf/source-code-regular.ttf') format('truetype'),
url('fonts/svg/source-code-regulart.svg') format('svg') ;
font-weight : normal ;
font-style : normal ;
}
@font-face
{
font-family : 'Source Code' ;
src : url('fonts/woff/source-code-regular.woff') format('woff') ,
url('fonts/ttf/source-code-regular.ttf') format('truetype'),
url('fonts/svg/source-code-regulart.svg') format('svg') ;
font-weight : bold ;
font-style : normal ;
}
</style>
</head>
<body>
<h1>0123456789</h1>
<h2>0123456789</h2>
<p>0123456789</p>
</body>
</html>

Message édité par ANViL le 03-04-2013 à 11:28:37

---------------
Easy Ridin' ⎝⏠⏝⏠⎠

Reply

Marsh Posté le 02-04-2013 à 14:32:49

Reply

Marsh Posté le 02-04-2013 à 16:04:50

Quand on bosse avec des font custom, on prend le TTF ou le OTF? et on va dans fontsquirrel pour la conversion, là dans l'outil on coche n'oublie pas la fonction X-height qui va permettre d'aligner la font à la hauteur de la font système la plus proche et rulez
Mais à mon avis ton problème vient juste de la fonte qui est faite comme ça

Message cité 1 fois
Message édité par gatsu35 le 02-04-2013 à 16:05:30

---------------
Blablaté par Harko

Reply

Marsh Posté le 03-04-2013 à 10:56:47

gatsu35 a écrit :

Quand on bosse avec des font custom, on prend le TTF ou le OTF?

Pour les fontes custom, on prend en général le kit complet webfont :

EOT pour IE 8 et inférieur
WOFF pour tous les browers modernes ( c'est le standard web du futur )
TTF / OTF conviennent aux browsers modernes mais seront de toute façon remplacés à terme par les polices WOFF ( format optimisé )
SVG pour certains browsers mobiles qui ne supportent rien d'autre

gatsu35 a écrit :

et on va dans fontsquirrel pour la conversion, là dans l'outil on coche n'oublie pas la fonction X-height qui va permettre d'aligner la font à la hauteur de la font système la plus proche et rulez
Mais à mon avis ton problème vient juste de la fonte qui est faite comme ça

je n'ai pas trouvé la fonction x-height dans fontsquirrel [:transparency]

Ce qui me tue, c'est que lorsque je fais un 'test drive' avec la fonte Source Code Pro, et que j'entre 0123456789 ... tous les chiffres ont la même hauteur [:tinostar]

Message cité 1 fois

---------------
Easy Ridin' ⎝⏠⏝⏠⎠

Reply

Marsh Posté le 03-04-2013 à 11:07:07

ANViL a écrit :

Pour les fontes custom, on prend en général le kit complet webfont :

EOT pour IE 8 et inférieur
WOFF pour tous les browers modernes ( c'est le standard web du futur )
TTF / OTF conviennent aux browsers modernes mais seront de toute façon remplacés à terme par les polices WOFF ( format optimisé )
SVG pour certains browsers mobiles qui ne supportent rien d'autre

C'était pas une question en fait, je me suis trompé, c'était une affirmations, les webfonts, je maîtrise assez bien et ait fait assez de recherche la dessus en mode "crossbrowser" /rangesagrossemythe

ANViL a écrit :

je n'ai pas trouvé la fonction x-height dans fontsquirrel [:transparency]

Ce qui me tue, c'est que lorsque je fais un 'test drive' avec la fonte Source Code Pro, et que j'entre 0123456789 ... tous les chiffres ont la même hauteur [:tinostar]

Mode Expert => X-height Matching:

---------------
Blablaté par Harko

Reply

fonte monospace : rendu étrange

Sujets relatifs:

Leave a Replay