2011-12-15 27 views
8

Mam webfont, który wygląda niesamowicie w Firefoksie, a nie w Chrome. Próbowałem grać z właściwością text-rendering, uzyskując mniej spektakularne wyniki. Moje CSS jest coś takiego:Czcionka internetowa w przeglądarce Chrome

@font-face { 
    font-family: 'TextFont'; 
    src: url('[my font file url]') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
body { 
    font-family: TextFont, Tahoma, Geneva, sans-serif; 
    text-rendering: auto; 
} 

Zmiana text-rendering wydaje się nie robić nic w Firefoksie, więc jestem delegowania jeden zrzut ekranu dla niego.

Wyniki:

  • Firefox (a.k.a. "co to powinno wyglądać")

    enter image description here

  • Chrome - text-rendering: auto

    enter image description here

  • chromu - text-rendering: optimizeLegibility

    enter image description here

  • chromu - text-rendering: optimizeSpeed

    enter image description here

  • chromu - text-rendering: geometricPrecision

    enter image description here

Wszystkie zrzuty ekranu z Chrome wyglądają naprawdę źle w porównaniu do Firefoksa. Czy jest coś, czego mi brakuje w CSS?

Używam systemu Windows 7, Firefox 8.0 i Chrome 15,0.

+1

Chrome jest straszna na renderowanie czcionek w systemie Windows, i jest to mniej lub bardziej unfixable problem (chyba że Google zdecyduje używać ClearType). Dlatego powinieneś przełączyć się na Linuksa;) – Blender

+0

Nie mam problemu z przejściem na Linuksa, ale muszę go dobrze wyglądać wszędzie. – cambraca

+0

Jestem sarkastycznie nastawiony do Linuksa, ale nigdy nie miałem szczęścia z niestandardowymi czcionkami w Chrome. – Blender

Odpowiedz

1

Tam naprawdę nie ma niczego można zrobić, aby poprawić ten poprzez CSS. Silniki renderowania tekstu różnią się między Firefoksem a Chrome i widać wyniki. Jeśli czcionka nie jest odpowiednio napomknięta i przygotowana na czcionkę internetową, możesz spodziewać się poprawy takich wyników.

Skąd pochodzi czcionka?

Możesz spróbować uruchomić go przez FontSquirrel, aby sprawdzić, czy któreś z automatycznych wskazówek, które oferuje Ethan, może trochę to znormalizować.

Kilka dodatkowych informacji na temat renderingu i DiretWrite, które widzisz jako duże wyróżniki .... http: //blogs.adobe.com/typblography/2010/11/microsoft-directwrite-is-coming.html

+0

Mam nadzieję, że pewnego dnia chrome to naprawi. Śledź błąd tutaj: https://code.google.com/p/chromium/issues/detail?id=137692 – djsadinoff

1

ten sposób zrobić wszystko z kopalni i to działało na IE, Firefox, Chrome

@font-face { 
    font-family: 'NeutraTextBold'; 
    src: url('../fonts/neutra_text_bold-webfont.eot'); 
    src: url('../fonts/neutra_text_bold-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/neutra_text_bold-webfont.woff') format('woff'), 
    url('../fonts/neutra_text_bold-webfont.ttf') format('truetype'), 
    url('../fonts/neutra_text_bold-webfont.svg#NeutraTextBold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 
body{ 
font: 12px 'NeutraTextBold', sans-serif; 
color: #FFF; 
} 

dostanę kod z fontsquirrel

+0

Nie wiem, dlaczego mam do tego pretekst, tylko próbuję pomóc z tym, co wydaje mi się właściwą odpowiedzią. Jeśli komuś zależy na dzieleniu się ze mną informacjami na temat tego, dlaczego jest on odrzucany, to wiem, że w przyszłości będę mógł to wykorzystać. – Andres

2

Spróbuj tego:

-webkit-text-stroke: .5px 

The.5 to rodzaj arbitralności - kluczem jest wartość niektórych pikseli od 0 do 1. Wymusza to podpikselowe podpowiedzianie czcionki.

Demo można zobaczyć tutaj: http://dabblet.com/gist/4154587

3

Nie wiem, czy to jest to, co widzisz, ale Chrome ma problemu z anty-aliasing i TrueType. Zgodnie http://www.fontspring.com/blog/smoother-web-font-rendering-chrome można określić czcionkę zamiast SVG przed TrueType w swojej font-face, np .:

@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'); 
} 

Największym minusem jest to, że Safari pobierze zarówno SVG i WOFF.

+0

ostrożnie z kopią/wklejeniem powyższego - znaki cudzysłowu to "pojedyncze cytaty", a nie apostrofy. (CSS ich nie rozumie) – kolosy

+1

Yikes! Naprawiłem apostrofy. Dzięki za notatkę. – Nils

Powiązane problemy