Carattere Web in Chrome

Question

Ho un webfont che sembra incredibile su Firefox, non tanto su Chrome. Ho provato a giocare con la proprietà text-rendering, con risultati meno che spettacolari. Il mio CSS è qualcosa di simile:

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

Modifica text-rendering non sembra di fare nulla in Firefox, quindi sto postando un solo screenshot per esso.

Risultati:

• di Firefox (anche noto come "quello che dovrebbe essere simile")

  

• Chrome - text-rendering: auto

  

• Chrome - text-rendering: optimizeLegibility

  

• Chrome - text-rendering: optimizeSpeed

  

• Chrome - text-rendering: geometricPrecision

  

Tutte le schermate di Chrome sembrano davvero pessime rispetto a quelle di Firefox. C'è qualcosa che mi manca nel CSS?

Utilizzo Windows 7, Firefox 8.0 e Chrome 15.0.

Answer 1

Non c'è davvero nulla si può fare per migliorare questa via CSS. I motori di rendering del testo sono diversi tra Firefox e Chrome e stai vedendo i risultati. Se il carattere non è ben ideato e preparato per un font web, puoi aspettarti che risultati come questo siano migliorati.

Da dove è stato acquisito il carattere?

È possibile provare a eseguirlo tramite FontSquirrel per vedere se qualcuna delle indicazioni automatiche offerte da Ethan potrebbe normalizzarsi un po '.

Alcune informazioni aggiuntive sul rendering e DiretWrite che è ciò che si vede come i grandi differenziatori .... http: //blogs.adobe.com/typblography/2010/11/microsoft-directwrite-is-coming.html

Answer 2

Questo è come lo faccio tutto mio e ha funzionato su 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; 
} 

ricevo il mio codice da fontsquirrel

Answer 3

Prova questo:

-webkit-text-stroke: .5px 

Il.5 è un tipo di arbitrario: un valore di pixel compreso tra 0 e 1 è la chiave. Ciò impone il suggerimento sub-pixel del font.

Una demo può essere visto qui: http://dabblet.com/gist/4154587

Answer 4

Non so se questo è quello che stai vedendo, ma Chrome ha un problema con l'anti-aliasing e TrueType. Come da http://www.fontspring.com/blog/smoother-web-font-rendering-chrome, è possibile invece specificare il carattere SVG prima della TrueType in font-face, per es .:

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

Il più grande svantaggio è che Safari scaricare sia lo SVG e WOFF.

Answer 5

Chrome ha annunciato in Chrome 37 che passeranno dall'interfaccia Device Graphics di Windows all'API di Microsoft DirectWrite, una tecnologia che migliora il modo in cui i font appaiono sugli schermi moderni.

La Beta è ora fuori: https://www.google.com/chrome/browser/beta.html

da Google: http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html