Beberapa bobot font, satu kueri @ font-face

118

Saya harus mengimpor font Klavika dan saya telah menerimanya dalam berbagai bentuk dan ukuran:

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

Sekarang saya ingin tahu apakah mungkin untuk mengimpornya ke CSS hanya dengan satu @font-face-query, di mana saya mendefinisikannya weightdalam kueri. Saya ingin menghindari menyalin / menempel kueri 8 kali.

Jadi sesuatu seperti:

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight:normal;
  src: url(../fonts/Klavika-Bold.otf), weight:bold;
}

css fonts font-face

— Rvervuurt
sumber

Ini bukan 1 font ... ini banyak font ... jadi sayangnya, saya pikir Anda harus tersenyum dan menanggungnya.

— Paulie_D

Ya maaf, ini font berbeda dalam keluarga yang sama.

— Rvervuurt

Beberapa file font web === bobot berbeda

— Eric

artikel ini mungkin bisa membantu: 456bereastreet.com/archive/201012/… sebenarnya ada SO Answer di sini: stackoverflow.com/questions/10045859/… yang menggunakan artikel itu, alternatif untuk apa yang Anda inginkan karena apa yang Anda inginkan tidak mungkin.

— 97ldave

Jawaban:

270

Sebenarnya ada rasa khusus dari @ font-face yang akan mengizinkan apa yang Anda tanyakan.

Berikut adalah contoh menggunakan nama font-family yang sama dengan gaya dan bobot berbeda yang terkait dengan font berbeda:

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

Anda sekarang dapat menentukan font-weight:boldatau font-style:italicke elemen apa pun yang Anda suka tanpa harus menentukan font-family atau menimpa font-weightdan font-style.

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

Untuk gambaran umum lengkap tentang fitur ini dan penggunaan standar, lihat artikel ini.

CONTOH PEN

— maioman
sumber

seperti yang saya sarankan dalam komentar saya di atas ;-)

— 97ldave

Dalam kasus saya, ini hanya menggunakan @ font-face terendah. Itu akan menjadi font-weight: bold; font-style: italic; setiap kali saya mengacu pada font-family: 'DroidSerif';

— Simon Arnold

Apakah Anda memiliki tes yang membuktikan metode ini benar-benar berfungsi? Bagaimana Anda membuktikan bahwa browser tidak hanya memalsukan bobot atau gaya tanpa membaca file font yang benar?

— rojobuffalo

@rojobuffalo berikut adalah contoh pena, berfungsi seperti yang diharapkan.

— maioman

@rojobuffalo membuat poin yang sangat valid. Pena tidak melakukan apa pun untuk memverifikasi validitas pernyataan bahwa ini akan berperilaku seperti yang diharapkan. Secara khusus, saya menghapus deklarasi font-face tebal dari contoh CSS dan menjalankannya lagi. Penampilannya pun identik. Apakah itu menarik dari cache? Apakah browser hanya mengutak-atik bobot font biasa yang ditampilkan?

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf) format('truetype') font-weight-normal,
       url(../fonts/Klavika-Bold.otf) format('truetype') font-weight-bold,
       url(../fonts/Klavika-Bold-Italic.otf) format('truetype') font-italic font-weight-bold;
}

— Mirka Nimsová
sumber

Harap tulis sedikit penjelasan tentang mengapa ini akan menyelesaikan masalah. Ini bisa menjadi sesuatu yang sederhana seperti kalimat.

— ggderas

Solusi yang sama dengan yang sebelumnya. Notasi hanya lebih pendek :)

— Mirka Nimsová

Di mana saya dapat membaca tentang notasi ini? Tidak melihatnya di MDN

— longsoran1

Tampaknya tidak berhasil dan saya tidak dapat menemukan sumber daya, namun tampaknya ada benarnya.

— dakab