จะเพิ่มไฟล์ฟอนต์หลายไฟล์สำหรับฟอนต์เดียวกันได้อย่างไร

ฉันกำลังดูหน้า MDC สำหรับกฎ @ font-face CSSแต่ฉันไม่ได้อะไรเลย ฉันมีไฟล์ที่แยกต่างหากสำหรับตัวหนา , ตัวเอียงและตัวหนาตัวเอียง + ฉันจะฝังทั้งสามไฟล์ใน@font-faceกฎเดียวได้อย่างไร ตัวอย่างเช่นถ้าฉันมี:

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

เบราว์เซอร์จะไม่ทราบว่าจะใช้แบบอักษรใดสำหรับตัวหนา (เพราะไฟล์นั้นคือ DejaVuSansBold.ttf) ดังนั้นจึงจะเป็นค่าเริ่มต้นสำหรับสิ่งที่ฉันอาจไม่ต้องการ ฉันจะบอกเบราว์เซอร์ที่แตกต่างกันทั้งหมดที่ฉันมีสำหรับแบบอักษรบางตัวได้อย่างไร

โซลูชันดูเหมือนว่าจะเพิ่ม@font-faceกฎหลายข้อตัวอย่างเช่น:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

อย่างไรก็ตามดูเหมือนว่า Google Chrome จะไม่ทราบเกี่ยวกับformat("ttf")ข้อโต้แย้งดังนั้นคุณอาจต้องการข้ามไป

(คำตอบนี้ถูกต้องสำหรับข้อมูลจำเพาะCSS 2 CSS3อนุญาตเฉพาะแบบอักษรหนึ่งแบบแทนที่จะเป็นรายการที่คั่นด้วยเครื่องหมายจุลภาค)

ในฐานะของ CSS3, font-styleสเปคที่มีการเปลี่ยนแปลงการอนุญาตให้เพียงคนเดียว รายการที่คั่นด้วยเครื่องหมายจุลภาค (ต่อ CSS2) จะได้รับการปฏิบัติเสมือนว่าเป็นรายการnormalและแทนที่รายการก่อนหน้า (เริ่มต้น) ใด ๆ สิ่งนี้จะทำให้แบบอักษรที่กำหนดในลักษณะนี้ปรากฏเป็นตัวเอียงอย่างถาวร

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: oblique;
}

ในกรณีส่วนใหญ่ตัวเอียงอาจจะเพียงพอและไม่จำเป็นต้องใช้กฎเอียงหากคุณระมัดระวังในการกำหนดว่าคุณจะใช้และยึดติดกับอะไร

หากต้องการให้รูปแบบตัวอักษรทำงานอย่างถูกต้องฉันต้องย้อนกลับลำดับของ @ font-face ใน CSS

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.ttf");
}

ปัจจุบัน 2017/12/17 ฉันไม่พบรายละเอียดใด ๆ เกี่ยวกับ Font-คุณสมบัติการสั่งซื้อของจำเป็นในสเปค และฉันทดสอบด้วยโครเมี่ยมว่าทำงานได้ตามปกติ

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

หากคุณใช้แบบอักษรของ Google ฉันจะแนะนำต่อไปนี้

หากคุณต้องการให้แบบอักษรเรียกใช้จาก localhost หรือเซิร์ฟเวอร์ของคุณคุณต้องดาวน์โหลดไฟล์

แทนที่จะดาวน์โหลดแพ็คเกจ ttf ในลิงค์ดาวน์โหลดให้ใช้ลิงค์สดที่พวกเขามีให้ตัวอย่างเช่น:

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic

วาง URL ในเบราว์เซอร์ของคุณและคุณควรได้รับการประกาศตัวอักษรแบบหน้าคล้ายกับคำตอบแรก

เปิด URL ที่ให้ไว้ดาวน์โหลดและเปลี่ยนชื่อไฟล์

ติดประกาศฟอนต์ใบหน้าที่อัปเดตด้วยพา ธ สัมพัทธ์ไปยังไฟล์ woff ใน CSS ของคุณและเสร็จแล้ว

/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'), /* Duplicated name with hyphen */
        url('dejavu/DejaVuSans.ttf') 
        format('truetype');
}
/*bold version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Bold.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Bold.ttf') 
        format('truetype');
    font-weight: bold;
}
/*italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Oblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Oblique.ttf') 
        format('truetype');
    font-style: italic;
}
/*bold italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-BoldOblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-BoldOblique.ttf') 
        format('truetype');
    font-weight: bold;
    font-style: italic;
}

อย่าลืมว่าสำหรับตัวแปรตัวหนามันคือfont-weight; สำหรับตัวแปรตัวเอียงมันเป็นfont-style