Birden çok yazı tipi ağırlığı, bir @ font-face sorgusu


118

Klavika yazı tipini içe aktarmam gerekiyor ve bunu birden çok şekil ve boyutta aldım:

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

Şimdi, bunları sadece bir @font-facesorgu ile CSS'ye aktarmanın mümkün olup olmadığını bilmek istiyorum , burada weightsorguda tanımlıyorum . Sorguyu 8 kez kopyalamak / yapıştırmaktan kaçınmak istiyorum.

Yani şöyle bir şey:

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

4
1 yazı tipi değil ... birden çok yazı tipi var ... bu yüzden ne yazık ki, sadece sırıtarak dayanmanız gerektiğini düşünüyorum.
Paulie_D

Evet üzgünüm, aynı aile içinde farklı yazı tipleri var.
Rvervuurt

Birden çok web yazı tipi dosyası === farklı ağırlıklar
Eric

2
bu makale yardımcı olabilir: 456bereastreet.com/archive/201012/… aslında burada bir SO Cevabı var: stackoverflow.com/questions/10045859/… bu makaleyi kullanan, istediğiniz şeye bir alternatif, çünkü istediğiniz şey mümkün değil.
97ldave

Yanıtlar:


270

Aslında, tam istediğiniz şeye izin verecek özel bir @ font-face tadı var.

Aşağıda, farklı yazı tipleriyle ilişkili farklı stil ve ağırlıklara sahip aynı yazı tipi ailesi adını kullanan bir örnek verilmiştir:

@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;
}

Artık belirtebilir font-weight:boldya font-style:italicsen font-family belirtmek zorunda ya geçersiz kılma olmadan istediğiniz herhangi elemana font-weightve font-style.

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

Bu özelliğe ve standart kullanıma tam bir genel bakış için bu makaleye göz atın .


ÖRNEK KALEM


1
aynen yukarıdaki
yorumumda

4
Benim durumumda, bu yalnızca en düşük @ font-face'i kullanır. Yazı tipi ağırlığı: kalın; yazı tipi stili: italik; font-family: 'DroidSerif' kelimesini her ifade ettiğimde;
Simon Arnold

1
Bu yöntemin gerçekten işe yaradığını kanıtlayan bir testiniz var mı? Tarayıcının doğru yazı tipi dosyasını okumadan sadece ağırlığı veya stili uydurmadığını nasıl kanıtlarsınız?
rojobuffalo

1
@rojobuffalo işte örnek bir kalem, beklendiği gibi çalışıyor.
maioman

2
@rojobuffalo çok geçerli bir noktaya işaret ediyor. Kalem, bunun beklendiği gibi davranacağına dair iddianın geçerliliğini doğrulamak için hiçbir şey yapmaz. Spesifik olarak, CSS örneğinden kalın font-face bildirimini kaldırdım ve tekrar çalıştırdım. Görünüm aynıydı. Önbellekten mi alıyordu? Tarayıcı, normal yazı tipinin görüntülenen ağırlığını mı değiştiriyordu?

10
@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;
}

17
Lütfen bunun sorunu neden çözeceğine dair küçük bir açıklama yazın. Cümle kadar basit bir şey olabilir.
ggderas

3
Bir öncekiyle aynı çözüm. Sadece daha kısa notasyon :)
Mirka Nimsová

2
Bu notasyonları nereden okuyabilirim? MDN'de görmüyorum
çığ

İşe yaramıyor gibi görünüyor ve bir kaynak bulamıyorum, yine de bazı gerçekler var gibi görünüyor.
dakab
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.