font-style: italic vs oblique di CSS


209

Apa perbedaan antara keduanya:

font-style:italic
font-style:oblique

Saya mencoba menggunakan editor W3Schools tetapi tidak dapat membedakannya.

Apa yang saya lewatkan?


17
Pesan dari masa depan: Wikipedia memiliki contoh yang sangat bagus yang menunjukkan perbedaan antara miring dan miring .
Cornstalks

Pertanyaan tindak lanjut terlambat (atau mungkin ini harus masuk ke UX?): Apa wolud menjadi kasus penggunaan dunia nyata untuk secara khusus memilih varian miring? Bukankah varian miring "selalu" lebih disukai?
KlaymenDK

1
@KlaymenDK: Harus diakui, ini adalah use case yang sempit, tapi saya bisa membayangkan lebih memilih font miring untuk keterbacaan dalam ukuran font kecil tertentu pada output pixelated: Contoh: menggunakan font 6pt ke 8pt pada layar form-factor kecil; beberapa bentuk miring memiliki goresan yang lebih tipis dan lebih banyak ornamen yang dapat menurunkan keterbacaan dibandingkan dengan "miring" yang sederhana.
Dan H

Jawaban:


268

Dalam pengertian (desainer tipe) yang paling murni, sebuah oblique adalah font roman yang telah condong ke sejumlah derajat tertentu (biasanya 8-12 derajat). Huruf miring dibuat oleh perancang tipe dengan karakter tertentu (terutama huruf kecil a) yang digambar berbeda untuk membuat kaligrafi yang lebih banyak, serta versi miring.

Beberapa jenis pengecoran telah secara sewenang-wenang membuat obliques yang belum tentu disetujui oleh perancang sendiri ... beberapa font dimaksudkan untuk tidak dicetak miring atau miring ... tetapi orang tetap melakukannya. Dan seperti yang Anda ketahui, beberapa sistem operasi akan, setelah mengklik ikon 'miring', mencondongkan font dan membuat miring dengan cepat. Bukan pemandangan yang menyenangkan.

Yang terbaik adalah menentukan italic hanya jika Anda yakin font telah dirancang dengan huruf miring.


37
Mungkin bermanfaat untuk dicatat bahwa hampir tidak ada keluarga font di alam yang menentukan wajah miring dan miring, dan sebagian besar mesin render akan memasok wajah lain jika wajah yang ditentukan tidak tersedia untuk font itu.
SingleNegationElimination

7
Jawaban ini tidak membahas perbedaan fungsional, eksklusivitas timbal balik, atau perbedaan semantik.
ahnbizcad

2
Dengan font Cyrillic misalnya, karakter miring akan sering sangat berbeda, lebih mirip bentuk kursif, bentuk miring hanya akan miring.
Moody_Mudskipper

1
Apa yang seharusnya dilakukan mesin rendering jika saya mengatakan "miring" tetapi hanya ada versi "miring" dari font yang tersedia? Atau sebaliknya?
Michael

@SingleNegationElimination Komentar Anda seharusnya menjadi jawaban karena membahas teknis nyata di tempat ketika datang ke CSS pada khususnya. "Jawaban" yang dipilih di sini lebih pada tipografi.
Vun-Hugh Vaw

72

Secara umum, huruf miring adalah versi khusus font, sedangkan versi miring hanyalah versi biasa yang cenderung sedikit. Jadi keduanya miring dan terkait dengan font biasa, tetapi huruf miring akan memiliki bentuk huruf khusus yang dibuat khusus untuk itu.

Sebagian besar font memiliki versi miring atau miring; Saya belum pernah melihat yang memiliki keduanya. (Jika Anda memiliki versi miring, mengapa repot-repot dengan versi miring?)


21

Jenis miring (atau miring, miring) adalah bentuk jenis yang miring sedikit ke kanan, digunakan dengan cara yang sama seperti jenis miring. Tidak seperti tipe italic, ia tidak menggunakan bentuk mesin terbang yang berbeda; ia menggunakan mesin terbang yang sama seperti tipe Romawi, kecuali terdistorsi.

Bacaan Lebih Lanjut: css font style oblique vs italic


16

Seperti halnya italic dan oblique , perbedaan yang sama terlihat ketika membandingkan italic dengan faux italic .

Anda akan melihat faux-italics di mana font normal miring font-style: italic;sedangkan font miring yang benar dirancang untuk miring.

masukkan deskripsi gambar di sini

Bagian bawah dua ll s menunjukkan perbedaan jelas.

Lihat Contoh


2
Apakah maksud Anda miring sama dengan faux-italic?
zwcloud

Ya, jika font miring atau font miring tidak tersedia, hasilnya akan tampak sama (setidaknya dalam chrome untuk contoh ini) berikutnya.plnkr.co/edit/SpaDzXmSb1oADxUfKVg1?preview
robstarbuck

TIDAK bisa melakukan jawaban ini tanpa bantuan visual, terima kasih
Max Alexander Hanna

0

Menurut tutorial pengembang mozilla CSS :

  • italic: Menyetel teks untuk menggunakan versi italic font jika tersedia ; jika tidak tersedia, itu akan mensimulasikan huruf miring dengan miring sebagai gantinya.
  • oblique: Mengatur teks untuk menggunakan versi huruf font miring yang dibuat, dibuat miring dengan versi normal.

  • Dari sini, kami menyimpulkan bahwa jika versi italic font tidak tersedia , baik italic dan miring berperilaku dengan cara yang sama. Karena cuplikan kode W3Schools tidak menentukan yang khusus font-family, saya percaya font default digunakan; font default yang mungkin tidak memiliki versi miring.

    Tetapi bagaimana cara membuat font versi italic tersedia?

    Ini berarti bahwa kami memiliki setidaknya dua versi font yang sama, satu "biasa", dan satu huruf miring. Ini dapat ditentukan di <style>bagian dengan @font-faceaturan. Harap baca secara singkat: developer.mozilla , w3schools , tympanus.net . Seperti yang Anda lihat, font dimuat sebagai file, yang dapat memiliki ekstensi berikut: eot, otf, woff, truetype.

    Sejauh ini, saya menemukan dua cara untuk menghubungkan file font

  • URL absolut dari file font: (cuplikan kode dari 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');
     }`

    Harap perhatikan bahwa dalam kedua kasus yang kami miliki font-family: 'Open Sans', yang pada dasarnya mendefinisikan font yang sama; tetapi dalam kasus pertama kita miliki font-style: normal;, sedangkan dalam kasus kedua kita miliki font-style: italic;. Perhatikan juga bahwa URL mengarah ke file yang berbeda. Sekarang, kembali ke potongan kode w3schools, begitulah browser dapat membedakan antara font-style: normaldanfont-style: italic

  • menggunakan jalur relatif ke file font: (cuplikan kode dari metaltoad.com )

    Alih-alih mendefinisikan nilai font-family yang terpisah untuk setiap font, Anda dapat menggunakan nama font-family yang sama untuk setiap font, dan mendefinisikan gaya yang cocok, seperti:

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

    Dalam hal ini, .eotfile harus disimpan dalam folder yang sama dengan halaman html. Sekali lagi, perhatikan bahwa font-familyini sama, font-styleberbeda, dan urlnya berbeda: Ubuntu- R -webfont vs Ubuntu- I -webfont.

    Contoh versi huruf miring:

    ctan.org : ini adalah contoh bagaimana ada file yang berbeda disediakan untuk gaya / bobot yang berbeda dari font yang sama. Baik huruf tebal atau miring dihitung di tempat, mereka diambil dari file spesifik mereka.


  • jawaban saya membahas bagian kedua dari pertanyaan: "... tetapi tidak dapat membedakannya. Apa yang saya lewatkan?"
    pindahkan coyote
    Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
    Licensed under cc by-sa 3.0 with attribution required.