@ font-face anti-aliasing na windows i mac
Użyłem http://www.fontsquirrel.com / aby utworzyć zestaw @ font-face.
Działa dobrze, ale wynik w systemie windows różni się od wyniku na Macu.
W systemie windows czcionka wydaje się mieć niewłaściwy antyaliasing:
jest to wynik na Mac z FF, Chrome lub Safari (wszystkie zaktualizowane do ostatniej wersji).
jest to wynik w Windows z FF lub Chrome.
Jak widać, wynik nie jest taki sam. W systemie Windows czcionka jest grubsza i szorstka.
Jak mogę rozwiązać?
8 answers
To wygląda jak normalny brzydki sposób renderowania czcionek w WinXP. Niektórzy (IMO: błędni) ludzie nawet wolą.
Aby uzyskać antyaliasing dla czcionek biurkowych w ogóle na XP musisz go włączyć, od właściwości wyświetlania - > wygląd - > efekty - > użyj poniższej metody, aby wygładzić krawędzie czcionek ekranowych - > ClearType. Domyślnym ustawieniem "Standard" jest oldschoolowa technika "rozmazywania czcionek" Windows, która przeszkadza tylko w włączaniu przy większych rozmiarach czcionek, a następnie często sprawia, że bałagan.
IE7 + ma domyślnie włączoną opcję, aby zawsze używać antyaliasingu ClearType do renderowania czcionek w przeglądarce internetowej. Inne przeglądarki internetowe będą respektować skonfigurowaną przez użytkownika metodę renderowania czcionek. Szkoda, że tak wiele osób nadal ma to korzystne ustawienie Wyłączone, ale to nie jest naprawdę twój problem.
(jest paskudny hack, aby Chrome wykonał jakiś antyaliasing na tekście, czyli:
text-shadow: 0px 0px 1px rgba(0,0,0,0);
One co możesz zrobić, gdy " użyj następującej metody..."ustawienie jest ustawione na "Standard", aby sprawić, że czcionka uzyska jakąś formę antyaliasingu, polega na sprawdzeniu, czy dana czcionka nie ma tabeli GASP mówiącej starym rendererom TrueType o wyłączeniu antyaliasingu przy określonych rozmiarach czcionek. Możesz zmienić tabelę GASP za pomocą edytora czcionek lub za pomocą narzędzia wiersza poleceń ttfgasp.exe.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-10-30 21:34:09
Ja też byłem nękany tym na Chrome i chyba właśnie znalazłem odpowiedź!
Chrome nie podobał się domyślny fontsquirrel.com wygenerowany CSS.
@font-face {
font-family: 'HLC';
src: url('/_styles/hlc/hl-webfont.eot');
src: url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
url('/_styles/hlc/hl-webfont.woff') format('woff'),
url('/_styles/hlc/hl-webfont.ttf') format('truetype'),
url('/_styles/hlc/hl-webfont.svg#HLC') format('svg');
font-weight: normal;
font-style: normal;
}
Aby naprawić, przesunąłem linię SVG:
url('/_styles/hlc/hl-webfont.svg#HLC') format('svg')
Na początek listy. Teraz widzę czcionki anty-alias! Chyba Chrome chce być pierwszy...
/* THIS WORKS FOR ME */
@font-face {
font-family: 'HLC';
src: url('/_styles/hlc/hl-webfont.eot');
src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),
url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
url('/_styles/hlc/hl-webfont.woff') format('woff'),
url('/_styles/hlc/hl-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-27 23:08:20
Dziwię się, że nikt o tym nie wspomniał. Zastosowanie lekkiego-webkit-text-stroke robi dla mnie trick bez względu na format (rozszerzenie) czcionki, której używasz. Niektórzy polecają a-webkit-text - stroke: 1px ale jak dla mnie to za bardzo zmienia wygląd czcionki (czynią ją zbyt mocną). Ale 0,5 px sprawia, że skok jest prawie niezauważalny i włącza antyaliasing: {]}
-webkit-text-stroke: 0.5px;
Umieść go w swojej definicji css dla znacznika html i gotowe!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-30 00:04:14
Istnieje również czcionka o nazwie Vegur, która wygląda jak Myriad Pro, ale jest legalna do osadzenia na stronie internetowej. Mam nadzieję, że to pomoże!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-11-01 11:28:45
Poszperałem trochę i znalazłem włamanie, które wydaje mi się, że robi różnicę. Umieść to w CSS ze zmiennymi font:
-webkit-transform: rotate(-0.0000000001deg);
Jak również, uważam, że pełny czarny (#000000) też nie pomaga. Korzystanie z bardzo ciemnego wydawało mi się pomocne.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-06 08:47:55
To jest kod, którego używam do naprawy "problemu z renderowaniem Chrome":
@font-face {
font-family: 'fontname';
src: url('fonts/fontname.eot');
src: url('fonts/fontname.eot') format('embedded-opentype'),
url('fonts/fontname.svg') format('svg');
}
/*if mozilla*/
@-moz-document url-prefix() {
@font-face {
font-family: 'fontname';
src: url('fonts/fontname.ttf') format('truetype');
}
}
:) u mnie działa...Nareszcie!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-21 00:34:24
Zmiana ustawień w systemie Windows lub samej przeglądarce nie jest rozwiązaniem. Kiedy używasz @font-face, chcesz, aby czcionka wyglądała ładnie na każdym ekranie w każdej przeglądarce, a nie tylko w Twojej.
Sztuczka z
text-shadow: 0 0 1px rgba(255,255,255,0.1);
Lub
-webkit-transform: rotate(-0.0000000001deg);
Nie działa już w Chrome 16.0.912.63 M, Windows Vista.
Nie mogłem znaleźć sposobu, aby przezwyciężyć ten problem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-06 08:46:23
[[2]} Aktualizacja: to działa (przynajmniej dla mnie) w Chrome 15.0.874.121 m.- webkit-transform: rotate(-0.0000000001 deg);
Aktualizacja: nie działa już w Chrome 15.0.874.106 m. choć działa w IE9 i Firefox - >Zequez Nov 4 at 15: 28
IE9 i Firefox nie powinny go potrzebować, ani być przez niego kierowane, ponieważ selektor określa -webkit-.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-23 15:21:56