Perché il rendering di Helvetica Neue non è corretto?

Ho installato alcune nuove varianti di Helvetica l'altro giorno e da allora Helvetica Neue non sta eseguendo il rendering come dovrebbe (in Chrome o Firefox).

Ho provato a eliminare tutti i caratteri Helvetica e installarli di nuovo, ma non vengono ancora visualizzati correttamente.

Ecco come appare:

Alcune lettere sembrano essere più alte di altre?

Il carattere dovrebbe essere: normale 14px / 1.4 "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;

Presumo che tu stia eseguendo Windows, poiché gli utenti Mac non hanno bisogno di installare Helvetica Neue.

Questo tipo di carattere non esiste normalmente su Windows e viene sostituito da Arial. L'installazione di qualsiasi sapore di Helvetica è piuttosto complicata, poiché è piuttosto comunemente usata nei fogli di stile CSS, quindi può essere raccolta dal browser anche nei casi in cui Arial è migliore, per rovinare il rendering dei caratteri nel browser.

Esistono diverse implementazioni / versioni del carattere Helvetica Neue. Alcuni eccellono per caratteri di grandi dimensioni ma danno scarsi risultati per dimensioni normali. Ho sentito che questo dà buoni risultati, ma non l'ho usato personalmente.

Chrome ti consente di fornire le tue modifiche CSS personalizzate che sovrascrivono il CSS del sito web. Per trovare il file CSS personalizzato, chiudi Chrome e vai alla cartella:

%AppData%\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

e apri il file Custom.cssnel tuo editor di testo preferito.

Per usare Arial invece di Helvetica, incolla le seguenti righe:

@font-face { font-family: 'helvetica neue'; src: local('Arial'); }
@font-face { font-family: 'helvetica neue'; font-weight:bold; src: local('Arial'); }
@font-face { font-family: 'helvetica'; src: local('Arial'); }
@font-face { font-family: 'helvetica'; font-weight:bold; src: local('Arial'); }
@font-face { font-family: 'HelveticaNeue-Light'; src: local('Arial'); }
@font-face { font-family: 'Helvetica Neue Light'; src: local('Arial'); }

Per forzare l'utilizzo di Arial anziché Helvetica, puoi anche utilizzare l'estensione Cambia stile famiglia caratteri .

MODIFICARE

È stato notato che il supporto del foglio di stile dell'utente (Custom.css) è stato rimosso da Chrome da novembre 2013 , il che spiega perché la solita soluzione non funziona più.

Le opzioni rimanenti come le vedo sono:

1. Utilizzare l'estensione Cambia stile famiglia caratteri.
2. Elimina totalmente Helvetica da Windows in modo da forzare Chrome a utilizzare Arial
3. Passa a un altro browser.

Per eliminare completamente Helvetica, procedi come segue:

1. Vai su Start> Pannello di controllo> Font, seleziona i font, quindi dal menu File fai clic su Elimina ( sorgente ).
2. Elimina il file della cache dei caratteri C:\Users\[username]\AppData\Local\GDIPFONTCACHEV1.DATe riavvia.
3. Solo se necessario, cercare "helvetica" nel registro ed eliminare (con molta attenzione), quindi riavviare.

Quindi ho avuto questo problema oggi e mi sono imbattuto nella risposta a una domanda simile su quora. Questo mi ha risolto più velocemente:

1. Installa l'estensione Force Custom Fonts
2. Vai alle impostazioni dell'estensione in chrome: // extensions
3. Accanto al menu Caratteri sostitutivi, fai clic sull'icona + per aggiungere un carattere sostitutivo.
4. Seleziona Helvetica Neue usando il menu a discesa nel primo riquadro e Arial nel secondo menu a discesa accanto ad esso.
5. Salva le tue preferenze, aggiorna tutte le pagine che hanno avuto il problema, guadagna!