Quindi ecco uno screenshot di come la povera "Helvetica Neue" sta riproducendo per me sul mio PC Windows 7, Chrome Version 46.0.2490.86, una semplice pagina HTML di file, nota l'URL della barra di posizione nell'immagine:
Ed ecco l'intero file HTML:
<h4 style="font-family: 'Helvetica Neue';">Helvetica Neue:</h4>
<div style="width: 500px;color:#000;font-family: 'Helvetica Neue';">
Lorem ipsum dolor sit amet, ius at esse nonumy similique,
ea quo erat mollis. Quo mucius legendos appellantur et. Eum cetero verterem cu.
Ex mei stet dolorum, mei perpetua disputando in. Mei affert eruditi consetetur et,
has in sumo fugit scaevola. Te eros illud veniam quo, minimum antiopam eu mei.
</div>
<br />
<h4 style="font-family: Helvetica">Helvetica</h4>
<div style="width: 500px;color:#000;font-family: Helvetica">
Lorem ipsum dolor sit amet, ius at esse nonumy similique,
ea quo erat mollis. Quo mucius legendos appellantur et. Eum cetero verterem cu.
Ex mei stet dolorum, mei perpetua disputando in. Mei affert eruditi consetetur et,
has in sumo fugit scaevola. Te eros illud veniam quo, minimum antiopam eu mei.
</div>
<h4 style="font-family: NotAFont">NotAFont</h4>
<div style="width: 500px;color:#000;font-family: NotAFont">
Lorem ipsum dolor sit amet, ius at esse nonumy similique,
ea quo erat mollis. Quo mucius legendos appellantur et. Eum cetero verterem cu.
Ex mei stet dolorum, mei perpetua disputando in. Mei affert eruditi consetetur et,
has in sumo fugit scaevola. Te eros illud veniam quo, minimum antiopam eu mei.
</div>
Non ho installato "Helvetica Neue" sul mio computer con Windows 7 in C: \ Windows \ Fonts:
Utilizzando Font Expert per approfondire, poiché c: \ Windows \ Fonts non mostra sempre tutti i font installati, non è ancora installato il font "Helvetica Neue":
Helvetica Neue non mostra sotto chrome: // settings / fonts:
La famiglia di caratteri renderizzata è effettivamente "Helvetica Neue" in base agli Strumenti per sviluppatori di Chrome:
Potete vedere che Helvetica rende bene, senza sorprese, ed ecco la scheda Computed di Chrome per Helvetica:
Qui puoi vedere le mie impostazioni di Chrome con il valore predefinito "Times New Roman" se il font non esiste e non ci sono altri caratteri nella famiglia di font CSS:
Qui vediamo che Helvetica Neue rende bene su El Capitan Mac Safari:
Ecco lo stesso problema utilizzando una cronologia, impostazioni, segnalibri, ecc. Completamente puliti con " Nuova sessione di Chrome ":
E puoi vedere nei nuovi strumenti di sviluppo della sessione di Chrome che il font calcolato per "Helvetica Neue" è ancora Helvetica Neue:
Ecco Firefox sulla mia macchina, dice che il font calcolato per "Helvetica Neue" è Helvetica Neue anche se almeno il font è reso chiaro e leggibile e, non sorprendentemente, è lo stesso font di "NotAFont", ovvero la colonna Calcolata di Gli strumenti per sviluppatori di Firefox non indicano il tipo di carattere utilizzato, ad esempio gli strumenti per sviluppatori di Chrome:
Il mio DPI è 96, la risoluzione dello schermo è 1920 x 1080.
Quindi è provato che font-face non è installato nella directory Windows / Fonts sulla mia macchina e ha anche dimostrato che il font non mi viene consegnato da un server sotto forma di .woff, .ttf, .eot, o .svg.
Soluzioni che ho provato:
1) Aggiungendo quanto segue a C: \ Users \ YOURUSERNAME \ AppData \ Local \ Google \ Chrome \ Dati utente \ Default \ User StyleSheets \ Custom.css:
@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 Neue'; src: local('Arial'); }
@font-face { font-family: 'Helvetica Neue'; font-weight:bold; src: local('Arial'); }
Riferimenti alla prima soluzione che ho tentato https://productforums.google.com/forum/#!topic/chrome/J4dqHZD3dcs https://www.youtube.com/watch?v=fjk1dAR0Z5w
2) Aggiungendo quanto segue alla mia pagina test.html basata sul mio file che sto usando in questa domanda:
<style>
html, body {
text-rendering: optimizeSpeed !important;
}
</style>
Riferimento per la soluzione 2) https://productforums.google.com/forum/#!topic/chrome/J4dqHZD3dcs
Un suggerimento interessante nei commenti di questo articolo: http://www.hanselman.com/blog/InstallingHelveticaNeueFontsWithGoogleChromeOnWindowsConsideredHarmful.aspx
È perché usi Helvetica Neue che è pensata per la stampa non per il web display. Vai a comprarti un font Helvetica che in realtà è pensato per il web - Neue Haas Grotesk. Questo è Helvetica fatto bene per il web;)
È vero che "Helvetica Neue" è pensata per la stampa? Se è così, perché è così prevalente nel web design?
Com'è possibile che la scheda Calcolatrice strumenti sviluppatore di Chrome indichi che il font calcolato è "Helvetica Neue"?
Poiché Chrome sta trovando "Helvetica Neue" da qualche parte, perché è così mal presentato?
chrome://settings/fonts?