1. Trang chủ
  2. Câu hỏi và trả lời
  3. Trình duyệt nào hỗ trợ nhúng phông chữ

Trình duyệt nào hỗ trợ nhúng phông chữ

2009-01-28 43 views
9

Tôi đã đọc về quy tắc @ phông chữ và cố gắng giải quyết nếu nó đáng sử dụng nó trong một dự án để hiển thị "franklin gothic medium" cho tiêu đề thay vì một cái gì đó như sIfr. Tôi thấy rằng đối với các trình duyệt không hỗ trợ nó, tôi có thể làm cho nó rơi trở lại trên Arial.Trình duyệt nào hỗ trợ nhúng phông chữ

Vấn đề là tôi gặp sự cố khi nhận được câu trả lời dứt khoát về việc trình duyệt nào hỗ trợ nhúng phông chữ theo cách này.

Cho đến giờ tôi đã làm việc với IE, nhưng không hỗ trợ tệp .ttf. Các trình duyệt khác mà tôi không chắc chắn.

Nếu bất kỳ ai cũng có thể chỉ cho tôi một số biểu đồ tương thích sẽ tuyệt vời.

Jon

Nguồn

2009-01-28 jonhobbs

Trả lời

7

This article thảo luận hỗ trợ trình duyệt khoảng giữa đường trong Dưới đây là các bit phù hợp nhất, mặc dù toàn bộ điều là đáng đọc:.

CSS3 (và thậm chí dự thảo CSS2 vào năm 1997 và 1998) từ lâu đã hứa hẹn cách nhúng phông chữ chuẩn hóa, sử dụng quy tắc @ phông chữ. Điều mà nhiều người có thể không biết là quy tắc này đã được hỗ trợ trong Opera 9.5, phiên bản vận chuyển của Safari dành cho Mac, Windows và iPhone OS, và được hứa hẹn cho Firefox 3.1, cũng như IE6 trở lên.

Đáng buồn thay, trong khi hỗ trợ cho @ font-face được gợi ý cho Opera 9.5 và Firefox 3.1 (xem nhận xét của tôi ở # 4 bên dưới), điều này thực tế không phải là trường hợp đáng buồn.

Có một điểm bắt. Tất cả các trình duyệt khác ngoài hỗ trợ IE liên kết với các tệp phông chữ TrueType. Microsoft chỉ hỗ trợ định dạng tệp EOT độc quyền.

CHỈNH SỬA: Bao gồm this update từ câu trả lời của Ric Tokyo.

[Cập nhật 2] Opera 10 và Firefox 3.1 hiện hỗ trợ liên kết tới TrueType và OpenType (nhưng không phải EOT) trong hiện đang vận chuyển các bản alpha hoặc beta.

Nguồn

2009-01-28 16:27:28 nezroy

-2

Họ không, đặt cược tốt nhất của bạn là để làm một cái gì đó như sau:

<h1 id="MyHeading">my heading</h1> 

h1#MyHeading { 
    text-indent: -1000px; 
    width: 200px; 
    height: 50px; 
    background-image: url(myheading.jpg); 
}

This aricle giải thích một số lựa chọn thay thế khác.

Chỉnh sửa: Tôi không biết tại sao điều này lại bị giảm giá. Điểm mấu chốt là không có cách tiếp cận thân thiện, seo thân thiện để làm những gì bạn muốn được hỗ trợ bởi tất cả các trình duyệt. Nếu bạn muốn xa lánh người dùng của mình thì hãy thực hiện một trong các giải pháp khác. Nếu không, bệnh sẽ khiến người dùng của tôi hài lòng với -1 của tôi.

Nguồn

2009-01-28 16:29:04

+0

Xin chào Andrew. Chúng tôi đang cố gắng tránh xa việc sử dụng hình ảnh. @ font-face vừa thân thiện với SEO vừa dễ truy cập. – jonhobbs

+0

bạn nên ít nhất đề nghị thêm tên hoặc bộ chọn alt cho lý do seo. – thatmiddleway

+0

tôi thích bị downvotes 3 năm sau –

0

tôi nhớ lại Safari folks tự hào viết một blog-bưu điện, mà Webkit có thể tải về phông chữ ttf và sử dụng chúng tự động, khi chúng ở trong nguồn trang. IE đã hỗ trợ tải xuống phông chữ bitmap mãi mãi.

Nguồn

2009-01-28 16:29:56 nes1983

1

@nezroy, here là một bản cập nhật:

[Cập nhật 2] Opera 10, và Firefox 3.1 bây giờ hỗ trợ liên kết đến TrueType và OpenType (EOT nhưng không phải) trong hiện vận chuyển alpha hoặc beta.

Nguồn

2009-01-28 16:31:13

5

Safari 3.1 (và Webkit Nightly xây dựng), Firefox 3.1 và Opera 10 hỗ trợ @ font-face nhúng cho .ttf (Phông chữ TrueType) và .otf (Phông chữ OpenType). Internet Explorer phiên bản 5+ hỗ trợ @ nhúng khuôn mặt cho .eot (một định dạng kiểu nhúng mở độc quyền).

Microsoft tạo ra một công cụ chuyển đổi phông chữ nhỏ khủng khiếp được gọi là WEFT (chỉ dành cho Windows) mà bạn có thể sử dụng để chuyển đổi hầu hết các định dạng phông chữ thành .eot.

CSS3.info có đẹp, brief tutorial về cách sử dụng quy tắc @ phông mặt. Trang web là một tài nguyên tuyệt vời để chơi với các thủ thuật CSS3 (hoặc trong trường hợp này là các thủ thuật được đề xuất CSS2).

Có bài viết kỹ lưỡng hơn về chủ đề này trên A List Apart.

Đảm bảo mọi phông chữ bạn nhúng trong trang web đều có thể làm như vậy trong giấy phép của họ vì phông chữ sẽ hiển thị trên máy chủ web của bạn trong thư mục công khai, miễn phí cho mọi người tải xuống. Việc sử dụng này không phải lúc nào cũng được đề cập rõ ràng trong giấy phép, nhưng bạn thường có thể liên hệ trực tiếp với nhà thiết kế để yêu cầu. Họ thường cho phép bạn sử dụng phông chữ miễn là bạn đưa liên kết đến trang của họ. Tôi không biết chắc chắn nếu Franklin Gothic Medium được chấp thuận cho việc sử dụng này, nhưng tôi nghi ngờ rằng nó là.

Dưới đây là một số tài nguyên dành cho phông chữ miễn phí. Nếu bạn làm đủ đào, bạn thường có thể tìm thấy một khuôn mặt tương tự mà sẽ làm việc cho bạn:

Nguồn

2009-01-28 17:06:21

0

OK, vì vậy tôi nghĩ rằng cách tốt nhất để làm điều này là như sau ....

  • Sử dụng phông chữ ttf trong trường hợp đầu tiên
  • Giảm lại phông chữ OET cho IE
  • Quay lại Arial, sans-serif cho các trình duyệt không hỗ trợ phông chữ được nhúng.

Tuyệt vời, bây giờ chỉ cần tìm một số phông chữ EOT.

Nguồn

2009-01-28 17:22:42 jonhobbs

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

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