28172 sujets

CSS et mise en forme, CSS3

Salut,

De retour avec mes histoires de typo CSS3 Smiley smile .
Pour un site en dev j'ai souhaite utiliser la police 'Swanky' mais alors que le graphiste a créé les titres de sa maquette Photoshop en "normal", c'est à dire en maigre, elle apparaît en gras dans ma page Smiley sweatdrop .

J'ai loupé un truc ?

@font-face {
font-family: 'Swanky';
src:  local('â'), url('../font/Swanky-and-Moo-Moo.ttf') format('truetype');
}
#menu_hp {
width: 352px;
font-family: "Swanky", "Helvetica", "Verdana", "Arial";
text-transform: uppercase;
margin-left: 117px;
}


Un moyen de forcer l'affichage en maigre ?

Merci à tous.
Tas typo Swanky-and-Moo-Moo.ttf n'est-elle pas déjà en bold ?

D'après le côte que tu donnes je ne vois aucune raison que tes textes soit en bold si ce n'est que la typo l'est nativement.
Merci pour ta réponse.

Non elle est en maigre par défaut, ci-dessous un essai photoshop avec dessous la capture web de la même police...

upload/2483-swankytest.jpg

A moins d'avoir loupé un bold quelque part dans mon code, je ne vois pas pourquoi cela me fait ça Smiley eek Pour un premier essai avec font-face en css3, c'est pas très concluant pour moi
Modifié par dldstyle (19 Oct 2010 - 12:13)
Salut Laurent,
si tu visualises ta page avec un navigateur Webkit ou sur Mac (le lissage sous-pixel donne l'impression que les lettres sont plus grasses), ça pourrait venir de là, mais faudrait-il encore que ça soit le cas.
body {-webkit-font-smoothing: antialiased;} devrait arranger ça (en principe).
bonjour,

J'avais archivé cet exemple dans mon blog Smiley smile
    
/* MgOpen Moderna */
/*  http://www.zvr.gr/typo/mgopen/index  */

    @font-face {
    font-family: MyHelvetica;
    src: local(« Helvetica Neue »),
    local(« HelveticaNeue »),
    url(MgOpenModernaRegular.ttf);
    }

    @font-face {
    font-family: MyHelvetica;
    src: local(« Helvetica Neue Bold »),
    local(« HelveticaNeue-Bold »),
    url(MgOpenModernaBold.ttf);
    font-weight: bold;
    }

    body { font-family: MyHelvetica, sans-serif; } 


source : http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
Salut Erwann, oh grand dieu des CSS Smiley biggrin

Je te remercie pour ton astuce car effectivement je bosse sur mac mais en testant sur FF Windows j'ai le même rendu excepté que je n'ai pas anti aliasing par défaut (du coup le rendu crènelé ne fait pas propre). Dommage, ce n'est pas -webkit-font-smoothing: antialiased;

Bwbk, j'ai testé le fait de forcer "font-style: normal" dans la déclaration de font-face mais ça ne change rien.

Je creuse ou je rame, c'est selon Smiley smile . Merci en tout cas pour vos coups de pouce !