2013-03-03 41 views
10

Sử dụng Google WebFonts ("Oswald" trong trường hợp này), tôi đã nhận thấy rằng phông chữ của tôi được hiển thị đậm hơn mức cần thiết. Tôi đã giải quyết vấn đề này trong các trình duyệt dựa trên webkit bằng cách sử dụng:Làm mịn phông chữ trong Firefox

-webkit-font-smoothing: antialiased; 

nhưng trong Firefox tôi không thể tìm thấy tuyên bố kiểm soát điều này. Tôi đã nghe nói về việc sử dụng một hack text-shadow để sửa lỗi này, nhưng tôi không muốn sử dụng điều này vì nó chắc chắn sẽ thay đổi các đặc tính hình học của phông chữ.

Đây là những gì nó trông giống như trong webkit (Chrome):

Chrome looks good

Đây là khối ô vuông khủng khiếp vẽ nhờ Firefox:

Firefox ugly

Tôi biết có một cách để đạt được điều này trong FireFox, bởi vì tôi tìm thấy font này trên font-combinator.com, và nó hiển thị đúng trên trình kết hợp phông chữ bằng Firefox. Đây là những gì nó trông giống như trên Firefox thông qua font-combinator.com:

on Font-combinator.com using firefox

Sau khi duyệt qua css sử dụng để tạo font-Combinator, tôi thấy lời tuyên bố này: text-rendering: optimizelegibility;, nhưng điều này không hoạt động khi áp dụng với yếu tố của tôi.

Tôi cũng đã cố gắng:

text-rendering: optimizeLegibility; 
text-rendering: geometricPrecision; 
font-smooth: always; 
font-smooth: never; 
font-smoothing: antialiased; 
-moz-font-smoothing: antialiased; 

Làm thế nào tôi có thể nhận được Firefox để Antialias phông chữ của tôi để họ nhìn ngay khi được hiển thị? Bạn có thể tìm thấy tuyên bố hoặc kết hợp các khai báo khiến chúng hiển thị đúng trên www.font-combinator.com không?

Tôi đang sử dụng phiên bản FireFox tương đối cũ (16.0.2) vì máy này đã cài đặt phiên bản OSX cũ.

+0

Không giống như render vấn đề, bạn đang khai báo font-weight? –

+0

'body {font-weight: normal; } 'Cảm ơn mọi ý tưởng. –

+0

Bạn có thể dán khai báo phông chữ không? –

Trả lời

1

Bạn đã thử khai báo chữ số bằng chữ số thay vì chỉ 'bình thường' hoặc 'đậm'? Có rất nhiều sự khác biệt trong việc hiển thị các webfont trong các trình duyệt khác nhau.

Thử đặt {font-weight: 400;} cho văn bản thông thường và {font-weight: 700;} để in đậm.

35

Đây là một Firefox trên OSX chỉ vấn đề ...

Tôi chỉ trả lời câu hỏi này: How to antialias SVG text in Firefox với một giải pháp khả thi thành vấn đề của bạn.

Tôi nghĩ rằng bạn có thể sử dụng các thuộc tính sau:

-moz-osx-font-smoothing: grayscale; 

này sẽ được phát hành với firefox 25 (một xây dựng hàng đêm có thể được tìm thấy tại http://nightly.mozilla.org/)

+0

Chụp hình thánh! Những công việc này! –

+3

Tôi cầu xin sự khác biệt. Tôi nhận được vấn đề này trên Windows 7 trên Firefox chỉ (Chrome và IE được mịn theo mặc định, tôi không phải làm bất cứ điều gì). Tôi đang sử dụng font-family: Bitter, Georgia, serif – goamn

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