Bagaimana cara menambahkan banyak file font untuk font yang sama?

Saya melihat halaman MDC untuk aturan CSS @ font-face , tapi saya tidak mendapatkan satu hal. Saya memiliki file terpisah untuk cetak tebal , miring dan tebal + miring . Bagaimana saya bisa menanamkan ketiga file dalam satu @font-faceaturan? Misalnya, jika saya punya:

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

Browser tidak akan tahu font mana yang digunakan untuk huruf tebal (karena file itu adalah DejaVuSansBold.ttf), jadi ini akan menjadi default untuk sesuatu yang mungkin tidak saya inginkan. Bagaimana saya bisa memberi tahu browser semua varian berbeda yang saya miliki untuk font tertentu?

Solusinya tampaknya menambahkan beberapa @font-faceaturan, misalnya:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

Ngomong-ngomong, sepertinya Google Chrome tidak tahu tentang format("ttf")argumen itu, jadi Anda mungkin ingin melewatkannya.

(Jawaban ini benar untuk spesifikasi CSS 2. CSS3 hanya memungkinkan untuk satu gaya font daripada daftar yang dipisahkan koma.)

Pada CSS3, spesifikasi telah berubah, yang memungkinkan hanya satu font-style. Daftar yang dipisahkan koma (per CSS2) akan diperlakukan seolah-olah itu normaldan menimpa entri sebelumnya (default). Ini akan membuat font yang didefinisikan dengan cara ini muncul miring secara permanen.

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: oblique;
}

Dalam kebanyakan kasus, huruf miring mungkin akan cukup dan aturan miring tidak akan diperlukan jika Anda berhati-hati untuk menentukan mana yang akan Anda gunakan dan tetap menggunakannya.

Agar variasi font berfungsi dengan benar, saya harus membalik urutan @ font-face di CSS.

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.ttf");
}

saat ini, 2017-12-17. Saya tidak menemukan keterangan apa pun tentang keperluan Font-property-order di spec . Dan saya uji di chrome selalu berfungsi apa pun urutannya.

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

Jika Anda menggunakan font Google saya akan menyarankan yang berikut ini.

Jika Anda ingin font dijalankan dari localhost atau server Anda, Anda perlu mengunduh file.

Alih-alih mengunduh paket ttf di tautan unduhan, gunakan tautan langsung yang disediakannya, misalnya:

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic

Rekatkan URL di browser Anda dan Anda harus mendapatkan deklarasi font yang mirip dengan jawaban pertama.

Buka URL yang disediakan, unduh, dan ganti nama file.

Tempel deklarasi font-face yang diperbarui dengan jalur relatif ke file woff di CSS Anda, dan Anda selesai.

/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'), /* Duplicated name with hyphen */
        url('dejavu/DejaVuSans.ttf') 
        format('truetype');
}
/*bold version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Bold.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Bold.ttf') 
        format('truetype');
    font-weight: bold;
}
/*italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Oblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Oblique.ttf') 
        format('truetype');
    font-style: italic;
}
/*bold italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-BoldOblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-BoldOblique.ttf') 
        format('truetype');
    font-weight: bold;
    font-style: italic;
}

Jangan lupa bahwa untuk varian yang berani, itu font-weight; untuk varian miring, itufont-style