Quelle est la différence entre ces deux éléments :
font-style:italic
font-style:obliqueJ'ai essayé d'utiliser l'éditeur de W3Schools mais je n'ai pas pu voir la différence.
Qu'est-ce que j'ai raté ?
Dans le sens le plus pur (designer de polices), une oblique est une police romaine qui a été inclinée d'un certain nombre de degrés (8-12 degrés, en général). Un italique est créé par le designer de polices avec des caractères spécifiques (notamment le a minuscule) dessinés différemment pour créer une version plus calligraphique et inclinée.
Certaines fonderies de polices ont arbitrairement créé des obliques qui ne sont pas nécessairement approuvées par les designers eux-mêmes... certaines polices n'étaient pas censées être italiques ou obliques... mais les gens l'ont fait quand même. Et comme vous le savez peut-être, certains systèmes d'exploitation vont, en cliquant sur l'icône 'italique', incliner la police et créer une oblique à la volée. Pas une vue agréable.
Il est préférable de spécifier un italique seulement lorsque vous êtes sûr que la police a été conçue avec un.
Il peut être utile de noter que presque aucune famille de polices dans la nature ne spécifie à la fois des faces Italique et Oblique, et la plupart des moteurs de rendu fourniront l'autre face si la face spécifiée n'est pas disponible pour cette police.
Cette réponse ne traite pas des différences fonctionnelles, de l'exclusivité mutuelle ou des différences sémantiques.
Avec des polices cyrilliques par exemple, les caractères en italique seront souvent très différents, beaucoup plus proches de la forme cursive, la forme oblique restera simplement oblique.
Généralement, un italique est une version spéciale de la police, tandis qu'une version oblique est simplement la version régulière inclinée un peu. Donc les deux sont penchés et se rapportent à la police régulière, mais un italique aura des formes de lettres spéciales faites spécialement pour lui.
La plupart des polices ont soit une version italique, soit une version oblique; je n'en ai jamais vu une qui a les deux. (Si vous avez une version italique, pourquoi se préoccuper d'une version oblique?)
Le type oblique (ou incliné, en pente) est une forme de type qui penche légèrement 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 glyphe différentes; il utilise les mêmes glyphes que le type romain, sauf qu'ils sont déformés.
Lecture supplémentaire: css font style oblique vs italique
Tout comme l'italique et l'oblique, la même différence est visible en comparant l'italique avec l'italique faux.
Vous verrez des faux-italiques partout où une police normale est inclinée avec 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.
Oui, si ni une police oblique ni une police italique ne sont disponibles, les résultats apparaîtront de la même manière (du moins dans Chrome pour cet exemple) next.plnkr.co/edit/SpaDzXmSb1oADxUfKVg1?preview
According to tutorial CSS du développeur Mozilla :
italic : Définit le texte à utiliser la version italique de la police si disponible ; si elle n'est pas disponible, elle simule l'italique avec oblique à la place.
oblique : Définit le texte à utiliser une version simulée d'une police italique, créée en inclinant la version normale.
À partir de là, nous déduisons que si une version italique de la police n'est pas disponible, à la fois italic et oblique se comportent de la même manière. Comme l'extrait de code de W3Schools ne spécifie pas une font-family particulière, je crois qu'une police par défaut est utilisée ; une police par défaut qui ne possède probablement pas de version italique.
Mais comment rendre une version italique de la police disponible ?
Cela signifie que nous avons au moins deux versions de la même police, une "régulière" et une italique. Celles-ci peuvent être spécifiées dans la section </code> avec la règle <code>@font-face</code>. Veuillez lire brièvement : <a href="https://developer.mozilla.org/fr/docs/Web/CSS/@font-face" rel="nofollow noreferrer">developer.mozilla</a>, <a href="https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp" rel="nofollow noreferrer">w3schools</a>, <a href="https://tympanus.net/codrops/css_reference/font-face/" rel="nofollow noreferrer">tympanus.net</a>. Comme vous pouvez le voir, la police est chargée comme un fichier, qui peut avoir les extensions suivantes : <code>eot, otf, woff, truetype</code>.</p> <p>Jusqu'à présent, j'ai trouvé deux façons de lier le fichier de police <li> URL absolue du fichier de police : (extrait de code de <a href="https://tympanus.net/codrops/css_reference/font-face/" rel="nofollow noreferrer">tympanus.net</a>)</p> <pre><code>`@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'); }` </code></pre> <p>Veuillez noter qu'en... </p> <p>utilisant le chemin relatif vers le fichier de police : (extrait de code de <a href="https://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles" rel="nofollow noreferrer">metaltoad.com</a>)</p> <blockquote> <p>Au lieu de définir des valeurs de font-family séparées pour chaque police, vous pouvez utiliser le même nom de font-family pour chaque police, et définir les styles correspondants, comme ceci : </p> </blockquote> <pre><code>`@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; }` </code></pre> <p>Dans ce cas, les fichiers <code>.eot</code> doivent être stockés dans le même dossier que la page html. Encore une fois, remarquez que la <code>font-family</code> est la même, le <code>font-style</code> est différent, et aussi les urls sont différentes : Ubuntu-<strong>R</strong>-webfont vs Ubuntu-<strong>I</strong>-webfont.</p> <p><b>Exemple d'une version italique de la police :</b></p> <p><a href="http://tug.ctan.org/fonts/anonymouspro/truetype/" rel="nofollow noreferrer">ctan.org</a> : cela est un exemple de la manière dont différents fichiers sont fournis pour différents styles/poids de la même police. Ni gras ni italique ne sont calculés sur place, ils sont récupérés à partir de leur fichier spécifique. </p></x-turndown>
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
25 votes
Message from the future: Wikipedia a un très bel exemple montrant la différence entre italique et oblique.
0 votes
Question de suivi tardif (ou peut-être cela devrait-il aller dans UX?) : Quel serait un cas d'utilisation réel pour choisir spécifiquement la variante oblique ? N'est-ce pas que la variante italique est "toujours" préférable ?
1 votes
@KlaymenDK: Certes, il s'agit d'un cas d'utilisation restreint, mais je peux imaginer préférer une police oblique pour la lisibilité dans certaines tailles de police petites sur des sorties pixelisées: Exemple: en utilisant une police de 6pt à 8pt sur un petit écran à facteur de forme; certaines formes italiques ont des traits plus fins et plus d'ornements qui peuvent diminuer la lisibilité par rapport à une simple "oblique".