CSS @ font-face - có nghĩa là src src: local ('☺') có nghĩa là gì?

Tôi đang sử dụng @font-facelần đầu tiên và đã tải xuống một bộ phông chữ từ phông chữ

Mã họ khuyên nên chèn vào CSS của tôi là:

@font-face {
    font-family: 'junctionregularRegular';
    src: url('Junction-webfont.eot');
    src: local('☺'), 
        url('Junction-webfont.woff') format('woff'), 
        url('Junction-webfont.ttf') format('truetype'), 
        url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}

Bây giờ, điều khuôn mặt cười đã làm tôi bối rối. Nhưng số lượng url trong src cũng vậy - tại sao họ lại đề xuất nhiều tệp như vậy và tất cả chúng sẽ được gửi đến trình duyệt khi một trang được hiển thị? Có bất kỳ tác hại nào trong việc loại bỏ tất cả trừ .ttf không?

nếu bạn đọc các ghi chú trong trình tạo khuôn mặt phông chữ của sóc, bạn sẽ thấy rằng đó là một hình ảnh xác thực của paul irish.

Đây là đoạn trích từ bài viết trên blog của anh ấy :

Và .. liên quan đến @font-facecú pháp

Bây giờ tôi đề xuất biến thể mặt cười chống đạn so với cú pháp chống đạn ban đầu.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Từ bài chống đạn:

Vâng, đó là một khuôn mặt cười. Thông số OpenType chỉ ra bất kỳ ký tự unicode hai byte nào sẽ không hoạt động trong một tên phông chữ trên Mac, do đó làm giảm khả năng ai đó thực sự phát hành một phông chữ có tên như vậy.

Có một vài lý do tại sao mặt cười là một giải pháp tốt hơn:

• Webkit + Phần mềm quản lý phông chữ có thể làm rối các tham chiếu cục bộ, như biến glyphs thành khối A.

• Trên OS X, phần mềm Quản lý phông chữ có thể thay đổi cài đặt hệ thống để hiển thị hộp thoại khi cố truy cập phông chữ cục bộ () có thể truy cập bên ngoài Thư viện / Phông chữ. Chi tiết hơn về bài chống đạn của tôi. Font Explorer X cũng được biết là làm xáo trộn những thứ khác trong Firefox.

• Mặc dù điều đó là không thể, nhưng bạn có thể tham chiếu một phông chữ cục bộ () hoàn toàn khác với những gì bạn nghĩ. (Bài viết kiểu chữ trên các phông chữ khác nhau, cùng tên) Ít nhất là rủi ro và bạn đang nhường quyền kiểm soát loại cho cả trình duyệt và máy chủ. Rủi ro này có thể không có giá trị lợi ích của việc tránh tải xuống phông chữ.

Đây là tất cả các vấn đề trường hợp cạnh khá, nhưng nó đáng để xem xét.

Local (☺︎) là một bản hack css để chuyển hướng IE6-8 khỏi việc tải xuống các phông chữ mà nó không thể sử dụng (nó chỉ có thể sử dụng các phông chữ ở định dạng EOT).

Giải thích: Thuộc tính src cuối cùng được ưu tiên trong tầng CSS, nghĩa là CSS sẽ được phân tích cú pháp từ dưới lên trên. Local (☺︎) sẽ khiến IE bỏ qua src ở phía dưới, mà không lãng phí các phông chữ tải xuống băng thông mà nó không thể sử dụng, và đi thẳng vào phông chữ ở .eotđịnh dạng (được xác định trên dòng trên trong câu hỏi của bạn) mà nó sẽ sử dụng. Mặt cười chỉ để đảm bảo sẽ không có phông chữ cục bộ với tên đó (kết hợp ký tự).

Đọc thêm tại đây: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

@ font-face Thuộc tính src cuối cùng được ưu tiên trong tầng CSS, nghĩa là CSS sẽ được phân tích cú pháp từ dưới lên trên.