Bagaimana cara menambahkan banyak file font untuk font yang sama?

454

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?

Felix
sumber
Sebagai perpanjangan dari pertanyaan jika kita menggunakan font ini di editor WYSIWYG seperti TinyMCE, apakah kita masih membutuhkan Bold Italics? Meskipun TinyMCE memiliki pantat untuk melakukan Bold Italics? Jawaban tebakan saya adalah YA - karena secara internal mereka mencari file-file ini?
Nishant
kemungkinan duplikat dari Bagaimana cara menggabungkan font?
user2284570

Jawaban:

749

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

Felix
sumber
130
Urutan itu penting, gaya huruf tebal / miring harus ada di urutan terakhir.
The Who
8
Perlu dicatat bahwa ini tidak berfungsi di IE8 (dan di bawah), bahkan jika Anda menggunakan EOT. IE akan mengunduh jenis huruf alternatif, tetapi tidak akan menggunakannya, sebaliknya akan memalsukan huruf tebal / miring huruf biasa. Selain itu, Chrome 11 tampaknya gagal membuat jenis huruf yang tebal dan miring
JaffaTheCake
2
Contoh ini berfungsi sempurna untuk fonta yang memiliki file TTF terpisah untuk huruf tebal dan miring. Tetapi bagaimana jika seluruh font dalam satu file .ttf dan Anda ingin menggunakan huruf tebal, bagaimana cara kerjanya?
2
Artikel ini sangat membantu menjelaskan mengapa ini berhasil. Kutipan utama: "Perhatikan bahwa properti font-family adalah nama yang sama untuk keempat font. Juga, gaya font dan berat font cocok dengan font itu. Catatan: Bobot normal harus di bagian atas daftar! Kami belum menemukan bahwa urutan setelah itu penting. "
JD Smith
13
Saya mengalami masalah dengan potongan ini pada browser tertanam Android 4.4. Berakhir berubah font-style: italic, oblique;menjadi font-style: italic;sepertinya memperbaiki semuanya.
Xavi
59

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.

Josiah
sumber
Saya percaya font ketiga dan keempat bernama salah, mereka harus memiliki "Miring", bukan "Miring".
Nathan Merrill
3
@NathanMerrill oleh OP: I have separate files for bold, italic and bold + italic- jadi ada tiga file berbeda. Jawaban ini mengoreksi yang diterima di yang font-style: italic, oblique;tidak lagi valid, tetapi juga jawaban yang menggunakan file yang sama untuk miring dan miring. Namun, patut menunjukkan bahwa file tersebut dibagi dalam dua kasus.
Silly Freak
18

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");
}
Cedric Simon
sumber
Sangat berguna. +1
Tn. Polywhirl
Apa yang Anda maksud dengan "membalikkan urutan" ?
Nyxynyx
15

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');
}
xlaoyu.Lee
sumber
13

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.

Dieter Gribnitz
sumber
3
/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# 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;
}
Jerry T
sumber
1

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

Ooker
sumber
Tidak terlalu terkait dengan masalah ini dan @font-face, jadi saya mencoba untuk menurunkan suara jawaban ini (tapi saya tidak bisa, saya tidak punya reputasi yang cukup)
FryingggPannn
ya, itu bukan jawaban untuk pertanyaan, tetapi hal yang baik untuk diingat ketika menerapkan jawaban. Masalahnya adalah bagian komentar dari jawaban sudah banyak, jadi tip ini akan dimakamkan
Ooker
Oke, saya tidak tahu itu
FryingggPannn