Carattere personalizzato tramite CSS

Sto imparando php, html e css ora e sto cercando di usare un carattere personalizzato sul mio sito. Ho trovato la proprietà @font-face che permette di farlo, ma non funziona. Che cosa sto facendo di sbagliato? css:

 @font-face {font-family: LazurskiCTT;src:url(../sources/fonts/ie/LazurskiCTT Regular.eot);} /*IE*/ @font-face {font-family:LazurskiCTT;src:url(../sources/fonts/LazurskiCTT Regular.Ttf);} /*Other browsers*/ #myFonts{font-family:LazurskiCTT;} 

html:

 

Lazurski

Forse è perché lo uso sul mio computer locale? Lo gestisco in FireFox.

Il modo più semplice (e migliore) per farlo funzionare è utilizzare il generatore di fontsquirrel:

http://www.fontsquirrel.com/fontface/generator

Supponendo che il percorso del tuo font sia corretto prova questo. Quota … alcuni dicono che non è necessario, ma trovo che funzioni meglio. In alcuni casi il mio CSS si rompe senza le virgolette (specialmente quando lo spazio bianco è coinvolto nel percorso).

Nota: usa questo sito per convertire il tuo TFQ in EOT perché funzioni su IE (posiziona entrambi .ttf e .eot nella stessa directory). http://ttf2eot.sebastiankippe.com/

 @font-face { font-family: "LazurskiCTT"; src:url("../sources/fonts/ie/LazurskiCTT Regular.eot"); /*IE*/ src:url("../sources/fonts/LazurskiCTT Regular.Ttf") format("truetype"); /*Non-IE*/ } 

Questo funziona per il mio sito. Spero che funzioni anche per te.

Ti manca una barra / dopo .. , potrebbe essere già.

Si noti che la maggior parte dei sistemi basati su Linux sono case sensitive: il .Ttf potrebbe non funzionare se non è scritto esattamente in questo modo.

Per una panoramica dettagliata su come impostare i caratteri personalizzati tra i browser, vedi anche questa domanda: Errore durante l’utilizzo dei caratteri personalizzati in css

Dovrebbe funzionare sulla tua macchina locale. Prova quanto segue.

Assicurati che il percorso del tuo font sia corretto.

 @font-face { font-family: CustomFont; src: url('CustomFont.otf'); } p {font-family:CustomFont, Helvetica, Arial} 

 

Text here