Soru Birden çok yazı tipi-ağırlık, bir @ yazı tipi yüz sorgu


Klavika yazı tipini içe aktarmalıyım ve bunu çeşitli şekillerde ve boyutlarda 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 tane ile CSS'ye aktarmanın mümkün olup olmadığını bilmek istiyorum. @font-face-query tanımlamak weight sorguda. Sorgu 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;
}

44
2018-02-02 14:30


Menşei


1 yazı tipi değil ... birden fazla yazı tipi ... ne yazık ki, sadece sırıtmak ve taşımak zorunda kalacaksınız. - Paulie_D
Evet, üzgünüm, aynı aile içindeki farklı yazı tipleri. - Rvervuurt
Birden çok webfont dosyası === farklı ağırlık - Eric
Bu makale yardımcı olabilir: 456bereastreet.com/archive/201012/... aslında burada bir cevap var: stackoverflow.com/questions/10045859/... Bu makaleyi kullanan, istediğin şeyin istediğine göre bir alternatif mümkün değildir. - 97ldave


Cevaplar:


Aslında, sorduğunuz şeye izin verecek özel bir yazı tipi @ yüzü var.

Aşağıda, farklı yazı tipleriyle ilişkili farklı stiller ve ağırlıklardaki aynı font-aile 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;
}

Şimdi belirtebilirsiniz font-weight:bold veya font-style:italic font ailesini belirtmeden veya geçersiz kılmadan istediğiniz herhangi bir öğeye font-weight ve 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 özellik hakkında tam bir genel bakış ve standart kullanım için bir göz atın Bu makale.


ÖRNEK PEN


116
2018-02-05 08:38



Bu havalı! Bu şekilde uygulanacak, çünkü farklı yazı tipi isimleriyle çalışmak, aynı yazı tipinde olduğu zaman, zaman zaman kafa karıştırıcı oluyor. - Rvervuurt
Yukarıdaki yorumda önerdiğim gibi ;-) - 97ldave
Benim durumumda, bu sadece en düşük @ font-yüzünü kullanır. Bu yazı tipi ağırlığı olur: kalın; yazı tipi stili: italic; Font-ailesine başvurduğum her seferinde: 'DroidSerif'; - Simon Arnold
@rojobuffalo burada örnek bir kalem, beklendiği gibi çalışıyor. - maioman
@rojobuffalo çok geçerli bir nokta yapar. Kalem, beklendiği gibi davranacağı iddialarının geçerliliğini doğrulayacak hiçbir şey yapmaz. Özellikle, kalın yazı tipi yüz ifadesini CSS örneğinden kaldırdım ve tekrar çalıştırdım. Görünüm aynıydı. Önbellekten mi geliyordu? Tarayıcı normal yazı tipinin görüntülenen ağırlığı ile uğraşıyor muydu? - user314159


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

1
2018-04-19 19:16



Lütfen sorunun neden çözüleceği hakkında biraz açıklama yazın. Bir cümle kadar basit bir şey olabilir. - ggderas