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

112

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?

matowe
źródło
5
Warto przestać to robić i przeczytać, dlaczego tutaj: usabilitypost.com/2012/11/05/stop-fixing-font-smoothing
fregante
20
^ jest to szerokie uogólnienie i można używać wygładzania czcionek. To problem z renderowaniem jest problemem, a nie zachowanie projektanta. Kiedy projektujesz układ, a czcionka wydaje się być częściowo pogrubiona ze względu na silnik renderujący, to silnik wymaga naprawy, a nie układ.
Dylan
1
Nie jest to do końca szerokie uogólnienie. Artykuł mówi, że renderowanie subpikselowe miało na celu przede wszystkim uczynienie jasnego tekstu na ciemnym tle bardziej czytelnym (tj. Dostępnym) i sprawienie, że szeroka definicja CSS body { -webkit-font-smoothing: antialiased; }jest zbyt uciążliwa.
Matt Scheurich
3
Moje czcionki internetowe, które są ciemne na jasnym tle, również są „pozornie pogrubione”. Mówię dookoła „antyaliasing”.
Jason T Featheringham
5
Sposób wyświetlania strony zależy od projektanta, w tym wszystkich atrybutów typograficznych. Do ich obowiązków należy zapewnienie użyteczności, spójności i atrakcyjności na najszerszej gamie platform. Dostęp do atrybutów wygładzania czcionek za pośrednictwem CSS zapewnia większą kontrolę. Jak wszystko, może zostać niewłaściwie użyte w niepowołanych rękach. Ale zachwalanie osobistej filozofii zamiast odpowiadania na pytanie nie jest pomocne.
Beejor

Odpowiedzi:

193

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.

Maximilian Hoffmann
źródło
6
Dlaczego tylko OSX?
Yassir Ennazk
7
Systemy Windows i Linux używają innych algorytmów renderowania czcionek niż OSX.
Maximilian Hoffmann
15

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ć:

Jonathan Naguin
źródło
2
Cóż, problem polega na tym, że moje czcionki wyglądają na „pogrubione” i spuchnięte w przeglądarce Firefox i Operze. Dzięki temu -webkit-font-smoothing:antialiased;mogłem to naprawić w Safari i Chrome. Chciałbym znaleźć jakiś „hack”, który sprawiłby, że moje czcionki również w Firefoksie byłyby trochę jaśniejsze. Myślałem o dodaniu text-shadowdo niego bieli tylko w Moz, ale nie ma sposobu na zastosowanie "wstawionego" cienia tekstu, który rozjaśniłby czcionkę.
mat.
1
@matt W tym pytaniu możesz wypróbować kilka porad dotyczących CSS: stackoverflow.com/questions/761778/… Może znajdziesz jakąś alternatywę CSS.
Jonathan Naguin
11

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.

Volker E.
źródło
Nic nie pomaga
vsync
spowoduje to pogrubienie czcionek na chromie na podstawie czcionki
Ben Sewards
1
@BenSewards Czy możesz zapewnić czcionkę, w przypadku której natrafiłeś na bardziej odważne renderowanie czcionki? A może nawet CodePen? Z góry dziękuję.
Volker E.
1
@VolkerE. dzięki za świetne rozwiązanie. Mam ten sam irytujący problem z czcionką kodu źródłowego Pro w lepkim nagłówku. Kiedy przewijam, czcionka jest bardzo mała, a dzięki cieniu tekstu czcionka nie sprawia żadnych problemów.
Evolutio
Na obecnym chrome (58.0.3029.110) „gładki” tekst wygląda naprawdę okropnie. (tekst „postrzępiony” jest nieco lepszy)
RecursiveExceptionException
7

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.

azenet
źródło
czy jest w oknach?
Vignesh
5

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.

Plici Stéphane
źródło
Wykonał świetną robotę w naprawianiu postrzępienia czcionek podczas przejść css (choć nie usunął go całkowicie). Użyłem generatora FontSquirrel z opcją TTFAutohint
Andrey
Użyłem Fontie do ponownego wygenerowania moich plików WOFF, WOFF2, EOT i SVG z włączoną funkcją autohint dla systemu Windows.
Dominique
4

... 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;

}
user3634787
źródło
2
Przepraszam ... co to jest „reinschreiben”? Większość z nas nie mówi po niemiecku, więc byłoby miło, gdybyś napisał cały post po angielsku.
rayryeng
3
Och proszę, przepraszam, przetłumaczyłem z Google i jakoś złe słowo odkąd się
potknęło
3

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;
Christelle
źródło
Pytanie dotyczy Firefoksa i Opery. więc ta odpowiedź nie ma nic wspólnego z pytaniem
vsync
-4

Dodawanie

font-weight: normal;

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

Aaron VIII
źródło
7
font-weight(nic dziwnego) wpływa na grubość czcionki, a nie na jej wygładzanie. Dodanie go do deklaracji @ font-face spowoduje zamieszanie, jeśli połączony plik czcionki nie jest plikiem czcionki normalnej wagi.
Mike Meyer
@MikeMeyer Właściwie zgadzam się z komentarzem Aarona. Dodanie grubości czcionki: normalne do dołączenia czcionki, która jest „lekką” czcionką, wydawałoby się wprowadzać zamieszanie, ale powinno to tylko dezorientować początkującego programistę. Właściwie dobrą praktyką jest określenie wartości domyślnej na podstawie mojego doświadczenia. Normalny w tym przypadku odnosi się do „normalnego” dla dołączonej czcionki i używanych znaków i nie ma na celu określenia informacji o samej kroju czcionki. W wielu przypadkach (szczególnie na dużych platformach) zmniejszy to prawdopodobieństwo błędów pochodzących z nazbyt typowej złej architektury, którą można zobaczyć wokół stylów czcionek.
dudewad
W rzeczywistości sama nazwa kroju czcionki powinna domyślnie określać wagę czcionki ...!
dudewad
@dudewad to wspaniale, że się zgadzasz, i tak, to przyzwoita (choć dość zwięzła) „wskazówka” font-weight. Rzecz w tym, że OP nie pytał o font-weight- pytał o antyaliasing . To poprawna odpowiedź na zupełnie inne pytanie.
Mike Meyer
@MikeMeyer masz całkowitą rację. Czasami jestem trochę ponoszony. ;)
dudewad