28172 sujets

CSS et mise en forme, CSS3

• Bonjour à toutes et à tous.
Je finalise la nouvelle version de mon portfolio, et il me reste quelques détails à régler, dont un particulièrement agaçant concernant un problème de rendu d'une font, qui s'affiche différemment selon l'OS de l'utilisateur.
• Disposant uniquement d'un Macbook Pro sous OS X Lion, je m'en suis aperçu en demandant à un ami de me screener mon site (il est sous Windows XP il me semble).
Ma compagne, elle, est sur la dernière version d'Ubuntu (13.10).

• Je précise qu'il s'agit d'une font créée par moi-même sous Illustrator et Fontlab, et mise en place via font squirrel.
Sous linux : la font est très fine, difficilement perceptible, mais les proportions sont respectées.
Sous Windows (au moins XP) : la font est déformée. Ça donne ça (il s'agit de la typo du menu et du fil d'ariane) :
[imghttp://image.noelshack.com/fichiers/2013/50/1386868940-1420231-10202292473171747-195034917-nb.jpg]
Pas très glamour.

• Mon site est basé sur le thème Twenty Twelve de Wordpress (aucune ressemblance en fait, j'ai tout nettoyé pour n'en faire qu'à ma tête).
L'url : cliquez ici.

• L'intégration du font-face dans la feuille de style :
@font-face {
    font-family: 'anxiolyticregular';
    src: url('/wp-content/fonts/anxiolytic-webfont.eot');
    src: url('/wp-content/fonts/anxiolytic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/fonts/anxiolytic-webfont.woff') format('woff'),
        url('/wp-content/fonts/anxiolytic-webfont.ttf') format('truetype');
url('/wp-content/fonts/anxiolytic-webfont.svg#anxiolyticregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


• Ma question est donc : Qu'est-ce qui m'échappe ? Le problème vient-il de ma font ? De mon CSS ? Autre chose ?
Je sais bien que le moteur de rendu typographique varie d'un OS à l'autre, mais si je pouvais au moins rendre tout cela lisible ça serait fantastique. Merci par avance pour vos réponses.

PS : premier message sur le forum, mes excuses si mon topic n'est pas au bon endroit, s'il manque des infos, etc...
Ah oui, je précise que sur Opéra / FF / Chrome / Safari Mac, tout va bien, mais que sur l'ensemble des navigateurs windows, tout va mal Smiley langue
Modérateur
à 95% un problème de police. Les conversions automatiques peuvent déjà faire des dégâts sur des fontes bien faites à la base, mais sur des fontes faites à la méthode bourrin (j'ai ouvert le ttf dans fontforge, et bourrin c'est le terme) plein de problèmes peuvent apparaître, mais je ne suis pas assez calé pour répondre exactement laquelle.
p.s. Certains noms sont manquants ou comportent des caractères non supportés, les métriques ne sont pas renseignés, la plupart des valeurs oscilles entre l'aléatoire et le non-renseigné.

a écrit :
Ah oui, je précise que sur Opéra / FF / Chrome / Safari Mac, tout va bien, mais que sur l'ensemble des navigateurs windows, tout va mal

Oui, c'est l'os qui fournit les fonctionnalités pour afficher les fontes.
Merci pour ton commentaire.
En effet je n'ai pas fini la font, notamment le kerning qui est euh… bourrin comme tu dis. Je vais voir si je peux avoir de meilleurs résultats sans passer par font-squirrel tout en gardant la syntaxe, sinon je vais voir la font elle-même aussi..
Mais dieu ce que c'est long !
Ouais.

C’est un vrai boulot en fait. Ça occupe toute une vie de typographe pour fournir à peine quelques dizaines de caractères typographiques (entendons par là une «police d’écriture» complète). En moyenne c’est une année de travail complète pour avoir un caractère typographique de bonne qualité… Et ça demande des compétences très, très particulières (comme tu as du t’en rendre compte Smiley smile ).

Mais c’est un sujet passionnant, alors bon courage avec ta création Smiley cligne
Merci beaucoup pour les encouragements, je vais en avoir besoin haha. Je pensais m'en sortir un peu trop facilement il semblerait Smiley langue
Je marque le sujet comme résolu donc, puisqu'il semble désormais logique que la font soit elle-même le problème !