2012-09-29 20 views
8

Đây có thể là một chút kết luận vội vàng, nhưng câu hỏi của tôi nảy sinh khi tôi thấy rằng FontSquirrel.com không tạo ra biểu tượng mặt cười (☺) với their @font-face generator.Việc sử dụng biểu tượng mặt cười (☺) trong @ font-face vẫn có liên quan?

Thay vì tiêu chuẩn chống đạn thông thường (as laid out by Paul Irish về mặt cười), máy phát điện @font-face của FontSquirrel tạo chỉ này:

@font-face { 
font-family: 'sansationregular'; 
src: url('sansation_regular-webfont.eot'); 
src: url('sansation_regular-webfont.eot?#iefix') format('embedded-opentype'), 
    url('sansation_regular-webfont.woff') format('woff'), 
    url('sansation_regular-webfont.ttf') format('truetype'), 
    url('sansation_regular-webfont.svg#sansationregular') format('svg'); 
font-weight: normal; 
font-style: normal; 
} 

Tôi nhận ra nó có thể là quá vội vàng kết luận rằng bởi FontSquirrel bỏ các mặt cười có nghĩa là cười không còn phù hợp nữa, nhưng việc xem xét máy phát điện @font-face của FontSquirrel có vẻ là máy phát điện phổ biến nhất và được sử dụng nhiều nhất trên mạng, nó khiến tôi tự hỏi tại sao chúng không bao gồm mặt cười nữa. Đặc biệt là vì họ dường như đã bao gồm nó trước đây ...

Chỉ trong trường hợp ai đó không quen thuộc với mặt cười, có a good explanation here.

+1

Vị trí 'local()' trong biến thể của FS? – Knu

+0

@Knu: chính xác là câu hỏi của tôi, chúng dường như không bao gồm nó nữa. – deathlock

Trả lời

5

EDIT - Ran vào một số biết thêm rằng có thể quan tâm: https://stackoverflow.com/a/4520467/1455709

Android 2.2 thiết bị sẽ bị ảnh hưởng từ local() sử dụng, @font-face wont work của bạn cả.

Tôi có thể xác nhận rằng trên Android 2.3.6 (trình duyệt mặc định) local() sẽ ngắt tuyên bố @font-face của bạn.

Android 4.0 (trình duyệt mặc định) hoạt động tốt với local().

Không chắc chắn về mọi thứ ở giữa. Vì vậy, một lần nữa, tôi nghĩ rằng nó xuống đến cơ sở người dùng của bạn, hoặc nỗ lực bạn muốn đi đến với nhiều bảng định kiểu để đảm bảo phông chữ của bạn hoạt động ở mọi nơi.


Vâng, họ chỉ tạo mã cần thiết để hiển thị phông chữ của bạn trên tất cả các trình duyệt. Đó là quyết định của bạn về việc liệu bạn có muốn lấy "rủi ro" cho dù người dùng có phông chữ bằng tên đó được cài đặt cục bộ hay không.

Phụ thuộc vào khán giả của bạn tôi sẽ nói.

  • Có ai thực sự cài đặt phông chữ lên máy cục bộ của họ nữa không? Rất nhiều người trên trang web này có thể, nhà thiết kế chắc chắn sẽ, nhưng công chúng? Chắc là không.

  • Cơ hội mà phông chữ bạn sử dụng có cùng tên với một phông chữ khác? Nhỏ bé.

  • Cơ hội người dùng có phông chữ cụ thể khác được cài đặt là gì? Rất nhỏ.

Nếu bạn muốn đảm bảo rằng người dùng tải xuống và sử dụng phông chữ cụ thể của bạn, hãy sử dụng phông chữ đó.

Nếu bạn muốn sử dụng phông chữ Windows (có thể bạn không được phép) và muốn chúng hiển thị trên máy Mac, thì bạn sẽ không muốn sử dụng mặt cười, để tiết kiệm mọi người dùng Windows tải xuống phông chữ đã có (thực sự là như nhau).

Nếu bạn muốn sử dụng phông chữ tùy chỉnh có tên 'Verdana', bạn chắc chắn sẽ muốn sử dụng một khuôn mặt cười.Điều đó, hoặc làm cho font-family độc đáo ... Tôi đoán với một khuôn mặt cười ... Nhưng điều đó sẽ trông lộn xộn, vì vậy hãy sử dụng thuộc tính cục bộ.

+1

Quay lại câu hỏi này sau một năm, bạn có thấy điều này không? http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax Có an toàn để tuân theo quy tắc này không? – deathlock

+0

@deathlock đó là những gì tôi sử dụng. – Patrick

+1

Đây có phải là phương pháp hay nhất hiện nay không? – deathlock

0

Phương pháp "chống đạn" mới nhất luôn có thể được tìm thấy bằng cách sử dụng fontsquirrel's WEBFONT GENERATOR.

Vì vậy, kể từ khi viết câu hỏi của bạn, hỗ trợ .woff2 đã được thêm.

Bất kỳ ai muốn làm rõ phương pháp cập nhật là bạn nên làm như sau.

Tải lên tiny font file và điều này sẽ tạo tệp zip với phông chữ của bạn được chuyển đổi thành tất cả các định dạng nhưng quan trọng hơn nó cũng chứa tệp CSS có phương pháp "bullet proof".

Hiện tại có vẻ như thế này.

@font-face { 
    font-family: 'font-name'; 
    src: url('fontawesome-webfont-webfont.eot'); 
    src: url('fontawesome-webfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fontawesome-webfont-webfont.woff2') format('woff2'), 
     url('fontawesome-webfont-webfont.woff') format('woff'), 
     url('fontawesome-webfont-webfont.ttf') format('truetype'), 
     url('fontawesome-webfont-webfont.svg#font-name') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 
Các vấn đề liên quan