Webfont Smoothing và Antialiasing trong Firefox và Opera

Tôi đã sử dụng phông chữ web tùy chỉnh trên trang web của mình. Để tạo kiểu cho đầu ra kết xuất của mình, tôi đã sử dụng mã sau:

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

Điều này hoạt động tốt trên Safari và Chrome (các cạnh sắc nét hơn và các đường mỏng hơn). Có cách nào thực hiện cùng một kiểu trên Firefox và Opera không?

Vì Opera được cung cấp bởi Blink vì Phiên bản 15.0 -webkit-font-smoothing: antialiasedcũng hoạt động trên Opera.

Firefox cuối cùng đã thêm một thuộc tính cho phép khử răng cưa màu xám. Sau một thời gian dài thảo luận, nó sẽ có sẵn trong Phiên bản 25 với một cú pháp khác, chỉ ra rằng thuộc tính này chỉ hoạt động trên OS X.

-moz-osx-font-smoothing: grayscale;

Điều này sẽ sửa chữa các phông chữ biểu tượng mờ hoặc văn bản sáng trên nền tối.

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Bạn có thể đọc bài đăng của tôi về cách kết xuất phông chữ trên OSX bao gồm một hỗn hợp Sass để xử lý cả hai thuộc tính.

Chà, Firefox không hỗ trợ những thứ như vậy.

Trong trang tham chiếu từ Mozilla chỉ định font-smoothlà thuộc tính CSS kiểm soát việc áp dụng khử răng cưa khi các phông chữ được hiển thị, nhưng thuộc tính này đã bị xóa khỏi thông số kỹ thuật này và hiện không có trên đường chuẩn.

Thuộc tính này chỉ được hỗ trợ trong trình duyệt Webkit.

Nếu bạn muốn một sự thay thế, bạn có thể kiểm tra điều này:

• Text-Shadow Anti-Aliasing | Philip Renich, Trang web - blog
• cufón - phông chữ cho mọi người

Trường hợp: Văn bản nhạt với phông chữ web lởm chởm trên nền tối Firefox (v35) / Windows
Ví dụ: Google Web Font Ruda

Giải pháp đáng ngạc nhiên -
thêm thuộc tính sau vào các bộ chọn được áp dụng:

selector {
    text-shadow: 0 0 0;
}

Trên thực tế, kết quả cũng giống như vậy text-shadow: 0 0;, nhưng tôi thích đặt bán kính mờ một cách rõ ràng.

Nó không phải là một giải pháp phổ biến, nhưng có thể hữu ích trong một số trường hợp. Hơn nữa, tôi chưa trải nghiệm (cũng chưa được kiểm tra kỹ lưỡng) các tác động tiêu cực đến hiệu suất của giải pháp này cho đến nay.

Sau khi gặp sự cố, tôi phát hiện ra rằng tệp WOFF của mình không được thực hiện đúng cách, tôi đã gửi một TTF mới đến FontSquirrel để cung cấp cho tôi một WOFF thích hợp hoạt động trơn tru trong Firefox mà không cần thêm bất kỳ CSS bổ sung nào vào đó.

Tôi đã tìm thấy giải pháp bằng liên kết này: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

Phương pháp từng bước:

• gửi phông chữ của bạn tới WebFontGenerator và lấy mã zip
• tìm phông chữ TTF trên tệp Zip
• sau đó, trên linux, thực hiện lệnh này (hoặc cài đặt bằng cách apt-get install ttfautohint):
  ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
• sau đó, một lần nữa, gửi tệp TTF mới (neosansstd-black.changed.ttf) trên WebFontGenerator
• bạn sẽ có được một Zip hoàn hảo với tất cả các webfonts!

Hy vọng điều này có thể giúp cho bạn.

... trong thẻ body và những thứ này từ nội dung và kiểu chữ nhìn chung trông đẹp hơn ...

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}


#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

Khi màu văn bản tối, trong Safari và Chrome, tôi có kết quả tốt hơn với thuộc tính css text-stroke.

-webkit-text-stroke: 0.5px #000;

Thêm

font-weight: normal;

Đối với phông chữ @ font-face của bạn sẽ sửa lỗi xuất hiện đậm trong Firefox.