Nhiều font-weights, một truy vấn @ font-face

118

Tôi phải nhập phông chữ Klavika và tôi đã nhận được nó ở nhiều hình dạng và kích thước:

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

Bây giờ tôi muốn biết liệu có thể nhập chúng vào CSS chỉ bằng một @font-face-truy vấn, nơi tôi đang xác định weighttruy vấn. Tôi muốn tránh sao chép / dán truy vấn 8 lần.

Vì vậy, một cái gì đó như:

@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
nguồn

Nó không phải là 1 phông chữ ... mà là nhiều phông chữ ... thật không may, tôi nghĩ bạn sẽ phải cười toe toét và chịu đựng nó.

— Paulie_D

Rất tiếc, đó là các phông chữ khác nhau trong cùng một họ.

— Rvervuurt

Nhiều tệp webfont === trọng lượng khác nhau

— Eric

bài viết này có thể hữu ích: 456bereastreet.com/archive/201012/… thực sự có một Câu trả lời SO ở đây: stackoverflow.com/questions/10045859/… sử dụng bài viết đó, một giải pháp thay thế cho những gì bạn muốn như những gì bạn muốn là không thể.

— 97ldave,

Câu trả lời:

270

Trên thực tế, có một hương vị đặc biệt của @ font-face sẽ cho phép những gì bạn đang yêu cầu.

Dưới đây là một ví dụ sử dụng cùng một phông chữ-họ với các kiểu và trọng lượng khác nhau được liên kết với các phông chữ khác nhau:

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

Bây giờ bạn có thể chỉ định font-weight:bold hoặc font-style:italiccho bất kỳ phần tử nào bạn thích mà không cần phải chỉ định họ phông chữ hoặc ghi đè font-weightvà font-style.

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

Để có cái nhìn tổng quan đầy đủ về tính năng này và cách sử dụng tiêu chuẩn, hãy xem bài viết này.

VÍ DỤ BÚT

— maioman
nguồn

giống như tôi đã đề xuất trong nhận xét của mình ở trên ;-)

— 97ldave

Trong trường hợp của tôi, điều này chỉ sử dụng @ font-face thấp nhất. Đó sẽ là font-weight: bold; font-style: nghiêng; mỗi khi tôi tham chiếu đến font-family: 'DroidSerif';

— Simon Arnold

Bạn có một bài kiểm tra chứng minh rằng phương pháp này đang thực sự hoạt động? Làm thế nào để bạn chứng minh rằng trình duyệt không chỉ giả mạo trọng lượng hoặc kiểu dáng mà không đọc đúng tệp phông chữ?

— rojobuffalo

@rojobuffalo đây là một ví dụ về bút, nó hoạt động như mong đợi.

— maioman

@rojobuffalo đưa ra một quan điểm rất hợp lệ. Cây bút không làm gì để xác minh tính hợp lệ của khẳng định rằng điều này sẽ hoạt động như mong đợi. Cụ thể, tôi đã xóa khai báo font-face in đậm khỏi ví dụ CSS và chạy lại. Sự xuất hiện giống hệt nhau. Nó được lấy từ bộ nhớ cache? Trình duyệt có đơn giản chỉ xoay xở với trọng lượng hiển thị của phông chữ thông thường không?

@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á
nguồn

Vui lòng viết một chút giải thích về lý do tại sao điều này sẽ giải quyết vấn đề. Nó có thể là một cái gì đó đơn giản như một câu.

— ggderas

Giải pháp tương tự như giải pháp trước. Chỉ cần ký hiệu ngắn hơn :)

— Mirka Nimsová

Tôi có thể đọc ở đâu về ký hiệu này? Đừng xem nó trên MDN

— avalanche1

Nó dường như không hoạt động và tôi không thể tìm thấy một nguồn tài nguyên, nhưng dường như có một số sự thật cho nó.

— dakab