น้ำหนักแบบอักษรหลายรายการแบบสอบถาม @ font-face

119

ฉันต้องนำเข้าแบบอักษร Klavika และฉันได้รับในหลายรูปทรงและขนาด:

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

ตอนนี้ฉันต้องการทราบว่าเป็นไปได้หรือไม่ที่จะนำเข้าใน CSS ด้วย@font-faceแบบสอบถามเดียวโดยที่ฉันกำหนดweightในแบบสอบถาม ฉันต้องการหลีกเลี่ยงการคัดลอก / วางแบบสอบถาม 8 ครั้ง

สิ่งที่ชอบ:

@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
แหล่งที่มา

ไม่ใช่แบบอักษร 1 แบบ ... เป็นแบบอักษรหลายแบบ ... น่าเสียดายที่ฉันคิดว่าคุณต้องยิ้มและแบกรับมัน

— Paulie_D

ใช่ขอโทษมันเป็นแบบอักษรที่แตกต่างกันในตระกูลเดียวกัน

— Rvervuurt

ไฟล์เว็บฟอนต์หลายไฟล์ === น้ำหนักที่แตกต่างกัน

— Eric

บทความนี้อาจช่วยได้: 456bereastreet.com/archive/201012/…มี SO คำตอบอยู่ที่นี่: stackoverflow.com/questions/10045859/…ที่ใช้บทความนั้นทางเลือกอื่นที่คุณต้องการเนื่องจากสิ่งที่คุณต้องการเป็นไปไม่ได้

— 97ldave

คำตอบ:

271

อันที่จริงมี @ font-face รสชาติพิเศษที่จะอนุญาตเฉพาะสิ่งที่คุณต้องการ

นี่คือตัวอย่างการใช้ชื่อตระกูลแบบอักษรเดียวกันที่มีสไตล์และน้ำหนักต่างกันที่เกี่ยวข้องกับฟอนต์ที่แตกต่างกัน:

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

ตอนนี้คุณสามารถระบุfont-weight:boldหรือfont-style:italicองค์ประกอบใด ๆ ที่คุณชอบได้โดยไม่ต้องระบุ font-family หรือเอาชนะและfont-weightfont-style

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

สำหรับภาพรวมทั้งหมดของคุณลักษณะนี้และการใช้งานมาตรฐานโปรดดูที่บทความนี้

ปากกาตัวอย่าง

— maioman
แหล่งที่มา

เช่นเดียวกับที่ฉันแนะนำในความคิดเห็นของฉันด้านบน ;-)

— 97ldave

ในกรณีของฉันนี่ใช้ @ font-face ต่ำสุดเท่านั้น นั่นจะเป็น font-weight: bold; แบบอักษร: ตัวเอียง; ทุกครั้งที่ฉันอ้างถึงตระกูลแบบอักษร: 'DroidSerif';

— Simon Arnold

คุณมีการทดสอบที่พิสูจน์ว่าวิธีนี้ใช้งานได้จริงหรือไม่? คุณจะพิสูจน์ได้อย่างไรว่าเบราว์เซอร์ไม่เพียง แต่แกล้งน้ำหนักหรือรูปแบบโดยไม่อ่านไฟล์ฟอนต์ที่ถูกต้อง

— rojobuffalo

@rojobuffalo นี่คือตัวอย่างปากกามันใช้งานได้ตามที่คาดไว้

— maioman

@rojobuffalo ทำให้เป็นจุดที่ถูกต้องมาก ปากกาไม่ได้ทำอะไรเพื่อตรวจสอบความถูกต้องของการยืนยันว่าสิ่งนี้จะทำงานตามที่คาดไว้ โดยเฉพาะอย่างยิ่งฉันลบการประกาศแบบอักษรตัวหนาออกจากตัวอย่าง CSS และเรียกใช้อีกครั้ง ลักษณะเหมือนกันหมด มันดึงจากแคชหรือไม่? เบราว์เซอร์เพียงแค่เล่นซอตามน้ำหนักที่แสดงของแบบอักษรปกติหรือไม่?

@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á
แหล่งที่มา

โปรดเขียนคำอธิบายเล็กน้อยว่าเหตุใดจึงสามารถแก้ปัญหานี้ได้ อาจเป็นประโยคง่ายๆ

— ggderas

โซลูชันเดียวกับวิธีก่อนหน้านี้ เพียงสัญกรณ์ที่สั้นกว่า :)

— Mirka Nimsová

ฉันจะอ่านสัญกรณ์นี้ได้ที่ไหน ไม่เห็นบน MDN

— avalanche1

ดูเหมือนจะไม่ได้ผลและฉันไม่สามารถหาแหล่งข้อมูลได้ แต่ดูเหมือนจะมีความจริงบางอย่าง

— dakab