I caratteri caricati su Windows sembrano davvero male. Quali caratteri stai usando per rendere meglio?


27

EDIT : Il problema era che non avevo "Cleartype" attivato nelle mie impostazioni su Vista. Questa domanda potrebbe non avere molto significato se Cleartype è installato / abilitato sul sistema operativo Windows.


Sul Web è arrivato un nuovo vento tipografico, con la proprietà font-face di CSS3 in grado di caricare font diversi dal set di sistema operativo / sistema operativo. Il mio Mac rende molti perfettamente mentre il mio computer Windows non lo fa. Quale set di caratteri dovrei usare per renderlo migliore su Windows?

Questo è simile a una domanda su Stack Overflow.

E qui un esempio di sito Web che non funziona correttamente su PC con Myriad Pro: http://css-tricks.com/

NOTA: non sto parlando della differenza nell'antialiasing tra le versioni del browser (come tra IE9 e IE6).

Mi aspetto come risposta dai tuoi test, un elenco di caratteri più la dimensione (per favore usa px) che sembrano buoni, o almeno in un modo che possano essere usati per testi brevi o titoli piccoli.

Ad esempio, al momento "League Gothic, 30px" è simile al seguente:

inserisci qui la descrizione dell'immagine


Potete fornire maggiori dettagli: su quali browser non viene visualizzato correttamente? Puoi mostrare alcune schermate di esempio? Potrebbe esserci un problema di base con il rendering qui piuttosto che un problema di carattere
Pekka supporta GoFundMonica il

2
Non si tratta solo di browser, ma di sistema operativo. Windows ha un rendering di caratteri diverso rispetto a quelli di Mac. Non ho un mac con me (solo un iPod Touch al momento) e non posso mostrare la differenza, ma anche su browser ben renderizzati per l'antialiasing, face-font non è ben implementato per caratteri OS non standard. Mi chiedevo (perché ho un set limitato di caratteri), che una persona sta usando e che non sono riprodotti male sul PC.
Littlemad,

@Yi Jiang: Esattamente perché la quantità di caratteri è enorme, e non è possibile testare tutto, o avere tutto, che sto chiedendo quali sono, per esperienza di tutti, quali sono i "caratteri sicuri e dimensioni" usare. Vedo che nessuno ha pubblicato nulla e non so se qualcuno pubblicherà qualcosa (o ha provato ad analizzare il rendering dei caratteri su PC), quindi sono più triste di non avere alcun feedback.
Littlemad,

"kind of decent" è puramente soggettivo.
DA01,

Risposte:


18

Questo dovrebbe essere un commento (quindi rendere questo CW), ma penso che ci siano alcuni fraintendimenti e ipotesi errate nella domanda. Dato che ovviamente vuoi che a questa domanda venga data risposta (dopo tutto hai offerto una taglia), ecco i miei due centesimi.

Dal tuo screenshot mi sembra che hai impostato Windows per il rendering dei caratteri regolarmente (al contrario del rendering subpixel) e probabilmente il tuo browser non fa alcun antialias (potrebbe, ma poi è andato con la compressione JPG).

I seguenti esempi relativi a Windows provengono da XP Pro SP 3, quindi è abbastanza sicuro supporre che la situazione sia almeno allo stesso livello in Vista e 7.

Windows ha (in XP) opzioni per usare ClearType o no. Senza ClearType i caratteri vengono visualizzati come nello screenshot. Questa è un'immagine fortemente ingrandita dalla finestra di dialogo di Windows senza CT:

prova 1

Vedi che è un'operazione binaria: il pixel è nero o trasparente. Ora con alcuni browser moderni anche senza CT, fanno un po 'di anti-aliasing. Questo è da css-tricks.com con Windows XP e Chrome 8 e CT è OFF (come nella foto precedente):

prove 2

Vedi cosa è successo? Probabilmente l'hai già fatto, come hai affermato nella tua domanda.

NOTA: non sto parlando della differenza antialiasing che esiste tra i nuovi browser e quelli vecchi (come tra IE9 e IE6).

Ora, ClearType !

Ecco lo stesso testo esatto dalla finestra di dialogo di Windows, questa volta con CT: prove 3

Se sei interessato a ciò su cui si basa, consulta l'articolo di Wikipedia sul rendering subpixel . L'attivazione di ClearType influisce sul rendering del browser? Lo stesso "altro" testo con Windows XP e Chrome 8 e ClearType è ON: prove 4

Lo fa! E mentre ci siamo, potrei aggiungere che (almeno) IE 8 utilizza il rendering ClearType anche se è disabilitato a livello di Windows.


Confrontare il testo con antialiasing e ClearTyped al 100% non è così radicale come confrontare il testo con ClearTyped con non antialiased. È notevolmente più audace, però:

aa: prove 5CT:prove 6

Per vedere come appare senza antialias, basta guardare lo screenshot di littlemad .

E per confronto ecco lo stesso "altro" nel rendering predefinito di OS X: prove 7 ancora più audace di ClearType.


Per rispondere alla tua domanda: qualsiasi tipo di carattere . Se il tuo sistema operativo rende il font in modo diverso, potrebbe essere perché hai impostato il tuo sistema operativo in modo da renderlo così . O potrebbe essere che il tuo browser non sia in grado di antialias o ClearType.

Un'altra domanda potrebbe essere la ragione per cui alcuni caratteri vengono visualizzati correttamente e altri no - se questo è il caso (ma non vedo alcun problema sul sito che hai citato su Windows). O stai chiedendo caratteri che sembrerebbero adeguati senza alcun rendering?


Ed ecco anche la risposta alla domanda più frequente: "Sì, lo so tutto - perché ClearType ha un aspetto diverso dal rendering di OS X ?!"

Perché sono diversi. Il rendering subpixel non è una cosa leggera da implementare. ClearType è un marchio registrato di Microsoft ed è protetto con 10 brevetti (+ 1 in attesa; vedi Wikipedia ). Non possono essere più gli stessi.


Questo è un CW, quindi modificalo se sbaglio; o aggiungi dettagli se ne conosci alcuni.
Jari Keinänen,

2
Grande spiegazione koiyu, era come sospettavo, ma non potevo essere sicuro fino a quando non ha pubblicato uno screenshot
JamesHenare,

Il tuo post mi fa dubitare. Ho controllato le mie impostazioni e mi sono ricordato che durante l'installazione di OS Vista, ho ridotto al minimo tutti gli effetti per migliorare le prestazioni. E indovina cosa? Cleartype era disabilitato. Sono una persona così stupida, mi dispiace per l'incovenienza. Ora i caratteri sembrano molto meglio, sicuramente leggibili. Quindi sai che la mia domanda è più: da quale sistema operativo Cleartype non è installato su Windows?
Littlemad,

@Littlemad nessun problema :) È stato utile anche per me controllare le fonti in modo da poter fornire una sorta di risposta anziché una semplice opinione .
Jari Keinänen, il

1
@Littlemad, cleartype è stato introdotto per la prima volta in Windows XP, sebbene disattivato per impostazione predefinita. Da Windows Vista è ora attivato per impostazione predefinita. Anche in Internet Explorer 7 in poi è attivato anche se non è abilitato in tutto il sistema operativo. Fonte: en.wikipedia.org/wiki/ClearType
JamesHenare,

2

Se il problema è uguale alla domanda StackOverflow a cui fai riferimento, la risposta non è la stessa ?

Questo è un problema di suggerimento .

Quando generi il tuo kit font-face (come in FontSquirrel), devi specificare Suggerimenti sulle opzioni Esperto.

Scegli Esperto e in Rendering, seleziona:

Applica suggerimento: migliora il rendering di Win.


1
No, non è lo stesso, i suggerimenti non risolvono il problema. Sto già utilizzando la soluzione pubblicata sul Web sul Font-Face utilizzato da Fontsquirell. Quello che sto cercando è: anche se non viene riprodotto bene alcuni caratteri, quale sembra abbastanza decente da usare sul pc? e su quale dimensione del carattere? Sto cercando un elenco di caratteri sicuri a dimensioni sicure. Una sorta di riferimento alle "migliori pratiche".
Littlemad,

È consigliabile non utilizzare QUALSIASI font Web incorporato per le dimensioni del testo. Non sono ottimizzati per questo. Lasciali per titoli e intestazioni.
DA01,

1
@ DA01: sono un web designer, voglio progettare e usare una buona tipografia, non posso semplicemente ignorare i caratteri, voglio scoprire quali sono accettabili da poter usare.
Littlemad,

@Littlemad Sono anche un web designer che vuole progettare e utilizzare una buona tipografia. So che l'incorporamento di font-face, almeno per ora, utilizza principalmente caratteri tipografici non ottimizzati per le piccole dimensioni del testo sugli schermi. Spesso mancano di suggerimenti e le loro metriche possono variare in modo immensamente devastante se la faccia incorporata non è disponibile per un determinato utente. Utilizzando font di sistema che sono ottimizzati per le dimensioni del testo sugli schermi si utilizzano buona tipografia.
DA01,

1
@ DAO1: Sì, non sono neanche un grande fan di quel modello, ma stavo cercando di sottolineare che si tratta di caratteri buoni contro cattivi, non che i caratteri incorporati siano intrinsecamente cattivi.
Russell Leggett,

1

ttfautohint può essere usato per ricostruire il bytecode di suggerimento del font; le impostazioni predefinite (compatibili con GDI) dovrebbero aiutare Windows a rendere il carattere.


0

Questo non ha nulla a che fare con il browser, ma con Windows stesso.

* I sistemi nix (unix / linux e OSX sono inclusi in questo perché ha una base Unix) hanno la possibilità di controllare con precisione la modalità di visualizzazione del testo e sono generalmente impostati sul rendering subpixel (che ha una spiegazione molto più tecnica di quella che ti darò, ma essenzialmente usa i subpixel (le parti rossa, verde e blu dei pixel dello schermo) per rendere il testo) dove Windows usa cleartype, che è il suo tipo di rendering che sono un po ' sfocato sulla meccanica.

Praticamente è solo che Windows non subpixel il rendering, non sono i caratteri o i file, ma il sistema operativo che visualizza quei caratteri e file.


Grazie per la spiegazione, ma so che il problema è Windows, ma chiedo di più: che tipo di caratteri hai testato o utilizzato sul tuo sito Web / client-sito Web che stai utilizzando e continui a sembrare "abbastanza" decente su Windows?
Littlemad,

In realtà, varia da browser a browser. Firefox e IE renderanno lo stesso carattere in modo diverso, se non altro perché uno utilizza EOT e l'altro utilizza OTF / TTF / WOFF. E ClearType utilizza anche il rendering subpixel. Molte persone preferiscono semplicemente l'antialiasing dei caratteri di OS X rispetto alle opzioni di Windows.
Calvin Huang

@Littlemad cosa intendi con "abbastanza decente", voglio dire, mi sono appena arreso al fatto che non rende bene. Ecco per Windows 8.
dkuntz2

@Calvin Huang: sì, conosco la differenza di rendering del browser, ma non è il problema principale. È relativo al sistema operativo. Il browser di oggi rende decentemente l'aliasing dei caratteri. Windows ancora no. @DKuntz: cosa intendi dicendo "Windows 8"? Vedo molte persone che usano in un sito Web importante il font-face, ed è davvero brutto vedere che un bravo designer lo fa. Quindi sto cercando una soluzione malvagia minore, ancora mal resa, ma almeno abbastanza decente da non sembrare un tipo di testo Commodore 16. Altrimenti devo usare una soluzione js per controllare il tuo browser e passare uno stile css se sei mac o pc
Littlemad

4
Questa spiegazione è errata o almeno incompleta. Windows fa l'antialiasing subpixel: questo è Cleartype ed è presente da XP. Rispetto a OS X Windows non esegue il rendering dei caratteri in modo errato , lo fa in modo diverso : la differenza è nella migliore delle ipotesi soggettiva e troverai persone che preferiscono il rendering dei caratteri su Windows. Inoltre, i browser su Windows utilizzano anche diversi metodi di rendering: ad esempio, tutti i caratteri di grandi dimensioni su Firefox fino a 3.6 su Windows visualizzeranno jaggies visibili. Ciò è stato risolto nella versione 4 passando all'API DirectWrite.
Yi Jiang,


0

Usa il codice qui sotto in CSS

-webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

Potrebbe aiutarti


2
Per favore, puoi mostrare meglio un pezzo di codice per mostrare ai lettori cosa intendi?
Mensch
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.