2012-10-08 9 views
14

Quale tipo di carattere consiglierebbe (gratuito per uso commerciale) per un sito Web in stile Metro Windows 8? Sarebbe meglio se è su Google Fonts eccFont simile alla metropolitana per l'uso del sito web

+0

I caratteri sono scelti dal browser, non sul server. –

+0

Perché trovo improbabile che un font stile Metro (creato da * Microsoft *) sia disponibile su * Google * Fonts? – riwalk

+0

prova dafont.com per i download di font. –

risposta

1

Se si vuole che sia esattamente come la metropolitana è possibile utilizzare http://www.fontsquirrel.com/ e caricare un tipo di carattere.

NOTA: Assicurarsi di disporre di una licenza per il font se si utilizza fontsquirrel, come menzionato nei commenti.

Altrimenti Helvetica o Arial. Quelli sono i tipi di carattere di sicurezza Web di armadi che posso pensare.

Il nuovo font metropolitana è un tipo di carattere Sans Serif e Arial è sempre stato il tipo di carattere Sans Serif più strettamente legati a Windows.

Anche io sto usando questo font Google con un logo del carattere metropolitana e mi sento come sono abbastanza simili.

<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400' rel='stylesheet" type="text/css"> 

Controllare anche il sito Web di Microsoft. Stanno usando questa famiglia di caratteri .. font-family: segoe ui, verdana, arial, sans-serif;

http://windows.microsoft.com/en-US/windows/home

controllare anche questo post, sembra essere molto simile. https://superuser.com/questions/336031/what-font-is-used-on-windows-8-or-windows-phone-7

+1

Non è possibile caricare qualsiasi font su Font Squirrel. È necessaria una licenza per utilizzarlo e tale licenza deve consentire l'uso come un webfont. – ceejayoz

45

Il carattere utilizzato con il marchio "Metro" è Segoe UI. Sfortunatamente, come altri hanno menzionato, non è disponibile come download gratuito.

però, anche se vi capita di avere Segoe, altri utenti del vostro webapp non potrebbe. Di conseguenza, affinché possa essere visualizzato in modo coerente per gli utenti, è necessario lo standard @font-face. Ma, ahimè, a causa delle licenze, sarebbe contro la legge semplicemente ospitarli sul tuo server e font-face. L'unico modo legale per utilizzare l'interfaccia utente di Segoe è quello di utilizzare purchase a license.

ma si desidera una libera scelta, così diamo un'occhiata ad alcuni Segoe sosia.

L'interfaccia utente di Segoe è incredibilmente simile a Frutiger - così simile, infatti, che Microsoft was taken to court by Linotype over it - ma, naturalmente, anche il font non è libero.

Se si desidera utilizzare in modo specifico un carattere Google, il popolare Open Sans potrebbe essere la soluzione migliore, anche se ci sono alcune differenze evidenti tra questo e Segoe.

Si potrebbe avere più fortuna nel trovare i caratteri non tanto noti ma fortemente ispirati a quelli famosi e costosi (alcuni potrebbero chiamarli imbrogli spudorati). Due esempi sono CartoGothic Std e WeblySleek UI. Per la maggior parte degli utenti, scoprirai che le differenze tra questi tipi di carattere sono impercettibili. E sei fortunato, perché, al momento di scrivere questo, capita che tu sia libero di ospitare tu stesso questi font per fornirli tramite @font-face (Dichiarazione di non responsabilità: ti consiglio di leggere le licenze per i dettagli prima di farlo. soggetto a modifiche).

Vuoi un confronto veloce? Ecco alcune immagini, come renderizzate in Photoshop su OSX. Le dimensioni dei caratteri sono tutte di circa 10pt. E sono tutti impostati alla normalità o al peso del libro.

Come si può vedere, la più grande differenza tra i primi tre tipi di carattere e Open Sans è la minuscola g. Sono sicuro che ci sono più differenze tra le lettere maiuscole, e ti incoraggio ad esplorare quei dettagli.

Segoe UI

Segoe UI http://jmeas.com/stackoverflow/segoe.jpg

Frutiger

Segoe UI http://jmeas.com/stackoverflow/frutiger.jpg

CartoGothic STD

Cartogothic STD http://jmeas.com/stackoverflow/cartogothic.jpg

WeblySleek UI

Cartogothic STD http://so.jmeas.com/weblysleek.jpg

Aprire Sans

Open Sans http://jmeas.com/stackoverflow/open-sans.jpg

spero uno di quelli si adatta alle vostre esigenze.

+1

Anche questo sembra molto carino. Forse potresti aggiungerlo alla tua risposta: http://www.dafont.com/weblysleek-ui.font – andreas

+0

Buon suggerimento, @andreas. Un'occhiata superficiale mi ha suggerito che sarebbe stata una buona sostituzione dell'interfaccia utente di Segoe. Verificherò ulteriormente e aggiornerò la mia risposta. – jmeas

+0

L'ho testato sul mio sito Web e sembra quasi lo stesso. Ho anche provato Open Sans ma non ero completamente soddisfatto finché non ho visto quell'altro font. ;) – andreas

Problemi correlati