problema con visualizzazione font sito

[iest]

buonasera,
sto realizzando un sito e al momento sto buttando solo la pagina di costruzione. Il link è www.stefanosoave.com il mio problema è che la visualizzazione cambia a seconda del browser utilizzato e addirittura diventi inguardabie nel caso si usi explorer. Ho seguito tutte le guide del caso sull'uso di ttf e eot e credo di averli utilizzati in maniera corretta. Al di là di questo, il font viene utilizzato in maniera differente dal ttf originale. Avete qualche idea? sto impazzendo!

grazie mille a tutti!

[psycho54h]

Innanzi tutto al div footer devi assegnare la regola width:100%;
Il div header non ha l'altezza...

Insomma, ci sono tante cosette che non vanno.

E poi usi una classe di caratteri che non è contemplata in IE... usa dei jpg

[iest]

uhm, quindi anche se carico i caratteri nel formato odt non risolvo nulla?

[psycho54h]

Allora, te lo spiego, sembrerà difficile ma in realtà è una sciocchezza...

Con @font-face è possibile, è l'unica regola che al momento garantisce il funzionamento con tutti i browser.

Il problema però è sempre Internet Explorer che non riconosce il set di caratteri TTF ma solo quelli EOT.

Per cui possiamo convertire il file TTF in EOT.

Ti serve un piccolo e semplicissimo tool, che puoi scaricare da qui

All'interno c'è un file .exe (è sicuro, l'ho scansionato io personalmente con Avira 10.0.0.567 aggiornato il 31/7/2010)

1) Estrai il file in C:\

2) Prendi il font TTF dalla tua cartella di Windows e copia anch'esso in C:\

3) Esegui il prompt dei comandi e digita "cd\" (senza le virgolette) in modo da ritrovarti su C:\ appunto.

4) Digita ttf2eot.exe nomefile.ttf nomefile.eot


Vedrai che in C:\ ti è apparso il nuovo file, a questo punto puoi chiudere il promt e spostare il nuovo file nella cartella dove risiede il file CSS del sito.
Ovviamente, oltre al file EOT, devi copiare anche il file TTF per farlo leggere da altri browser.

Quindi nel CSS dovrai scrivere una cosa del genere:

@font-face {
   font-family: 'nome_font';
   src: url(nome_font.eot);
   src: local('nome_font'), url('nome_font.ttf') format('truetype');
}
body {
  font-family: "nome_font", sans-serif
}

Spero di essere stato chiaro.

[iest]

grazie mille per lo sbattimento!
il problmea è che il mio css è questo

@font-face {
font-family: swissci;
src: url(font/swissci.eot); /* EOT file for IE */
}
@font-face {
font-family: swissci;
src: url(font/swissci.ttf); /* ttf */
}
@font-face {
font-family: swisscbi;
src: url(font/swisscbi.eot); /* EOT file for IE */
}
@font-face {
font-family: swisscbi;
src: url(font/swisscbi.ttf); /* ttf */
}
@font-face {
font-family: swisscb;
src: url(font/swisscb.eot); /* EOT file for IE */
}
@font-face {
font-family: swisscb;
src: url(font/swisscb.ttf); /* ttf */
}
@font-face {
font-family: swissc;
src: url(font/swissc.eot); /* EOT file for IE */
}
@font-face {
font-family: swissc;
src: url(font/swissc.ttf); /* ttf */
}


ed ho appunto fatto l'operazione da te indicata, ma ie se ne sbatte e gli altri browser come se non bastasse visualizzano i caratteri in maniera leggermente diversa.... non si capisce!

[psycho54h]

Beh, allora è un font che IE non prende in considerazione.

È importante sapere che, sì, il font-face è l'unico modo per permettere al browser di interpretare correttamente i font personalizzati, ma non è garantito.

Purtroppo non si capisce ancora che IE, nonostante tutte le sue numerosi versioni, è un browser obsoleto da anni. Fortunatamente Firefox lo ha superato, la gente si sta svegliando, grazie anche all'aumento di gente più competente in materia informatica.

La Microsoft non si rende conto della difficoltà che dà a noi sviluppatori mettendo in piazza un browser che interpreta HTML e CSS a modo suo, completamente diverso da tutti quelli del mercato, mentre tutti gli altri browser, che siano Safari, Opera, Firefox, Chrome, rispettano tutto a dovere quelle che sono le regole stabilite dal CSS, per non parlare del Javascript.... IE fra un po' non sa nemmeno che cos'è.

Consiglio mio personale: per IE, OLTRE al CSS di base, crea e importa un CSS apposito in cui inserire delle regole fatte apposta per IE, per esempio io ti consiglierei di usare un Font simile, ma diverso, e che venga preso in considerazione.

Buon lavoro

[iest]

allora la conclusione è la mia... ie è una merda! mi sta facendo impazzire, considerando che il cliente si è fissato con quei caratteri... adesso uso png ovunque posso poi vedrò di trovare delle soluzioni...
grazie mille per lo sbattimento!!

buonaserata

[psycho54h]

Nessuno sbattimento. E poi, aiutando altri, affilo anche la mia stessa conoscenza.
A volte mi capita di imbattermi in quesiti che non ho mai avuto modo di trattare, quindi lo faccio volentieri.