Sử dụng Helvetica Neue trong một trang web

Question

Thông thường, tôi sử dụng "Helvetica Neue" cho phông chữ ở một số trang web mặc dù đang xem các trang web khác, tôi đã thấy một số trang có "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue".

Có lý do nào để tham khảo Helvetica Neue theo cách này không? Hoặc tôi nên gắn bó với bình thường mà tôi sử dụng?

Answer 1

Họ đang dùng cách tiếp cận 'shotgun' để tham chiếu phông chữ. Trình duyệt sẽ cố gắng khớp từng tên phông chữ với bất kỳ phông chữ được cài đặt nào trên máy của người dùng (theo thứ tự chúng đã được liệt kê).

Trong ví dụ "HelveticaNeue-Light" của bạn sẽ được thử trước, nếu biến thể phông chữ này không khả dụng, trình duyệt sẽ thử "Helvetica Neue Light" và cuối cùng là "Helvetica Neue".

Theo như tôi biết, "Helvetica Neue" không được coi là 'phông chữ an toàn trên web', có nghĩa là bạn sẽ không thể dựa vào nó đang được cài đặt cho toàn bộ cơ sở người dùng của bạn. Việc xác định "serif" hoặc "sans-serif" là vị trí mặc định cuối cùng.

Để sử dụng phông chữ không 'an toàn trên web', bạn cần sử dụng kỹ thuật được gọi là nhúng phông chữ. Phông chữ nhúng không cần phải được cài đặt trên máy tính của người dùng, thay vào đó chúng được tải xuống như một phần của trang. Lưu ý rằng điều này làm tăng tải trọng tổng thể (giống như hình ảnh) và có thể có tác động đến thời gian tải trang.

Tài nguyên tuyệt vời cho phông chữ miễn phí với giấy phép nguồn mở là Google Fonts. (Bạn vẫn nên kiểm tra các giấy phép riêng lẻ trước khi sử dụng chúng.) Mỗi ​​phông chữ có liên kết tải xuống cùng với hướng dẫn về cách nhúng chúng vào trang web của bạn.

Answer 2

Giả sử bạn đã tham chiếu và tích hợp chính xác phông chữ của bạn vào trang web của bạn (có lẽ là sử dụng bộ công cụ @ phông chữ), bạn không nên chỉ tham chiếu đến cách bạn làm. Có lẽ nó là như thế này vì vậy họ đã rơi trở lại trong một số trình duyệt không hiển thị các phông chữ một cách chính xác

Answer 3

tôi khuyên bạn nên bài viết này trên CSS Tricks Chris Coyier quyền Better Helvetica:

http://css-tricks.com/snippets/css/better-helvetica/

Anh cơ bản khuyến cáo việc kê khai sau đây để bao gồm tất cả các căn cứ:

body { 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300; 
}