Làm thế nào để thêm nhiều tập tin phông chữ cho cùng một phông chữ?

Tôi đang xem trang MDC để biết quy tắc CSS @ font-face , nhưng tôi không nhận được một điều. Tôi có các tệp riêng biệt cho đậm , in nghiêng và in đậm + in nghiêng . Làm cách nào tôi có thể nhúng cả ba tệp trong một@font-facequy tắc? Ví dụ: nếu tôi có:

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

Trình duyệt sẽ không biết phông chữ nào được sử dụng để in đậm (vì tệp đó là DejaVuSansBold.ttf), vì vậy nó sẽ mặc định là thứ tôi có thể không muốn. Làm cách nào tôi có thể nói với trình duyệt tất cả các biến thể khác nhau mà tôi có cho một phông chữ nhất định?

Giải pháp dường như là thêm nhiều @font-facequy tắc, ví dụ:

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

Nhân tiện, có vẻ như Google Chrome không biết về format("ttf") đối số, vì vậy bạn có thể muốn bỏ qua điều đó.

(Câu trả lời này là chính xác cho đặc tả CSS 2. CSS3 chỉ cho phép một kiểu phông chữ thay vì danh sách được phân tách bằng dấu phẩy.)

Kể từ CSS3, thông số kỹ thuật đã thay đổi, chỉ cho phép một lần duy nhất font-style. Một danh sách được phân tách bằng dấu phẩy (theo CSS2) sẽ được xử lý như thể nó normalvà ghi đè bất kỳ mục nhập (mặc định) nào trước đó. Điều này sẽ làm cho các phông chữ được xác định theo cách này xuất hiện in nghiêng vĩnh viễn.

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

Trong hầu hết các trường hợp, chữ nghiêng có thể sẽ đủ và các quy tắc xiên sẽ không cần thiết nếu bạn cẩn thận xác định bất cứ thứ gì bạn sẽ sử dụng và tuân theo nó.

Để biến thể phông chữ hoạt động chính xác, tôi đã phải đảo ngược thứ tự của @ font-face trong 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");
}

ngày nay, 2017-12-17. Tôi không tìm thấy bất kỳ mô tả nào về sự cần thiết của Font-property-order trong spec . Và tôi kiểm tra trong chrome luôn hoạt động bất kể thứ tự là gì.

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

Nếu bạn đang sử dụng phông chữ của Google, tôi sẽ đề xuất như sau.

Nếu bạn muốn các phông chữ chạy từ localhost hoặc máy chủ của bạn, bạn cần tải xuống các tệp.

Thay vì tải xuống các gói ttf trong các liên kết tải xuống, hãy sử dụng liên kết trực tiếp mà họ cung cấp, ví dụ:

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

Dán URL trong trình duyệt của bạn và bạn sẽ nhận được một tuyên bố mặt phông chữ tương tự như câu trả lời đầu tiên.

Mở các URL được cung cấp, tải xuống và đổi tên các tập tin.

Dán các khai báo mặt phông chữ được cập nhật với các đường dẫn tương đối vào các tệp woff trong CSS của bạn và bạn đã hoàn thành.

/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# 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;
}

Đừng quên rằng đối với biến thể táo bạo, nó là font-weight; đối với biến thể in nghiêng, nó làfont-style