Jak zastosować efekty anty-alias czcionki w CSS?

Question

Jak zastosować anty-aliasing czcionek Photoshopa, np. Ostry, ostry, silny i płynny w CSS?

Czy są one obsługiwane przez wszystkie przeglądarki?

Answer 1

tutaj idziesz Panie :-)

.myElement{ 
    -webkit-font-smoothing: antialiased; 
    } 

.myElement{ 
    -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px; 
    } 

Aktualizacja: (patrz Duke)

.myElement{ 
    text-shadow: rgba(0,0,0,.01) 0 0 1px; 
    } 

Answer 2

Krótka odpowiedź: Nie możesz.

CSS nie ma technik, które wpływają na renderowanie czcionek w przeglądarce; tylko system może to zrobić.

Oczywiście, ostrość tekstu można łatwo uzyskać na ekranach o gęstości pikseli, ale jeśli używasz normalnego komputera, który będzie trudny do osiągnięcia.

Istnieje kilka nowszych czcionek, które są płynne, ale przy ich poświęceniu wydają się nieco rozmyte (na przykład w większości czcionek Adobe). Możesz także znaleźć kilka gładkich, ale rozmytych czcionek pod numerem Google Fonts.

Istnieje kilka nowych technik CSS3 do renderowania czcionek i efektów tekstowych, chociaż spójność, wydajność i niezawodność tych technik różnią się tak bardzo, że zazwyczaj nie należy na nich polegać zbyt mocno.

Answer 3

działa najlepiej. Jeśli chcesz użyć go w skali całej witryny, bez konieczności dodawania tej składni do każdej klasy lub identyfikatora, dodaj następujący kod CSS swojego ciała CSS:

body { 
    -webkit-font-smoothing: antialiased; 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004); 
    background: url('./images/background.png'); 
    text-align: left; 
    margin: auto; 

}