font-style: italic vs oblique di CSS

Apa perbedaan antara keduanya:

font-style:italic
font-style:oblique

Saya mencoba menggunakan editor W3Schools tetapi tidak dapat membedakannya.

Apa yang saya lewatkan?

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.

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

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

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.

Bagian bawah dua ll s menunjukkan perbedaan jelas.

Lihat Contoh

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

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