Selon le didacticiel CSS du développeur mozilla :
italique: définit le texte pour utiliser la version italique de la police si disponible ; s'il n'est pas disponible, il simulera plutôt l'italique en oblique.
oblique: définit le texte pour utiliser une version simulée d'une police italique, créée en inclinant la version normale.
D'ici, nous déduisons que si une version italique de la police n'est pas disponible , l' italique et l' oblique se comportent de la même manière. Étant donné que l'extrait de code W3Schools ne spécifie aucun élément particulierfont-family , je crois qu'une police par défaut est utilisée; une police par défaut qui n'a probablement pas de version italique.
Mais comment rendre disponible une version italique de la police?
Cela signifie que nous avons au moins deux versions de la même police, une "régulière" et une en italique. Ceux-ci peuvent être spécifiés dans la <style>section avec la @font-facerègle. Veuillez lire brièvement: developer.mozilla , w3schools , tympanus.net . Comme vous pouvez le voir, la police est chargé en tant que fichier, ce qui peut avoir les extensions suivantes: eot, otf, woff, truetype.
Jusqu'à présent, j'ai trouvé deux façons de lier le fichier de police
URL absolue du fichier de police: (extrait de code de tympanus.net )
`@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'),
url (http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'),
url
(http://themes.googleusercontent.com/static/fonts/opensans/v8/
xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff)
format('woff');
}`
Veuillez noter que dans les deux cas, nous avons font-family: 'Open Sans', ce qui définit essentiellement la même police; mais dans le premier cas, nous avons font-style: normal;, tandis que dans le deuxième cas, nous avons font-style: italic;. Notez également que les URL pointent vers des fichiers différents. Maintenant, pour en revenir à l'extrait de code w3schools, c'est ainsi que le navigateur peut distinguer entre font-style: normaletfont-style: italic
en utilisant le chemin d'accès relatif au fichier de police: (extrait de code de metaltoad.com )
Au lieu de définir des valeurs de famille de polices distinctes pour chaque police, vous pouvez utiliser le même nom de famille de polices pour chaque police et définir les styles correspondants, comme suit:
`@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}`
Dans ce cas, les .eotfichiers doivent être stockés dans le même dossier que la page html. Encore une fois, notez que le font-familyest le même, le font-styleest différent, et les URL sont également différentes: Ubuntu- R -webfont vs Ubuntu- I -webfont.
Exemple d'une version italique de la police:
ctan.org : c'est un exemple de la façon dont différents fichiers / styles sont fournis pour la même police. Ni le gras ni l'italique ne sont calculés sur place, ils sont récupérés à partir de leur fichier spécifique.
