È possibile creare un CSS specifico per Mac OS per correggere la differenza di caratteri?

Question

Sto lavorando a un progetto con un designer e ha insistito sull'uso di caratteri specifici per i titoli e vari elementi nella pagina. Quindi stiamo utilizzando un kit di caratteri da incorporare con @ font-face.

Funziona perfettamente su PC (Firefox, IE 7 e 8, Chrome, Safari) ma su Mac OS (Safari e Firefox) i font non sono allineati verticalmente allo stesso modo. Dopo aver guardato sul Web, non ho trovato alcuna soluzione per questo tranne "ci sono sempre state differenze tra browser e piattaforme, conviverci".

So che i caratteri non sono mai stati resi esattamente uguali su tutte le piattaforme, ma questa volta non è qualcosa di simile al carattere più audace o simile. Il carattere appare come se la linea di base fosse completamente diversa tra Windows e Mac OS X. Su Mac OS, il font, con una dimensione di 16px, è 3px superiore rispetto a PC.

Quindi sto cercando una soluzione di backup: esiste un modo per creare un CSS specifico per gli utenti Mac OS? Non voglio scegliere come target solo Safari perché Safari PC è ok, e Firefox Mac non è ok.

O se si dispone di una soluzione per correggere la differenza di linea di base che non richiede un file CSS specifico, sarei felice di sentirlo.

Grazie!

Answer 1

Se l'impostazione di un'altezza di riga esplicita non risolve il problema, è possibile pubblicare diversi fogli di stile per ciascun browser utilizzando il back-end e rilevando il sistema operativo nell'applicazione (tramite l'agente utente). Puoi anche fare qualcosa in JS facendo la stessa cosa, ma ci sarà probabilmente un FOUC mentre JS carica gli stili rilevanti.

Answer 2

Ho paura che il browser/os sniffing sia la tua unica opzione. Lo stesso CSS non ha conoscenza del sistema operativo, né ho mai sentito parlare di un css hack che si rivolge specificamente ad osx.

Questo è il modo più semplice per me per rilevare OSX e aggiungere la classe OSX al corpo del documento in modo da poter sostituire in modo specifico gli stili CSS per OSX.

if(navigator.platform.match('Mac') !== null) { 
    document.body.setAttribute('class', 'OSX'); 
} 

Answer 3

C'è un modo più semplice. http://rafael.adm.br/css_browser_selector/

Rileva il browser e il sistema operativo e consente di specificare classi specifiche ad esso.

Answer 4

Se si desidera una soluzione perfetta e indolore, è necessario utilizzare i caratteri comuni oi tipi di carattere da un servizio online come la libreria di font gratuiti di Google o una delle librerie di font prepagate. Questi font sono stati progettati e testati per funzionare sul web.

Sperimentare e compresi i caratteri per il browser dell'utente per scaricare e provare per visualizzare correttamente va bene, ma non sarà perfetto e non sarà indolore. Inoltre, sii molto attento alle restrizioni della licenza: assicurati che i font che il tuo designer vuole utilizzare siano opportunamente autorizzati per l'uso sul sito web del cliente.

Se avete a che fare browser sniffing e servire più fogli di stile, a questo punto direi che il disegno è rotto e deve essere rivista. Mostra https://fonts.google.com al tuo designer e vedi se gli piace qualcuno di questi - lavorano su più piattaforme in tutti i browser moderni e alcuni sono molto chiari. EDIT: Oh, e sono liberi di usare senza preoccupazioni di licenza.