2010-09-16 33 views
25

Khi tôi thiết kế trong Photoshop, phông chữ của tôi mỏng và sắc nét, nhưng khi tôi khai báo phông chữ trong CSS - ngay cả khi sử dụng phông chữ: nhẹ hơn - phông chữ luôn xuất hiện đậm hơn.Trọng lượng phông chữ an toàn trên web - Làm thế nào để mỏng hơn?

Có lẽ đây chỉ là cách trình duyệt hiển thị phông chữ (Trong phông chữ của IE vẫn còn mỏng), nhưng tôi đã tự hỏi liệu có bất kỳ thủ thuật hoặc mẹo nào để đạt được cùng một hình dạng mỏng và sắc nét.

Trả lời

2

Bạn nói đúng, đó là sự khác biệt trong hiển thị. Cách hiển thị văn bản tùy thuộc vào hệ điều hành, cài đặt và trình duyệt của bạn (Safari, ví dụ: hiển thị đậm hơn IE). Vì vậy, không có cách nào để làm cho kết xuất này phù hợp với comp photoshop của bạn.

Một chút biết thêm ở đây:

Browser Choice vs Font Rendering | Phinney on Fonts

15

Font vẽ có thể phức tạp. Thật không may, các trình duyệt khác nhau sẽ hiển thị cùng một phông chữ khác nhau.

Theo như CSS đi, thiết lập font-weight:100 đảm bảo trọng lượng có sẵn nhẹ nhất sẽ được sử dụng. Bạn cũng có thể muốn đặt -webkit-font-smoothing:antialiased.

<style type="text/css"> 
    body { 
     font-family:"Helvetica Neue", Arial, sans-serif; 
     font-weight:100; 
     -webkit-font-smoothing:antialiased; 
    } 
</style> 

Helvetica Neue là phông chữ rất mỏng có nguồn gốc OSX.

Tốt nhất thực sự là http://www.google.com/fonts/

Cũng đáng chú ý:
https://typekit.com/
http://www.fontsquirrel.com/tools/webfont-generator

+0

Nếu bố trí của phông chữ không quan trọng, đây là một giải pháp nhanh chóng, nhưng không thực sự làm cho phông chữ sắc nét hơn, vì nó chỉ là phông chữ được chọn có phông chữ có trọng lượng nhẹ hơn (hoặc chính phông chữ được thiết kế với các đường mảnh). – einord

1

Tôi không tin bất kỳ một trong những phông chữ web phổ biến có trọng lượng rất mỏng trong tất cả các trình duyệt. Tuy nhiên, có cách nhúng phông chữ tùy chỉnh trong tất cả các trình duyệt chính hiện nay 'ngày.

http://typekit.com/
http://www.google.com/webfonts
http://www.fontsquirrel.com/fontface/generator

Bất kỳ của những công cụ này có thể giúp bạn có được chỉ là về bất kỳ loại font bạn có thể tưởng tượng. Chỉ cần cẩn thận với bản quyền trên bản cuối cùng.

25

Sử dụng CSS để mịn lên phông chữ của bạn ...

đặt này trong CSS của bạn:

-webkit-font-smoothing: antialiased; 
+1

điều này thực sự là một cái gì đó giúp. ít nhất là cho các trình duyệt webkit! kiểm tra cũng câu trả lời này cho một câu hỏi tương tự: http://stackoverflow.com/a/4012154/336235 –

+0

là der bất kỳ giải pháp như vậy có sẵn cho Opera, IE và Firefox? –

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