style de police: italique vs oblique en CSS

Quelle est la différence entre ces deux:

font-style:italic
font-style:oblique

J'ai essayé d'utiliser l' éditeur W3Schools mais je n'ai pas pu faire la différence.

Qu'est-ce que je rate?

Dans le sens le plus pur (concepteur de caractères), une oblique est une police romaine qui a été biaisée d'un certain nombre de degrés (8-12 degrés, généralement). Un italique est créé par le concepteur de caractères avec des caractères spécifiques (notamment des minuscules a) dessinés différemment pour créer une version plus calligraphique et inclinée.

Certaines fonderies ont créé arbitrairement des obliques qui ne sont pas nécessairement approuvées par les concepteurs eux-mêmes ... certaines polices ne devaient pas être en italique ni obliques ... mais les gens l'ont fait de toute façon. Et comme vous le savez peut-être, certains systèmes d'exploitation, en cliquant sur l'icône «italique», inclinent la police et créent une oblique à la volée. Pas une vue agréable.

Il est préférable de spécifier un italique uniquement lorsque vous êtes sûr que la police a été conçue avec un.

Généralement, un italique est une version spéciale de la police, alors qu'une version oblique est juste la version régulière légèrement inclinée. Ainsi, les deux sont inclinés et liés à la police standard, mais un italique aura des formulaires spéciaux spécialement conçus pour cela.

La plupart des polices ont une version italique ou oblique; Je n'en ai jamais vu un qui a les deux. (Si vous avez une version en italique, pourquoi vous embêter avec une version oblique?)

Le type oblique (ou incliné, incliné) est une forme de type légèrement inclinée vers la droite, utilisée de la même manière que le type italique. Contrairement au type italique, cependant, il n'utilise pas de formes de glyphes différentes; il utilise les mêmes glyphes que le type romain, sauf déformé.

Lecture ultérieure: style de police css oblique vs italique

Comme pour l' italique et l' oblique , la même différence est visible lorsque l'on compare l' italique au faux italique .

Vous verrez des faux italiques partout où une police normale est asymétrique font-style: italic;alors qu'une vraie police italique est conçue pour être inclinée.

Le bas des deux ll montre clairement la différence.

Voir l'exemple

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

`@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');
 }`

`@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;
}`