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-face
aturan? 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?
Jawaban:
Solusinya tampaknya menambahkan beberapa
@font-face
aturan, misalnya: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.)
sumber
font-style: italic, oblique;
menjadifont-style: italic;
sepertinya memperbaiki semuanya.Pada CSS3, spesifikasi telah berubah, yang memungkinkan hanya satu
font-style
. Daftar yang dipisahkan koma (per CSS2) akan diperlakukan seolah-olah itunormal
dan menimpa entri sebelumnya (default). Ini akan membuat font yang didefinisikan dengan cara ini muncul miring secara permanen.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.
sumber
I have separate files for bold, italic and bold + italic
- jadi ada tiga file berbeda. Jawaban ini mengoreksi yang diterima di yangfont-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.Agar variasi font berfungsi dengan benar, saya harus membalik urutan @ font-face di CSS.
sumber
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.
sumber
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:
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.
sumber
sumber
Jangan lupa bahwa untuk varian yang berani, itu
font-weight
; untuk varian miring, itufont-style
sumber
@font-face
, jadi saya mencoba untuk menurunkan suara jawaban ini (tapi saya tidak bisa, saya tidak punya reputasi yang cukup)