Sử dụng nhiều phông chữ tùy chỉnh bằng @ font-face?

Tôi chắc chắn rằng tôi đang thiếu một cái gì đó thực sự thẳng về phía trước. Đang sử dụng một phông chữ tùy chỉnh duy nhất với mặt phông chữ bình thường:

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

Tất cả đều hoạt động tốt khi tôi sử dụng nó nhưng nếu tôi muốn thêm một phông chữ tùy chỉnh khác, tôi phải làm gì? Tôi đã thử phân tách bằng dấu phẩy cái tiếp theo hoặc thêm toàn bộ mặt phông chữ khác nhưng không thể làm cho phông chữ thứ hai hoạt động.

Bạn chỉ cần thêm một @font-facequy tắc khác :

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

@font-face {
    font-family: CustomFont2;
    src: url('CustomFont2.ttf');
}

Nếu phông chữ thứ hai của bạn vẫn không hoạt động, hãy đảm bảo rằng bạn đang đánh vần đúng tên kiểu chữ và tên tệp của nó, bộ nhớ đệm của trình duyệt của bạn đang hoạt động, hệ điều hành của bạn không gây nhầm lẫn với phông chữ có cùng tên, v.v.

Nếu bạn đang gặp sự cố với phông chữ hoạt động, tôi cũng đã gặp sự cố này trước đây và vấn đề tôi tìm thấy là do font-family: name. Điều này phải phù hợp với tên phông chữ thực sự đã được đưa ra.

Cách dễ nhất mà tôi tìm thấy để tìm ra điều này là cài đặt phông chữ và xem tên hiển thị nào được cung cấp.

Ví dụ: tôi đang sử dụng Gill Sans trong một dự án, nhưng phông chữ thực tế được gọi là Gill Sans MT. Khoảng cách và cách viết hoa cũng rất quan trọng để làm đúng.

Hy vọng rằng sẽ giúp.

Kiểm tra fontquirrel . Họ có trình tạo phông chữ web, cũng sẽ tạo ra một biểu định kiểu phù hợp cho phông chữ của bạn (tìm kiếm "@ font-face kit"). Biểu định kiểu này có thể được bao gồm trong của riêng bạn hoặc bạn có thể sử dụng nó làm mẫu.

Tôi sử dụng phương pháp này trong tệp css của mình

@font-face {
  font-family: FontName1;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName1'), url('fontname1.ttf') format('truetype'); /* others */
}
@font-face {
  font-family: FontName2;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName2'), url('fontname2.ttf') format('truetype'); /* others */
}
@font-face {
  font-family: FontName3;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName3'), url('fontname3.ttf') format('truetype'); /* others */
}

Bạn có thể sử dụng nhiều mặt phông chữ khá dễ dàng. Dưới đây là một ví dụ về cách tôi đã sử dụng nó trong quá khứ:

<!--[if (IE)]><!-->
    <style type="text/css" media="screen">
        @font-face {
            font-family: "Century Schoolbook";
            src: url(/fonts/century-schoolbook.eot);
        }
        @font-face {
            font-family: "Chalkduster";
            src: url(/fonts/chalkduster.eot);
        }
    </style>
<!--<![endif]-->
<!--[if !(IE)]><!-->
    <style type="text/css" media="screen">
        @font-face {
            font-family: "Century Schoolbook";
            src: url(/fonts/century-schoolbook.ttf);
        }
        @font-face {
            font-family: "Chalkduster";
            src: url(/fonts/chalkduster.ttf);
        }
    </style>
<!--<![endif]-->

Cần lưu ý rằng các phông chữ có thể hài hước trên các Trình duyệt khác nhau. Khuôn mặt phông chữ trên các trình duyệt cũ hơn hoạt động, nhưng bạn cần sử dụng tệp eot thay vì ttf.

Đó là lý do tại sao tôi đưa phông chữ của mình vào phần đầu của tệp html vì sau đó tôi có thể sử dụng các thẻ IE có điều kiện để sử dụng tệp eot hoặc ttf cho phù hợp.

Nếu bạn cần chuyển đổi ttf sang eot cho mục đích này, có một trang web tuyệt vời mà bạn có thể thực hiện việc này trực tuyến miễn phí, có thể tìm thấy tại http://ttf2eot.sebastiankippe.com/ .

Hy vọng rằng sẽ giúp.