style de police: italique vs oblique en CSS

209

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?

rajakvk
la source
17
Message du futur: Wikipédia a un très bel exemple montrant la différence entre l' italique et l' oblique .
Cornstalks
Question de suivi tardive (ou peut-être que cela devrait aller dans UX?): Quel wolud pourrait être un cas d'utilisation réel pour choisir spécifiquement la variante oblique? La variante italique n'est-elle pas "toujours" préférable?
KlaymenDK
1
@KlaymenDK: Certes, il s'agit d'un cas d'utilisation étroit, mais je peux envisager de préférer une police oblique pour la lisibilité dans certaines petites tailles de police sur les sorties pixélisées: Exemple: utilisation d'une police de 6 pt à 8 pt 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 à un simple "oblique".
Dan H

Réponses:

269

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.

jcburns
la source
37
Il peut être utile de noter que presque aucune famille de polices dans la nature ne spécifie les faces italiques et obliques, et la plupart des moteurs de rendu fourniront l'autre face si la face spécifiée n'est pas disponible pour cette police.
SingleNegationElimination
7
Cette réponse ne traite pas des différences fonctionnelles, de l'exclusivité mutuelle ou des différences sémantiques.
ahnbizcad
2
Avec les polices cyrilliques par exemple, les caractères italiques seront souvent très différents, beaucoup plus comme la forme cursive, la forme oblique sera juste oblique.
Moody_Mudskipper
1
Qu'est-ce qu'un moteur de rendu est censé faire si je dis "italique" mais il n'y a qu'une version "oblique" de la police disponible? Ou vice versa?
Michael
@SingleNegationElimination Votre commentaire aurait dû être la réponse car il aborde la véritable technicité en place en ce qui concerne CSS en particulier. La "réponse" choisie ici concerne davantage la typographie.
Vun-Hugh Vaw
72

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?)

Anthony Mills
la source
21

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

Zubair1
la source
16

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.

entrez la description de l'image ici

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

Voir l'exemple

robstarbuck
la source
2
Voulez-vous dire oblique est faux-italique?
zwcloud
Oui, si aucune police oblique ou italique n'est disponible, les résultats apparaîtront les mêmes (au moins en chrome pour cet exemple) next.plnkr.co/edit/SpaDzXmSb1oADxUfKVg1?preview
robstarbuck
n'aurait pas pu faire cette réponse sans aide visuelle, merci
Max Alexander Hanna
0

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.

  • wile le coyote
    la source
    ma réponse porte sur la deuxième partie de la question: "... mais n'a pas pu faire la différence. Qu'est-ce qui me manque?"
    wile le coyote