@ Problem z renderowaniem czcionek w Chrome na PC

Question

Użyłem font-squirrel do osadzenia czcionki na stronie (z wybraną aplikacją Hinting) i nie renderuje się poprawnie w przeglądarce Chrome w wersji 15.0 na PC. Czcionka jest wyświetlana, ale słabo. Jestem pewien, że ta wiewiórka oddała mi właściwy kod, więc zakładam, że w moim CSS jest konflikt. Z góry dziękuje za twoją pomoc.

Link to site

@font-face { 
    font-family: 'RockwellStd-Light'; 
    src: url('rockwellstdlight-webfont.eot'); 
    src: url('rockwellstdlight-webfont.eot?#iefix') format('embedded-opentype'), 
     url('rockwellstdlight-webfont.woff') format('woff'), 
     url('rockwellstdlight-webfont.ttf') format('truetype'), 
     url('rockwellstdlight-webfont.svg#RockwellStdLight') format('svg'); 
    font-weight: lighter; 
    font-style: normal; 

} 

h1 { 
    font-family:'RockwellStd-Light', Helvetica, Ariel; 
    font-size:34px; 
    color:#407d3b; 
    font-weight:lighter; 
    margin-left:20px; 

} 

h2 { 
    font-family:'RockwellStd-Light', Helvetica, Ariel; 
    font-size:32px; 
    color:#ece1af; 
    font-weight:lighter; 
    line-height:42px; 

} 

h3 { 
    font-family:'RockwellStd-Light', Helvetica, Ariel; 
    font-size:20px; 
    color:#FFF; 
    font-weight:lighter; 

} 

p { 
    font-family:'RockwellStd-Light', Helvetica, Ariel; 
    font-size:14px; 
    line-height:17px; 
    color:#333; 
    text-align:justify; 

} 

.criteria_table { 
    font-family:'RockwellStd-Light', Helvetica, Ariel; 
    font-size:14px; 
    color:#FFF; 

} 

Answer 1

Można określić text-shadow:

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

Przy użyciu czcionek niestandardowych, aby je uczynić lepiej w Google Chrome. Zmusza Chrome do korzystania z alternatywnej ścieżki renderowania. Należy pamiętać, że zwiększy to obciążenie procesora na komputerze użytkownika końcowego.

Answer 2

Przykro mi guyes, ale to już nie działa w Chrome 16.

podobny temat jest tutaj: @font-face anti-aliasing on windows and mac

i napisałem o tym na Forum Google Chrome tutaj, czekając na reakcje teraz : http://www.google.com/support/forum/p/Chrome/thread?tid=43f549bc2a960a12&hl=en

Answer 3

https://stackoverflow.com/a/9041280/1112665

dla @ font-face dostarczane czcionki, poprawka jest umieszczenie pliku sVG tuż poniżej .eot ale przede .woff i .ttf

Z tego:

@font-face { 
font-family: ‘MyWebFont’; 
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’), 
    url(‘webfont.woff’) format(‘woff’), 
    url(‘webfont.ttf’) format(‘truetype’), 
    url(‘webfont.svg#svgFontName’) format(‘svg’); 
} 

do tego:

@font-face { 
font-family: ‘MyWebFont’; 
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’), 
    url(‘webfont.svg#svgFontName’) format(‘svg’), 
    url(‘webfont.woff’) format(‘woff’), 
    url(‘webfont.ttf’) format(‘truetype’); 
} 

Przykłady tej poprawki można zobaczyć tutaj:

FontSpring Examples
Adtrak Examples

Answer 4

Jak hisnameisjimmy już wspomniano, rozwiązaniem jest używać czcionek SVG, które zawsze są świadczone z anti-aliasing, ale ma również pewne wady:

• czcionek SVG nie zawierają żadnych informacji sugerując, więc świadczone litery nie są tak ostre, jak mogłyby być w systemie z włączoną funkcją wygładzania czcionek.
• Ciężaru i stylu czcionek SVG nie można zmienić, więc użycie font-weight:bold; lub font-style:italic; nie daje żadnego efektu.

Jednak przynajmniej pierwszy problem można rozwiązać za pomocą czcionek SVG tylko wtedy, gdy wygładzanie czcionek jest faktycznie wyłączone. Jest fajny post at User Agent Man, w jaki sposób wykrywać kłamstwo, z którego stworzyłem mały skrypt (~ 600 bajtów), który automatycznie aktualizuje twój CSS czcionki, jeśli wygładzanie czcionki jest wyłączone.

można znaleźć my Font Smoothie script at GitHub'S GIST a wszystko co musisz zrobić, to dodać następujący wiersz w dowolnym miejscu na swojej stronie:

<script src="fontsmoothie.min.js" type="text/javascript"></script> 

Jednak trzeba również dobrze hinted czcionki zdobycia estetyzacja glifów. Na szczęście istnieje sposób dodania automatycznie generowanych podpowiedzi do czcionki ttf za pomocą ttfautohint, a następnie można użyć czcionki wiewiórki do generowania czcionek internetowych. Cały proces jest nieco skomplikowany, dlatego napisałem an article on how to create web-fonts on Pixels|Bytes, który wyjaśnia, jak dodać wskazówki do czcionki i jak korzystać z mojego skryptu Smoothie czcionek. Mam nadzieję, że to pomoże :)

PS: Jestem świadomy, że link do mojego własnego bloga nie zostanie tutaj doceniony, ale myślę, że mój post opisuje dobre rozwiązanie problemu, więc i tak go opublikowałem. Pozostaw komentarz, jeśli chcesz usunąć link, a zrobię to.