2009-05-30 8 views
18

Tôi thực sự có ngay bây giờ hai câu hỏi:Tất cả về việc chọn font chữ phù hợp với một trang web

1) phông chữ gì gương mặt được ưa thích cho một trang web? Ngay bây giờ tôi thực sự thích 'Giao diện người dùng Segoe', nhưng nó chỉ có sẵn trên các hệ thống Windows mới nhất như Vista và 2008 Server. Vì vậy, tôi đã xác định một chuỗi:

font-family: 'Segoe UI', Tahoma, Arial, Helvetica, Sans-Serif; 

Tôi không thực sự thích giao diện của tất cả chúng ngoại trừ 'Giao diện người dùng Segoe'. Bất kỳ đề xuất về những gì font đẹp có thể được sử dụng ngoài việc đó? Tôi cũng đã thử 'Trebuchet MS', nó trông rất tuyệt trên các tài liệu, nhưng không thực sự trên một trang.

2) Bất kỳ cách nào để chỉ định bằng CSS các kích thước phông chữ khác nhau cho từng kiểu chữ cụ thể-familiy? Giống như 'Giao diện người dùng Segoe - 9px', Tahoma - 8px v.v. Điều này có lẽ là không thể, nhưng có thể có một số thủ thuật?

Tôi cũng biết mình sẽ nhận được nhiều nhận xét ngay bây giờ để sử dụng kích thước phông chữ tương đối, nhưng tôi không muốn điều đó. Tôi có một số đồ họa trong thiết kế của tôi mà không thể kéo dài. Nếu người dùng hoặc trình duyệt mặc định dẫn đến phông chữ được hiển thị với kích thước khác, thiết kế sẽ sớm bị tách rời. Tôi thích có thiết kế với giới hạn kích thước phông chữ để không có thiết kế nào cả.

+0

related: http://stackoverflow.com/questions/554055/web-programming-grand-challenges/554175#554175 –

+0

Bạn có thể tìm thấy một cái nhìn tổng quan về fo có liên quan nt ngăn xếp ở đây: http://cssfontstack.com/ –

+0

Tôi có thể thêm rằng nó không thực sự có ý nghĩa để đặt Helvetica trước khi Arial kể từ thực tế tất cả các máy tính sẽ có Arial nhưng ít hơn nhiều (vẫn có lẽ nhất) sẽ có Helvetica vì vậy Arial sẽ có ý nghĩa hơn như một dự phòng. –

Trả lời

17

1) Phông chữ nào được ưu tiên cho trang web?

Xem trang này liên quan đến safe web fonts.

2) Bất kỳ cách nào để chỉ định các kích thước phông chữ khác nhau cho từng họ phông chữ cụ thể thông qua CSS?

Không.

Chẳng bao lâu, @font-face sẽ được tất cả các trình duyệt chính hỗ trợ và bạn sẽ có thể sử dụng bất kỳ phông chữ nào bạn muốn trên trang web của mình.

Cho đến lúc đó, hãy xem Cufón hoặc sIFR.

+0

Thật không may, hỗ trợ bởi tất cả các trình duyệt chính không có nghĩa là hỗ trợ bởi tất cả khách hàng. Các trình duyệt cũ (IE6 Tôi đang xem bạn) sẽ tiếp tục giữ lại mọi thứ (CSS, JS, ...). May mắn thay @ font-face chỉ nên được bỏ qua bởi các trình duyệt không hỗ trợ nó, vì vậy bạn vẫn có thể thiết lập mọi thứ để làm giảm một cách duyên dáng –

+10

Internet Explorer đã hỗ trợ @ font-face kể từ IE 4.0 ... –

+1

@Mathius nhưng nó chỉ hỗ trợ định dạng sở hữu độc quyền EOT. Bạn phải cung cấp định dạng theo hai định dạng để nhận hỗ trợ trình duyệt chéo: http://randsco.com/index.php/2009/07/04/p680 – AaronLS

4

Re. sự lựa chọn phông chữ của bạn, tôi sẽ xem xét khả năng sử dụng là một yêu cầu quan trọng (trừ khi bạn đang đi cho một định dạng có chủ ý).

Neilson tạo study và thấy Verdana hoặc Arial là lựa chọn tối ưu về độ dễ đọc.

5

1) Mặt phông nào được ưu tiên cho trang web? Ngay bây giờ tôi thực sự thích 'Giao diện người dùng Segoe', nhưng nó chỉ có sẵn trên các hệ thống Windows mới nhất như Vista và 2008 Server. Vì vậy, tôi đã xác định một chuỗi : họ phông chữ: 'Giao diện người dùng Segoe', Tahoma, Arial, Helvetica, Sans-Serif; Tôi thực sự không thích giao diện của tất cả trong số chúng ngoại trừ 'Giao diện người dùng Segoe'. Mọi đề xuất về phông chữ đẹp nào có thể là được sử dụng ngoài việc đó? Tôi cũng đã thử 'Trebuchet MS', nó trông tuyệt vời trên tài liệu, nhưng không thực sự trên một trang.

Phông chữ nào được ưu tiên hơn? Đây là một câu hỏi khó. Có ba nền tảng điện toán chính mà mỗi nền tảng đều có phông chữ cơ sở riêng.Sau đó, một số phần mềm như Adobe Creative Suite, bộ Microsoft Office hoặc thậm chí là phần mềm đơn giản như trình xem Powerpoint 2007 dành cho XP cài đặt phông chữ cho người dùng. Có rất nhiều biểu đồ trên web liệt kê commonly used fonts.

Đối với một trang web, bạn sẽ muốn sử dụng phông chữ dễ đọc. Hầu hết các phông chữ màn hình thường được sử dụng trên web là khá dễ đọc. Các phông chữ bạn đề cập đến ví dụ là ví dụ tốt. Phông chữ dễ đọc nhất trên màn hình là Verdana, mặc dù nó thường được coi là xấu xí. Arial luôn là lựa chọn an toàn.

Chỉ cần cẩn thận với tuyên bố giao diện người dùng Segoe đó: nếu người dùng Windows XP có phông chữ đó, nó có thể sẽ không rõ ràng với tính năng chống răng cưa bị tắt.

Đối với các tiêu đề, bạn có thể sử dụng các kỹ thuật tùy chỉnh và sử dụng như sIFR và Cufon để thay thế văn bản bằng phông chữ hệ thống không phải gốc.

Ghi chú nhanh về kích thước: hầu hết các trang web có xu hướng đặt kích thước phông chữ thực sự nhỏ. 13 pixel thực sự là tối thiểu cho các văn bản dài (xem relative readibility). Phông chữ có chiều cao x nhỏ như Times chỉ nên được sử dụng cho các tiêu đề hoặc trong một kích thước đủ lớn (ví dụ: 15+ pixel).

2) Bất kỳ cách nào để xác định với CSS cỡ chữ khác nhau cho mỗi đặc biệt font-familiy? Giống như 'Segoe UI - 9px', Tahoma - 8px v.v. Đây là có thể không thực hiện được, nhưng có thể có là một số thủ thuật?

Không, điều này là không thể. Bạn có thể đưa ra giả định về trình duyệt và hệ điều hành mọi người đang chạy qua Javascript và do đó đưa ra giả định về các phông chữ mà họ đã cài đặt, nhưng đó là rất nhiều công việc cho một sự gia tăng tương đối nhỏ. Tôi sẽ tư vấn cho chống lại nó.

2

CSS3 sẽ tự nhiên hỗ trợ phông chữ có thể tải xuống (bạn sẽ không được tải xuống, chúng chỉ hoạt động khi đang di chuyển), vì vậy bạn có thể sử dụng bất kỳ kiểu chữ nào bạn muốn. Chúng tôi chỉ phải đợi nó nhưng vì nó sẽ chỉ có trong Firefox 3.5 và Opera 10.

Bạn cũng có thể sử dụng các phông chữ cổ điển như: Arial/Helvetica, Verdana, Georgia, hoặc thậm chí Times Roman. . Bạn chỉ cần tìm đúng kích thước phông chữ và độ tương phản với các yếu tố khác trên trang.

+0

Tôi cũng đọc Safari 4 sẽ hỗ trợ điều này. – User

7

Sử dụng đúng kiểu chữ cho trang web của bạn. Nó không đơn giản như nói rằng "đây là font chữ tốt nhất cho các trang web". Dưới đây là hai trích dẫn (nguyên tắc đọc) của Robert Bringhurst's "The Elements of Typographic Style":

  • "Typography tồn tại để tôn trọng nội dung".
  • "Chọn khuôn mặt phù hợp với tác vụ cũng như chủ đề".

Một lưu ý khác, trừ khi khuôn mặt serif thực sự phù hợp với trang web, mặt sans-serif phù hợp hơn với phương tiện kỹ thuật số.

Liên quan đến điểm thứ hai của bạn, Phil Oye gần đây đã phát hành FontUnstack, một plugin jQuery sẽ cho bạn biết phông chữ nào đang được sử dụng cho một phần tử nhất định. Phần tử sẽ được cấp một lớp (ví dụ: "set_in_gill_sans") qua đó bạn có thể áp dụng các kiểu cụ thể cho các kiểu chữ khác nhau.

Ngoài ra, hãy xem font matrix (1.5 tuổi) và những suy nghĩ tốt font-stacks.

2

Cá nhân, tôi thích Verdana và Georgia, mặc dù chúng chỉ là Mac/Windows- "an toàn". Trong trường hợp của bạn có lẽ tốt nhất là nên chọn phông chữ lựa chọn thứ hai có cùng số liệu như lựa chọn đầu tiên của bạn.

2

Hầu hết các trình duyệt chính đã hỗ trợ @font-face để bạn có thể sử dụng bất kỳ phông chữ nào có sẵn có sẵn công khai.
Google Web Fonts host một số phông chữ miễn phí để lựa chọn:

Google Web Fonts

Ngoài ra còn được trả tiền các trang web như Typekit rằng sẽ tổ chức trả phông chữ cho bạn và cho phép bạn mua chúng:

enter image description here

+1

+1 cho con trỏ tới google webfonts. Coo, câu hỏi này khá cũ. – icabod