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.
