estilo da fonte: itálico vs oblíquo em CSS

209

Qual é a diferença entre estes dois:

font-style:italic
font-style:oblique

Tentei usar o editor do W3Schools, mas não consegui perceber a diferença.

o que estou perdendo?

rajakvk
fonte
17
Mensagem do futuro: A Wikipedia tem um exemplo muito bom, mostrando a diferença entre itálico e oblíquo .
Cornstalks
Pergunta de acompanhamento tardio (ou talvez isso deva entrar no UX?): Qual seria um caso de uso no mundo real para escolher especificamente a variante oblíqua? A variante itálica não é "sempre" preferível?
KlaymenDK
1
@KlaymenDK: É certo que este é um caso de uso restrito, mas posso imaginar preferir uma fonte oblíqua para legibilidade em determinados tamanhos de fonte pequenos em saídas pixeladas: Exemplo: usando uma fonte de 6pt a 8pt em uma pequena tela de fator de forma; algumas formas em itálico têm traços mais finos e mais ornamentos que podem diminuir a legibilidade em comparação com uma simples "inclinação".
Dan H

Respostas:

268

No sentido mais puro (designer de tipos), um oblíquo é uma fonte romana que foi inclinado em um certo número de graus (8 a 12 graus, geralmente). Um itálico é criado pelo designer de tipo com caracteres específicos (notavelmente a minúscula a) desenhados de maneira diferente para criar uma versão mais caligráfica e inclinada.

Algumas fundições criaram arbitrariamente oblíquos que não são necessariamente aprovados pelos próprios designers ... algumas fontes foram feitas para não ficar em itálico ou oblíquo ... mas as pessoas fizeram de qualquer maneira. E como você deve saber, alguns sistemas operacionais, ao clicar no ícone 'itálico', inclinam a fonte e criam um oblíquo em tempo real. Não é uma visão agradável.

É melhor especificar um itálico apenas quando tiver certeza de que a fonte foi projetada com um.

jcburns
fonte
37
Pode ser útil observar que quase nenhuma família de fontes no estado selvagem especifica faces em itálico e oblíqua, e a maioria dos mecanismos de renderização fornecerá a outra face se a face especificada não estiver disponível para essa fonte.
SingleNegationElimination
7
Essa resposta não aborda as diferenças funcionais, a exclusividade mútua ou as diferenças semânticas.
Ahnbizcad
2
Com fontes cirílicas, por exemplo, os caracteres em itálico geralmente são muito diferentes, muito mais parecidos com a forma cursiva, a forma oblíqua será oblíqua.
Moody_Mudskipper
1
O que um mecanismo de renderização deve fazer se eu disser "itálico", mas houver apenas uma versão "oblíqua" da fonte disponível? Ou vice-versa?
Michael
@SingleNegationElimination Seu comentário deveria ter sido a resposta, pois aborda o real tecnicismo no local quando se trata de CSS, em particular. A "resposta" escolhida aqui é mais sobre tipografia.
Vun-Hugh Vaw 26/09/18
72

Geralmente, um itálico é uma versão especial da fonte, enquanto uma versão oblíqua é apenas a versão regular inclinada um pouco. Portanto, ambos são inclinados e estão relacionados à fonte regular, mas um itálico terá formas de letra especiais criadas especialmente para ele.

A maioria das fontes possui uma versão em itálico ou oblíqua; Eu nunca vi um que tenha ambos. (Se você tem uma versão em itálico, por que se preocupar com uma versão oblíqua?)

Anthony Mills
fonte
21

O tipo oblíquo (ou inclinado, inclinado) é uma forma de tipo que se inclina levemente para a direita, usada da mesma maneira que o tipo itálico. Ao contrário do tipo itálico, no entanto, ele não usa formas de glifo diferentes; usa os mesmos glifos que o tipo romano, exceto distorcido.

Leitura adicional: estilo de fonte css oblíquo vs itálico

Zubair1
fonte
16

Assim como em itálico e oblíquo , a mesma diferença é visível ao comparar itálico com falso itálico .

Você verá itálico-falso sempre que uma fonte normal estiver inclinada, font-style: italic;enquanto uma fonte itálica verdadeira foi projetada para ser inclinada.

insira a descrição da imagem aqui

A parte inferior dos dois ll s mostra a diferença claramente.

Consultar exemplo

robstarbuck
fonte
2
Você quer dizer oblíquo igual a falso-itálico?
zwcloud
Sim, se nem uma oblíquo nem uma fonte em itálico estão disponíveis os resultados vão aparecer o mesmo (pelo menos em cromo para este exemplo) next.plnkr.co/edit/SpaDzXmSb1oADxUfKVg1?preview
robstarbuck
não poderia ter feito essa resposta sem uma ajuda visual, graças
Max Alexander Hanna
0

De acordo com o tutorial de CSS do desenvolvedor do mozilla :

  • itálico: define o texto para usar a versão em itálico da fonte, se disponível ; se não estiver disponível, simulará o itálico com oblíquo.
  • oblíquo: define o texto para usar uma versão simulada de uma fonte em itálico, criada inclinando a versão normal.

  • A partir daqui, deduzimos que, se uma versão em itálico da fonte não estiver disponível , itálico e oblíquo se comportam da mesma maneira. Como o snippet de código do W3Schools não especifica nenhum particular font-family, acredito que uma fonte padrão seja usada; uma fonte padrão que provavelmente não possui uma versão em itálico.

    Mas como disponibilizar uma versão em itálico da fonte?

    Isso significa que temos pelo menos duas versões da mesma fonte, uma "regular" e uma em itálico. Eles podem ser especificados na <style>seção com a @font-faceregra. Leia brevemente: developer.mozilla , w3schools , tympanus.net . Como você pode ver, a fonte é carregado como um arquivo, que pode ter as seguintes extensões: eot, otf, woff, truetype.

    Até agora, encontrei duas maneiras de vincular o arquivo de fonte

  • URL absoluto do arquivo de fonte: (trecho de código 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');
     }`

    Observe que nos dois casos temos font-family: 'Open Sans', que basicamente define a mesma fonte; mas no primeiro caso, temos font-style: normal;, enquanto no segundo caso, temos font-style: italic;. Observe também que os URLs apontam para arquivos diferentes. Agora, voltando ao snippet de código do w3schools, é assim que o navegador pode distinguir entre font-style: normalefont-style: italic

  • usando o caminho relativo para o arquivo de fonte: (trecho de código de metaltoad.com )

    Em vez de definir valores de família de fontes separados para cada fonte, você pode usar o mesmo nome de família de fontes para cada fonte e definir os estilos correspondentes, da seguinte forma:

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

    Nesse caso, os .eotarquivos devem ser armazenados na mesma pasta que a página html. Mais uma vez, observe que o font-familymesmo é, o font-styleé diferente e também os URLs são diferentes: Ubuntu- R -webfont vs Ubuntu- I -webfont.

    Exemplo de uma versão em itálico da fonte:

    ctan.org : este é um exemplo de como são fornecidos arquivos diferentes para diferentes estilos / pesos da mesma fonte. Nem negrito ou itálico são computados no local, eles são recuperados de seu arquivo específico.

  • asilo o coiote
    fonte
    minha resposta aborda a segunda parte da pergunta: "... mas não consegui dizer a diferença. O que estou perdendo?"
    wile the chacal