font-face su smf

Aperto da Stramonium, Venerdì - 06 Dicembre 2013 - 21:02

0 Utenti e 1 Visitatore stanno visualizzando questa discussione.

Stramonium

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?

Darknico

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?
Non supporto privatamente, non risponderei e ci rimarreste male....

Stramonium

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/

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....



emanuele

Senza esempio pratico è difficile capire cosa hai sbagliato...
Quindi applicalo e manda link.

Stramonium

#4
Il sito è questo
il mio index.css è pubblicato qui

Se provate a rimpicciolire la finestra...l'impaginazione sballa e poi non legge il carattere georgia e mi mette il verdana...
Visualizzazione errata

Visalizzazione giusta


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

emanuele

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. ;)

Stramonium

#6
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 !

emanuele

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ì... :-\

Stramonium


Discussioni simili (3)