Tôi muốn sử dụng phông chữ pixel trên web. Tôi đang bao gồm nó bằng cách sử dụng @ font-face tuy nhiên tất cả các trình duyệt đang áp dụng anti-aliasing cho font. Tôi không thể tìm thấy một quy tắc CSS để vô hiệu hóa điều này, bất cứ ai có thể nghĩ ra một phương pháp vô hiệu hóa chống răng cưa?Có thể tắt tính năng chống răng cưa trong CSS khi sử dụng @ font-face với phông chữ pixel không?
Hiển thị phông chữ được thực hiện bởi hệ điều hành và trình duyệt, do đó, tôi tin rằng có rất ít việc bạn có thể làm với CSS. Có thể có một số quy tắc CSS được đề xuất trong thảo luận (tôi đã thấy đề cập đến "font-smooth" hoặc một cái gì đó tương tự), nhưng không có gì trong CSS3, theo như tôi biết, và chắc chắn không có gì trong CSS2.
Tôi không nghĩ rằng css có tùy chọn chống răng cưa. Hãy thử dùng cufon thay thế: http://wiki.github.com/sorccu/cufon/about
Thật dễ sử dụng và nó sẽ hiển thị phông chữ pixel của bạn rất tốt. Bạn cũng có thể quan tâm Shaun Inman's Pxfon: http://shauninman.com/archive/2009/04/17/pxr_cufon_pxfon
này làm cho độc đáo, nhưng làm nổi bật văn bản là khủng khiếp, và nó trở nên rất rõ ràng rằng nó không phải là một bình thường phông chữ. Xem ví dụ về nó ở đây: http://pixel-portraits.com/pxfon/ –
Hầu hết các phông chữ điểm ảnh chỉ sẽ không hoạt động đúng nếu bạn đang sử dụng chúng trên nhiều kích thước 8pt (8, 16, 24, vv)
Nếu bạn làm việc trên sai font-kích thước bạn sẽ kết thúc nhận được bí danh/nhân vật sương mù.
Kiểm tra này ra ...
http://www.fontsquirrel.com/fonts/list/style/Pixel
... nó có thể giúp;)
Ngay cả với kích thước phông chữ chính xác, nó vẫn bí danh phông chữ :( – Samuel
Câu hỏi này là cũ, vì vậy chỉ muốn đưa ra một bản cập nhật.
Dựa trên caniuse.com, có thuộc tính CSS cho nó nhưng đã bị xóa khỏi bản nháp đặc tả CSS3. Vì vậy, nó không phải là một giải pháp tiêu chuẩn. Một số Webkit, Firefox & Trình duyệt Opera hỗ trợ nó nhưng nó không phù hợp. Nó chủ yếu là làm việc cho máy tính để bàn và Mac OS người dùng
-webkit-font-smoothing: none || antialiased || subpixel-antialiased
-moz-osx-font-smoothing: auto || inherit || unset || grayscale
font-smoothing: auto || inherit || unset || grayscale
Tôi có vấn đề tương tự như ngày hôm nay và có vẻ như rằng mặc dù font-mịn không hoạt động trong Firefox hiện đại * thêm một số bộ lọc không:
filter: contrast(1);
Tuy nhiên, nó có vẻ là một chút hacky để vô hiệu hóa chống răng cưa với bộ lọc. Bằng cách này nó không gây ra để hoàn toàn vô hiệu hóa chống răng cưa chỉ gây ra nó được áp dụng bằng cách nào đó khác nhau để phông bitmap render chính xác. Mặt khác, nó phá vỡ việc hiển thị phông chữ không phải bitmap.
* & thinsp; Thử nghiệm trên Fixedsys từ http://doir.ir/fixedsys/demo.html, trên Iceweasel 38.40.0, trên Debian 8.
Cảm ơn, khá nhiều những gì tôi đã tìm. – Samuel