Problème de police

Benjamin Derepas
Les bases HTML/CSS

Bonjour,

J'ai remarquer une légère différence, entre le rendu de mon site sous Mac OS et Windows (sur le navigateur Chrome )
Voici en premier le rendu sous le Mac :

Et voici sous Windows :

Au niveau du CSS :

-webkit-font-smoothing: antialiased;
font-family: "Roboto", Helvetica, Arial, sans-serif;
text-rendering: optimizelegibility;

Auriez vous une explication ? (les fonts sont Roboto et Bitter

4 réponses

coloo
Réponse acceptée

Peut etre l'article est un peu vieux mais il parle de différent moteur de rendu

Mac os a le moteur "quartz" pour tous ses navigateur alors que sur windows uil y a quelque différence. Peut etre que les moteurs de rendu ont changé mais je pense que c'est le même combat.

Grafikart
Réponse acceptée

Tu ne peux pas avoir le même rendu entre les 2 os ils n'antialias pas de la même façon. De manière général sur MacOs tout semble plus bold :D

Nairolf

Tu as importé comment tes fonts dans ton CSS?

Benjamin Derepas
Auteur

Via google Webfont et @font-face

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v9/CrYjSnGjrRCn0pd9VQsnFOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
@font-face {
font-family: 'Bitter';
font-style: normal;
font-weight: 400;
src: local('Bitter-Regular'), url(http://themes.googleusercontent.com/static/fonts/bitter/v4/2PcBT6-VmYhQCus-O11S5-vvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}

::-moz-selection { /* Pour firefox */
background: #20354A;
color:#E74C3C;
}
::selection { /* Pour les autres */
background: #20354A;
color:#E74C3C;
}
body {
margin: 0;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 24px;
color:rgb(32, 53, 74);
text-align: justify;
-webkit-font-smoothing: antialiased;
background:url(../img/noise.jpg) #EFEFEF;
}