Wygładzanie i antyaliasing czcionek internetowych w przeglądarkach Firefox i Opera

W swojej witrynie mam niestandardowe czcionki internetowe. Aby dostosować wygląd renderowania, użyłem następującego kodu:

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

Działa to dobrze w Safari i Chrome (krawędzie są ostrzejsze, a linie cieńsze). Czy istnieje sposób na zaimplementowanie tego samego stylu w Firefoksie i Operze?

Ponieważ Opera jest obsługiwana przez Blink od wersji 15.0, -webkit-font-smoothing: antialiaseddziała również w Operze.

Firefox w końcu dodał właściwość umożliwiającą wygładzanie krawędzi w skali szarości. Po długiej dyskusji będzie dostępny w wersji 25 z inną składnią, co wskazuje, że ta właściwość działa tylko w systemie OS X.

-moz-osx-font-smoothing: grayscale;

Powinno to naprawić rozmyte czcionki ikon lub jasny tekst na ciemnym tle.

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

Możesz przeczytać mój post o renderowaniu czcionek w OSX, który zawiera mixin Sass do obsługi obu właściwości.

Cóż, Firefox nie obsługuje czegoś takiego.

Na stronie odniesienia z Mozilli określa font-smoothjako właściwość CSS steruje zastosowaniem wygładzania podczas renderowania czcionek, ale ta właściwość została usunięta z tej specyfikacji i obecnie nie znajduje się na standardowej ścieżce.

Ta właściwość jest obsługiwana tylko w przeglądarkach Webkit.

Jeśli potrzebujesz alternatywy, możesz to sprawdzić:

• Antyaliasing w tle tekstu | Philip Renich, Strony internetowe - blog
• cufón - czcionki dla ludzi

Przypadek: jasny tekst z postrzępioną czcionką internetową na ciemnym tle Firefox (v35) / Windows
Przykład: Google Web Font Ruda

Zaskakujące rozwiązanie -
dodanie następującej właściwości do zastosowanych selektorów:

selector {
    text-shadow: 0 0 0;
}

Właściwie wynik jest taki sam tylko z text-shadow: 0 0;, ale lubię wyraźnie ustawić promień rozmycia.

Nie jest to uniwersalne rozwiązanie, ale w niektórych przypadkach może pomóc. Ponadto nie doświadczyłem (również nie dogłębnie przetestowanych) negatywnych skutków działania tego rozwiązania.

Po uruchomieniu problemu dowiedziałem się, że mój plik WOFF nie został wykonany poprawnie, wysłałem nowy TTF do FontSquirrel, który dał mi właściwy WOFF, który był gładki w Firefoksie bez dodawania do niego żadnego dodatkowego CSS.

Znalazłem rozwiązanie za pomocą tego linku: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

Metoda krok po kroku:

• wyślij swoją czcionkę do WebFontGenerator i pobierz plik zip
• znajdź czcionkę TTF w pliku Zip
• następnie w systemie Linux wykonaj to polecenie (lub zainstaluj przez apt-get install ttfautohint):
  ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
• następnie jeszcze jeden, wyślij nowy plik TTF (neosansstd-black.changed.ttf) do WebFontGenerator
• otrzymujesz idealny Zip ze wszystkimi swoimi czcionkami internetowymi!

Mam nadzieję, że to pomoże.

... w tagu body i te z treści i kroju wygląda ogólnie lepiej ...

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;

}

Kiedy kolor tekstu jest ciemny, w Safari i Chrome mam lepszy wynik z właściwością css text-stroke.

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

Dodawanie

font-weight: normal;

Do twoich @ font-face czcionki naprawią pogrubiony wygląd w przeglądarce Firefox.