Phông chữ trên web

Question

Bộ sưu tập phông chữ có sẵn cho nhà phát triển web bị hạn chế đáng kể. Tôi nhớ đã đọc từ lâu về TrueDoc, như một cách để vận chuyển phông chữ cùng với một trang web - nhưng dường như nó đã bị suy yếu. Có ai sử dụng cái này, hay cái gì đó tương tự? Nó có được hỗ trợ bởi đủ trình duyệt không? Tôi có thiếu một giải pháp tốt?

Lưu ý rằng nhà phát triển web có trách nhiệm không sử dụng phông chữ chỉ có sẵn trên Windows (và đặc biệt là chỉ có sẵn trên Vista), cũng không sử dụng công nghệ không được hỗ trợ bởi ít nhất của các trình duyệt.

---

Cập nhật: Như nhiều người đã chỉ ra, không có gì sai với việc cung cấp một danh sách các phông chữ dự phòng cho những người không có phông chữ cụ thể mà bạn sử dụng là bao. Tôi làm trong thực tế luôn luôn làm điều này, và không có nghĩa là để cho rằng điều này là sai.

Trong khi câu hỏi của tôi bị sai lệch, ý tôi là một nhà thiết kế không nên đưa ra quá nhiều giả định về những gì khách hàng sẽ có sẵn. Bạn nên lập kế hoạch cho cách tất cả người dùng sẽ thấy trang web của bạn, không chỉ cho những người sử dụng thiết lập ưa thích của riêng bạn.

Answer 1

Safari và ở mức độ thấp hơn, Firefox 3 có hỗ trợ cho @font-face trong CSS, cho phép bạn sử dụng phông chữ tùy chỉnh. Bạn cần có giấy phép thích hợp để phân phối các tệp phông chữ. Những bài viết này giải thích nó một cách chi tiết hơn:

• http://www.css3.info/preview/web-fonts-with-font-face/
• http://www.alistapart.com/articles/cssatten
• http://www.sitepoint.com/blogs/2008/07/30/custom-web-fonts-pick-your-poison/

Answer 2

CSS2 cung cấp:

@font-face { 
    font-family: Garamond; 
    src: url(garamond.eot), url(garamond.pfr); 
} 

Answer 3

Lưu ý rằng một nhà phát triển web có trách nhiệm không sử dụng phông chữ mà chỉ có sẵn trên Windows (và đặc biệt là những người mà chỉ có sẵn trên Vista), và cũng không làm họ sử dụng một công nghệ không được hỗ trợ bởi phần lớn các trình duyệt.

Vâng ... Bạn có thể, miễn là bạn biết cách hiển thị trên hệ điều hành không phải Windows Vista.

Nếu không: yep, @ phông chữ mặt trong CSS2 là lựa chọn thay thế tiêu chuẩn tốt nhất, ngay cả khi nó không được hỗ trợ rộng rãi.

Answer 4

Lưu ý rằng một nhà phát triển web có trách nhiệm không sử dụng phông chữ mà chỉ sẵn trên Windows (và đặc biệt là những cái chỉ có sẵn trên Vista), cũng như chúng không sử dụng công nghệ không được hỗ trợ bởi ít nhất phần lớn các trình duyệt.

Không có gì sai hoặc không chính xác về việc sử dụng phông chữ dành riêng cho Windows/Vista, miễn là bạn giảm độ phân giải thành phông chữ rộng rãi. Ví dụ:

font-family: Calibri, Tahoma, Helvetica, Sans-Serif; 

Thực tế đó là toàn bộ điểm!

Answer 5

Bạn có thể sử dụng khóa học SIFR.

Điều này làm giảm hiệu quả trong các trình duyệt không hỗ trợ và có thể truy cập được.

Nó không thực sự phù hợp để sử dụng trên tải văn bản nhưng đối với tiêu đề và văn bản nổi bật, nó hoàn hảo.

Tất nhiên đây là một công việc xung quanh giới hạn nội tại của trình duyệt và web tại thời điểm này, nhưng khi điều này không đúng đối với phần lớn công nghệ và kỹ thuật web.

Answer 6

Đây là chủ đề kịp thời; chúng tôi chuyển sang Arial vì Calibri là WAY nhỏ so với tất cả các phông chữ dự phòng khác! Nó đau đớn tôi rất nhiều để chuyển sang (gag) Arial vì đó là một bản sao tào lao của Helvetica:

http://www.ms-studio.com/articles.html

Những khó khăn cỡ (quá lớn nếu bạn đi bằng "c" font như là tiêu chuẩn của bạn, quá nhỏ nếu bạn đi với một cái gì đó bình thường) đều được mô tả chi tiết ở đây:

http://neosmart.net/blog/2006/css-vistas-new-fonts/

tôi sẽ bỏ lỡ RGB tay chỉnh đẹp Calibri của răng cưa rất nhiều, nhưng đó chỉ là bất khả thi để cung cấp một kinh nghiệm tốt cho hầu hết người dùng không đòi hỏi Calibri được cài đặt. Nó là hợp lý phổ biến, như nó đi kèm với Office 2007 (Win/Mac) và tất nhiên Vista .. nhưng nó là xa phổ quát, do đó, nó là một chút vô trách nhiệm dựa nhiều vào nó cho một khán giả web toàn cầu.

Answer 7

IE hỗ trợ @font-face (bắt đầu là công nghệ độc quyền của họ trong MS Word). Here's a blog post from the IE team about it just about a month ago.

Answer 8

Lưu ý rằng một nhà phát triển web có trách nhiệm không sử dụng phông chữ mà chỉ có sẵn trên Windows (và đặc biệt là những người mà chỉ có sẵn trên Vista), và cũng không làm họ sử dụng một công nghệ không được hỗ trợ bởi ít nhất phần lớn các trình duyệt.

Tôi nghĩ rằng điều này khá thiếu điểm. Nó sẽ không thành vấn đề nếu bạn đã làm; tất cả mọi người sẽ nhận được một cái gì đó hợp lý rằng họ có thể đọc dễ dàng, và những người cần phải thay đổi phông chữ thành bất kỳ thứ gì họ muốn bởi vì đó chỉ là văn bản và tất cả các trình duyệt chính cho phép bạn tùy chỉnh phông chữ mà bạn thấy bất kể tùy chọn của nhà thiết kế trang web.

Không có gì bị hỏng về việc đề xuất phông chữ trong CSS của bạn mà một số người dùng không có; họ chỉ thấy điều gì đó khác với bạn. Khác nhau không bị hỏng. Họ thậm chí sẽ không tự hỏi tại sao bạn đang sử dụng phông chữ mặc định bởi vì họ sẽ không biết rằng những người khác nhìn thấy bất cứ điều gì khác nhau.

Đây là toàn bộ các điểm bộ phông chữ:

Verdana, Arial, Helvetica, sans-serif 

Đó là thực hành tốt chính vì nó thừa nhận rằng mọi người sẽ thấy những điều khác nhau.

Đây là thực hành tốt quá:

Gill Sans, Verdana, Arial, Helvetica, sans-serif 

Vì vậy, hầu hết mọi người không có Gill - người quan tâm? Họ nhận được một trang web hoàn hảo tốt bất kể.

Và đây sẽ là tốt quá, nhưng một chút kỳ lạ và lười biếng:

Gill Sans 

thiết kế web vô trách nhiệm đang làm những việc như thiết lập văn bản như hình ảnh mà không cần sử dụng alt văn bản, không sử dụng phông chữ thú vị trong bộ phông chữ.

Answer 9

Tôi muốn tưởng tượng bất kỳ phương pháp gửi phông chữ nào bằng trang web sẽ gây ra rủi ro bảo mật nào đó. Tôi đã nghe nói về phương pháp, trong trường hợp khách hàng không có phông chữ bắt buộc, văn bản có thể được thay thế động bằng hình ảnh hoặc sắp xếp một số flash được hiển thị. Người duy nhất như thế này tôi có thể tìm thấy bây giờ là tại AListApart nhưng nó có thể đã được dự phòng. Phương pháp đã nói cũng sẽ yêu cầu css, hình ảnh và javascript hoạt động và có thể gây đau đớn khi triển khai trên các trình duyệt.

Answer 10

Bạn có thể làm điều đó với @font-face declaration mới có sẵn trong CSS3. Nó có hỗ trợ rất tốt cho một tính năng CSS3 (tức là từ IE4), quá.

Cú pháp chung là:

@font-face { 
    src: url('path to your font') format('woff|ttf|svg|eot|…'); 
    font-family: the name to use; 
    font-weight: an optional weight; 
    font-style: an optional style; 
}

Ngoài ra còn có a generator available có thể chuyển đổi font với nhiều định dạng và tạo CSS thích hợp.

Hiện tại, tôi khuyên bạn chỉ nên cung cấp tệp WOFF; tiện lợi, easy to create.

Ngoài ra, hãy đảm bảo trích dẫn tên của định dạng (ví dụ: format('woff')); nó sẽ không hoạt động trên Firefox nếu không.