Salve a tutti, ho letto che per ospitare un font sul sito e farlo visualizzare agli utenti bisogna utilizzare l'istruzione font-face sul css.
Ho provato vari how-to su internet , ma non funzionano .Il carattere non cambia .
Ho usato il font face sul file index.css , nella prima riga dopo i commenti iniziali, del tema predefinito ossia brightforest . Il file è quello giusto o devo usarlo da un altra parte?
@font-face {
font-family: 'Georgia';
src: url(/Themes/bright_forest/font/georgia.eot);
src: local('Georgia'), url('(/Themes/bright_forest/font/georgia.ttf') format('truetype');
}
Poi ovviamente avevo cambiato il carattere nel resto del css mettendo georgia.
Cosa ho sbagliato?
mmmhh non sono molto esperto di css, ma so che il font-face non è pienamente compatibile con tutti i browser, te cosa usi?
Quale esempio hai trovato e come lo hai implementato?
Ho scritto il codice che ho inserito nel post sopra , ho letto questa guida :
http://www.html.it/pag/18954/font-personalizzati-con-font-face/ (http://www.html.it/pag/18954/font-personalizzati-con-font-face/)
Io uso firefox, ovviamente vorrei che il carattere fosse visualizzato correttamente anche per gli utenti che usano altri sistemi operativi o altri browser .
C'è un altra istruzione o un altro modo per fare cio' che mi interessa?
In effetti la situazione è molto complicata , ho visualizzato il mio sito con firefox di linux ubuntu e visualizza il font verdana al posto del georgia ,l'impaginazione è tutta errata ; blocchi del portale ristretti , manca un pezzo di sfondo sulla destra , e i menuù non sono allineati correttamente....
Senza esempio pratico è difficile capire cosa hai sbagliato...
Quindi applicalo e manda link.
Il sito è questo (http://www.stregoneria.net)
il mio index.css è pubblicato qui (http://www.pastebin.com/vj0CKhYJ)
Se provate a rimpicciolire la finestra...l'impaginazione sballa e poi non legge il carattere georgia e mi mette il verdana...
Visualizzazione errata
(https://www.italiansmf.net/forum/proxy.php?request=http%3A%2F%2Fimageshack.com%2Fa%2Fimg268%2F4820%2Fyhjb.png&hash=6200da977e27aacd6e6a3bdb2bc0c8b14bc1c6cd)
Visalizzazione giusta
(https://www.italiansmf.net/forum/proxy.php?request=http%3A%2F%2Fimageshack.com%2Fa%2Fimg801%2F8458%2Fk3n.gif&hash=6b50c640cca50bf708cfaada8c9632d9f616f544)
Le linee relative al font-family sono:
Line 4: font-family: 'Georgia';
Line 36: font-family: Georgia, Verdana, Helvetica, sans-serif;
Line 267: font-family: Georgia, Verdana, Helvetica, sans-serif;
Line 290: font-family: Georgia, verdana, Helvetica, sans-serif;
Line 382: font-family: Georgia, verdana, sans-serif;
Line 387: font-family: Georgia, verdana, sans-serif;
Line 453: font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
Line 513: font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
Line 549: font-family: Georgia, Verdana, Helvetica, sans-serif;
Line 556: font-family: Georgia, Verdana, Helvetica, sans-serif;
Line 1079: font-family: Georgia, tahoma, sans-serif;
Line 1130: font-family: Georgia, tahoma, sans-serif;
Line 1192: font-family: arial, sans-serif;
Line 1497: font-family: Georgia, verdana, sans-serif;
Le linee relative al menu' a barra sono :
Linee 121
Linee 122
Le linee relative al header dei blocchi ez-portal sono :
Line 562
Line 1344
Non so se nel frattempo hai fatto qualcosa, ma a me il font sembra funzionare correttamente. Che browser stai usando?
Il motivo per cui il menù risulta un po' "storto" a basse risoluzioni è che il background gliel'hai applicato in maniera...non ortodossa direi.
Il background del menù è disegnato nell'immagine di sfondo della pagina:
http://stregoneria.net/Themes/brightforest_23/images/sfondo1.jpg
che quindi è "fissa", mentre il menù stesso è contenuto nell'elemento "wrapper" che è centrato ed ha una larghezza in percentuale (66%) e quindi varia con il variare della risoluzione dello schermo.
Hai due (forse tre) possibilità:
1) fare le cose fatte bene e mettere il background del menù come background dell'elemento "menu",
2) impostare "wrapper" ad una larghezza fissa,
3) assegnare a "wrapper" una min-width in modo che al di sotto di una certa larghezza non si riduca più
In bady, tra l'altro, stai usando una doppia immagine di background:
background: url("http://stregoneria.net/Themes/brightforest_23/images/sfondo1.jpg") no-repeat,
url("http://stregoneria.net/Themes/brightforest_23/images/sfondo2.jpg") repeat-y #E7DB79;
mi pare di ricordare che alcune versioni di IE non lo supportano (è la 8 in particolare che non mi ricordo), questo vuol dire che su qualche browser non proprio recente potrebbe non visualizarsi correttamente lo sfondo. ;)
Se uso firefox 25.01 o IE 10 o chrome ,dal portatile windows , nessun problema con il carattere.
Se uso il netbook a 9 polici che ha firefox per linux mint visualizza il carttere verdana .
Usando il cellulare htc android con browser proprietatio sempre verdana.
Non è che a font face devo aggiungere qualcosa per gli altri sistemi operativi? Non saprei cosa....
Per lo slittamento , anche impostando il wrapper ad una larghezza di 900px ....slitta uguale
#wrapper
{
width: 900px;
min-width: 900px;
font-size: 96%;
margin: 0 auto;
}
Comq il problema principale è il font-face , a cambiare tema , pasticciandolo di meno ,sono sempre in tempo !
Opera su Win e FF su opensuse, entrambi mostrano il georgia.
IE non funziona perché non hai il file eot:
http://www.stregoneria.net/Themes/bright_forest/font/georgia.eot
magari il 10 funziona anche senza un font speciale, quindi l'unica cosa che puoi fare è togliere e sperare, altrimenti devi trovare una versione eot di georgia e caricarlo nel posto giusto.
Tieni presente che la directory font del tema di default (non ricordo più per quelli personalizzati) è usata per generare le lettere del captcha, quindi tecnicamente non è il posto per i font da usare per la presentazione della pagina...anche se non ho mai capito perché è stata messa lì... :-\
ok grazie