Photoshop Mock Up Font là không giống như trong HTML

Question

(Beginner sang HTML)

Tôi đã thực hiện một Photoshop mock-up của trang web Tôi muốn làm, nhưng văn bản tôi đã sử dụng trong bản mock-up trông khác khi được xem trong Firefox. Văn bản là phông chữ Arial, kích thước 18pt và trọng lượng thông thường, và tôi đã triển khai mã này thành mã HTML, nhưng có vẻ khác.

Có cách nào để làm cho phông chữ trông giống như trong HTML giống như trong Photoshop?

Xin cảm ơn trước :)

Answer 1

Câu trả lời ngắn gọn là "không". Photoshop có chức năng phông chữ lô nhiều hơn so với trình duyệt web. Nó áp dụng tất cả các loại thuật toán làm mịn, và bạn có thể kiểm soát kerning, theo dõi và khoảng cách tốt hơn nhiều.

Mỗi trình duyệt và hệ điều hành đều có một công cụ hiển thị khác nhau, vì vậy ngay cả khi bạn có thể làm như vậy trong một kết hợp trình duyệt/hệ điều hành, nó sẽ trông khác nhau.

Tuy nhiên, hãy kiểm tra tất cả các CSS properties for text để xem bạn có thể có được thứ gì đó mà bạn có thể sống cùng không. Nếu không, đặt cược tốt nhất của bạn là chỉ cần tạo một hình ảnh ra khỏi văn bản của bạn và thêm nó vào trang của bạn với văn bản "alt" tốt và như vậy.

Answer 2

Tôi không chắc chắn bạn đang sử dụng hệ điều hành nào, nhưng Windows và Macintosh có các hệ thống phông chữ khác nhau.

This post by Joel Spolsky chỉ ra rằng việc hiển thị phông chữ dựa trên sự khác biệt về triết học.

Đó có phải là những gì bạn đang thấy không? Vui lòng đăng hình ảnh để chúng tôi có thể xem bạn đang nói về điều gì.

Answer 3

Phông chữ là thứ bạn không thể truy cập ngay trên web. Nếu bạn hoàn toàn phải kiểm soát giao diện của phông chữ, thì bạn phải sử dụng hình ảnh (và bị đánh đập vì nó, đúng như vậy). Nó chỉ đơn giản là không thể để đạt được hiển thị văn bản điểm ảnh hoàn hảo trong HTML. Điều này bắt đầu với sự khác biệt về phông chữ mà hệ điều hành có và kết thúc với sự khác biệt trong các công cụ bố cục trình duyệt.

Answer 4

Có hai cách để làm điều đó:

1. Đi một hình ảnh của font chữ đó và sử dụng nó trong cách bố trí.
2. Sử dụng công cụ tạo phông chữ tùy chỉnh như SIFR hoặc FLIR. Đây là một tùy chọn phức tạp b/c bạn cần sở hữu Adobe Flash và bạn cần có quyền phân phối phông chữ (tương tự như sách, nhạc, v.v.).

Về cơ bản, nếu bạn muốn trông giống hệt nhau và vẫn tuân thủ các tiêu chuẩn, điều này thực sự gần như không thể.

Nếu bạn đang tìm cách biến mockups Adobe Photoshop thành tài liệu HTML, bạn nên xem screencast series trên CSS-tricks.com, do Chris Coyier, một nhà thiết kế tài năng (không phải không phải tôi :)) .

Answer 5

Một điều khác mà bạn sẽ phải hiểu là đó là những người có trình duyệt Web cuối cùng kiểm soát trang của bạn trông như thế nào. Vì vậy, không có vấn đề bao nhiêu fiddling bạn làm để có được một trang web theo cách bạn muốn xem nó, nó sẽ xem khác nhau trên máy tính của người khác

Answer 6

Nếu bạn cần hoàn hảo, phông chữ rõ ràng phù hợp với bạn có thể sử dụng ... đi kèm với một số lượng lớn các nhược điểm.