Problème de police

Par Benjamin Derepas, il y a 12 ans

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

Benjamin Derepas, il y a 12 ans

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;
}
Grafikart, il y a 12 ans

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, il y a 12 ans

Tu as importé comment tes fonts dans ton CSS?