Typographie sous IE10

J'ai un problème de typo : les polices que je déclare dans ma feuille de style ne s'affichent pas sous IE10 (que je ne possède pas : je m'en suis apperçus à la FNAC ).

Une feuille d'exemple qui devrait s'afficher avec sans-serif au minimum.

Et vraiment... je ne comprends pas pourquoi. Mon problème principal étant que je ne peu tester...

Auriez-vous une idée sur l'origine du problème ?

Mon code :

body {
    font: 300 1.4rem/2rem
                "HelveticaNeue-Light",
                "Helvetica Neue Light",
                "Helvetica Neue",
                Helvetica,
                Arial,
                sans-serif;
    letter-spacing: .04em;
    color: #777;
}

Tout le code ici.

Notez qu'a priori il ne s'agit pas de l'identation du code, j'ai le même problème sans identation ici.

S'agirait-il des décarations de taille en rem?

Un secours ne sera pas de refus.
Modifié par Olivier C (21 Oct 2013 - 12:21)

Bonjour,

Ça semble assez tordu mais IE10 ne voit pas du tout ta déclaration de body dans laquelle tu précises la fonte. Par contre il voit bien body.osx juste après (je suis sous Windows, c'est normal..?).

En l'état, IE10 ne voit aucune font-family à appliquer, ce qui explique ce rendu. Mettre un fallback sur html par exemple ne serait pas idiot (un simple sans-serif) mais ne corrigerait pas le problème.

Après un petit test sur dabblet, il s'avère que ce sont les rem les coupables. En enlevant simplement le rem du font-fize, ça marche (par contre le rem du line-height n'a pas l'air de le gêner).

Je n'ai malheureusement pas d'explication !

Merci.

C'est vrai que tout cela est très étrange. La multiplication des interprétations par les browers devient vraiment problématique dès que l'on veut corser un peu les choses...

Pour osx.body c'est normal : la page est statique, elle fera appel à du user agent via php par la suite avec une class osx ajouté par la suite pour cet os... à terme je le ferais sans doute via javascript.

Comme je ne peux pas tester en live : oserais-je te demander si ça passe avec ce code ?

body {
    font: 300 140%/2rem
                "HelveticaNeue-Light",
                "Helvetica Neue Light",
                "Helvetica Neue",
                Helvetica,
                Arial,
                sans-serif;
    letter-spacing: .04em;
    color: #777;
}

Merci d'avance.
Modifié par Olivier C (21 Oct 2013 - 14:40)

Salut Olivier,

Il me semble avoir lu qu'il s'agissait d'un problème relatif à l'utilisation d'une unité relative conjointement aux propriétés raccourcies (un peu la flemme de chercher... ) et qu'une solution de contournement consisterait à ne pas les utiliser, ce qui reviendrait à écrire :

body {
    color: #777777;
    font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 140%;
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 2rem;
}

Toujours selon ce dont je me souviens de manière approximative, le problème devrait être solutionné dans la version 11 d'IE.
Désolé, je ne peux pas vérifier ce que j'avance...
Si une bonne âme peut confirmer ou infirmer ce que j'avance (avant que je n'aille faire soigner les prémices d'une maladie dégénérative due à mon age avancé...)

Re,

Je confirme : la solution de 6l20 fonctionne Il suffit donc à priori de séparer les valeurs !

Ten a écrit :
Re,
Je confirme : la solution de 6l20 fonctionne Il suffit donc à priori de séparer les valeurs !

Merci, c'est une bonne nouvelle pour mes neurones

Je vais avoir un accès à IE10... mais pas avant mercredi! L'amateur que je suis enrage. Il me tarde car j'aimerais vraiment tester et creuser ce sujet d'importance...

Je me demandais si les valeurs raccourcies passaient en pourcentages, il semble que c'est le cas puisque le forum est codé de cette manière :

body {
	/* code autre */
	font: normal 85% Helvetica, Arial, Tahoma, Sans-Serif;
}

Moi aussi j'avais lu un truc du genre que présente 6l20, mais je ne sais plus où... Auparavant je déclarais tout en pixel, puis je doublais les valeurs en rem et ça fonctionnait. Edit : Raphaël Goetter a opté lui aussi pour cette solution sur son blog.

En codant exclusivement en rem j'avais décidé de laisser tomber IE8, mais s'ajoute aussi Opéra mini... et maintenant IE10 pour les valeurs en raccourcis... je vais peut être devoir y revenir...
Modifié par Olivier C (21 Oct 2013 - 18:41)

Olivier C a écrit :
Edit : Raphaël Goetter a opté lui aussi pour cette solution sur son blog.

Ouais, mais ce mec fait souvent n'importe quoi...

Et du coup, pour m'éviter d'attendre jusqu'à mercredi pour vérifier mes modifs' : ma page elle fonctionne ?

[une police sans-serif au minimum, plus des icônes "icomoon" elles aussi déclarées avec des valeurs relatives raccourcies précédemment, et qui n'apparaissait pas non plus].

Reconnaissance éternelle à tout ceux qui m'éviterons deux jours de suspense!
Modifié par Olivier C (21 Oct 2013 - 19:07)

J'ai bien une police Helvitica pour ma part sur ie10.
Par contre tes icônes sont décalés d'au moins 10px vers le haut.

benj a écrit :
Par contre tes icônes sont décalés d'au moins 10px vers le haut.

Argh ! IE et le reste du monde... Je vais mourir !

Enfin, merci pour ce retour benj, au moins, pour la typo, c'est toujours ça de gagné.

Je verrais plus tard pour le positionnement des icônes... Sans IE10 c'est littéralement du travail en aveugle...

Bonjour,

tu as la possibilité d'installer des VM via http://modern.ie mais si tu n'as pas IE10, tu n'as pas Win 7 a priori et perso je n'ai pas testé les autres images que celles pour Virtual PC. Il faut aussi un ordinateur bête de course mais ça c'est l'inconvénient de la virtualisation (l'avantage étant qu'on a pas besoin de 5 machines différentes ou de rebooter 4 fois...) et du haut débit et de la patience pour télécharger quelques Go
Modifié par Felipe (22 Oct 2013 - 12:51)

Pour info :

La correction m'a réglé un problème que j'avais remarqué précédemment. : les raccourcis en valeurs relatives des fonts avaient aussi une incidence sur les gradients placés sur le body d'Opéra.

Comme je suis sous Safari, par expérience, quand je constate un bug sous Opéra je sais qu'un bug sur IE n'est jamais bien loin...