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?
css
fonts
webfonts
antialiasing
matowe
źródło
źródło
body { -webkit-font-smoothing: antialiased; }
jest zbyt uciążliwa.Odpowiedzi:
Ponieważ Opera jest obsługiwana przez Blink od wersji 15.0,
-webkit-font-smoothing: antialiased
dział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.
Powinno to naprawić rozmyte czcionki ikon lub jasny tekst na ciemnym tle.
Możesz przeczytać mój post o renderowaniu czcionek w OSX, który zawiera mixin Sass do obsługi obu właściwości.
źródło
Cóż, Firefox nie obsługuje czegoś takiego.
Na stronie odniesienia z Mozilli określa
font-smooth
jako 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ć:
źródło
-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 dodaniutext-shadow
do niego bieli tylko w Moz, ale nie ma sposobu na zastosowanie "wstawionego" cienia tekstu, który rozjaśniłby czcionkę.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:
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.
źródło
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.
źródło
Znalazłem rozwiązanie za pomocą tego linku: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/
Metoda krok po kroku:
apt-get install ttfautohint
):ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
Mam nadzieję, że to pomoże.
źródło
... w tagu body i te z treści i kroju wygląda ogólnie lepiej ...
źródło
Kiedy kolor tekstu jest ciemny, w Safari i Chrome mam lepszy wynik z właściwością css text-stroke.
źródło
Dodawanie
Do twoich @ font-face czcionki naprawią pogrubiony wygląd w przeglądarce Firefox.
źródło
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.font-weight
. Rzecz w tym, że OP nie pytał ofont-weight
- pytał o antyaliasing . To poprawna odpowiedź na zupełnie inne pytanie.