problema con @font-face

**mickey2011** · 04-06-2014, 16:13

Ciao, non so se qualcun altro ha lo stesso problema...

Sono alle prese con un menù orizzontale in HTML 5 e CSS3. Voglio usare per questo menù, dei caratteri diversi con @font-face ma detti caratteri purtroppo non vengono visualizzati nei browsers, tranne in IE 9, IE 10 e IE 11 . Sto utilizzando Dreamweaver CS5.5 su Windows 7 che gira su parallels. Poi ho provato sui browsers mac sempre dall' anteprima di dreamweaver e funziona su Chrome e Safari, ma non Firefox (vers. 29)

La regola @font-face l'ho messa all'inizio dei foglio css esterno e l'ho richiamata da:

nav ul li a:link, nav ul li a:visited (selettore di tag)

vi posto il css esterno e il file HTML5 :

@font-face {
font-family: forgottenfuturist;
src: url(../fonts/forgottenfuturist.ttf);
src: url(../fonts/forgottenfuturist.eot);
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
color: #FC0;
background-color: #060606;
background-image: url(../immagini/body.jpg);
background-repeat: no-repeat;
background-position: center top;
}
p {
margin: 0px;
padding: 0px;
}
#container {
margin: auto;
width: 980px;
position: relative;
}
header {
background-image: url(../immagini/header.jpg);
background-repeat: no-repeat;
position: relative;
height: 200px;
}
nav {
background-image: url(../immagini/navigation.jpg);
position: relative;
height: 25px;
}
nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
nav ul li {
float: left;
}
nav ul li a:link, nav ul li a:visited {
font-family: forgottenfuturist;
color: #FFF;
text-decoration: none;
display: block;
height: 20px;
padding-right: 5px;
padding-left: 5px;
padding-top: 5px;
font-size: 18px;
}
nav ul li a:hover, nav ul li a.current {
color: #FF3;
}
section {
background-image: url(../immagini/content.jpg);
background-repeat: no-repeat;
position: relative;
height: 425px;
}
footer {
background-image: url(../immagini/footer.jpg);
position: relative;
height: 100px;
}

e il file HTML5:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
<header></header>
<nav>
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Monica</a></li>
<li><a href="#">Biografia</a></li>
<li><a href="#">Discografia</a></li>
<li><a href="#">Eventi</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">E-Mail</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
<section></section>
<footer></footer>
</div>
</body>
</html>

Aspetto risposte... thanks

**Prill** · 04-06-2014, 19:02

cambia l'ordine di inserimento, prima il richiamo dell'eot e poi il ttf.

Potresti usare anche il formato woff, e inserire per ie6-ie8 un fix.
Il codice più completo, basato su quello proposto da fontsquirrel (cui ho tolto il formato svg), sarebbe questo:

codice:

@font-face{
font-family: 'forgottenfuturist';
    src: url('../fonts/forgottenfuturist.eot');
    src: url('../fonts/forgottenfuturist.eot?#iefix') format('embedded-opentype'),
         url('../fonts/forgottenfuturist.woff') format('woff'),
         url('../fonts/forgottenfuturist.ttf') format('truetype');

**mickey2011** · 05-06-2014, 11:45

Ciao, ho provato ed effettivamente così come hai detto tu funziona su tutti i browsers, tranne però che su tutti gli IE dal 6-11. Provo ad inserire il fix poi vediamo che succede..

Ma una cosa che non capisco ancora è se nei percorsi di dove va a prelevare i files del font, bisogna mettere gli apici oppure no... e se è proprio necessario mettere la parola chiave format alla fine di ogni riga src, tu come fai?

Perchè è strano che non funzioni come avevo scritto, perchè l'ho copiato pari pari dalle specifiche del w3schools.com ... http://www.w3schools.com/css/css3_fonts.asp

**Prill** · 05-06-2014, 12:22

il codice di fontsquirrel è quello che offre la massima compatibilità crossbrowser, il più completo, lo uso e non ho alcun problema.
Explorer, vado a memoria, mi pare abbia bisogno di trovare immediatamente il file col suo formato, sennò può arrestarsi al primo richiamo.
Il w3c usa nel suo esempio il woff, che dovrebbe essere supportato da tutti i browser più recenti, ma dà solo indicazioni di massima

**mickey2011** · 05-06-2014, 12:26

Originariamente inviata da Prill

cambia l'ordine di inserimento, prima il richiamo dell'eot e poi il ttf.

Potresti usare anche il formato woff, e inserire per ie6-ie8 un fix.
Il codice più completo, basato su quello proposto da fontsquirrel (cui ho tolto il formato svg), sarebbe questo:

codice:

@font-face{
font-family: 'forgottenfuturist';
    src: url('../fonts/forgottenfuturist.eot');
    src: url('../fonts/forgottenfuturist.eot?#iefix') format('embedded-opentype'),
          url('../fonts/forgottenfuturist.woff') format('woff'),
          url('../fonts/forgottenfuturist.ttf') format('truetype');

Si funziona tutto, l'unica cosa è il fix, che non va..anzi, come prima, non viene nemmeno formattato il menù.. ti risulta? Forse perchè è scritto in HTML5..

Lo stesso identico risultato lo dà anche così, senza apici nel percorso:

@font-face {
font-family: forgottenfuturist;
src: url(../fonts/forgottenfuturist.eot);
src: url(../fonts/forgottenfuturist.eot?#iefix) format(embedded-opentype);
src: url(../fonts/forgottenfuturist.woff);
src: url(../fonts/forgottenfuturist.ttf);
}

**Prill** · 05-06-2014, 13:53

prova usando un percorso assoluto ( url('http://www.miodominioeccetera') )

Discussione: problema con @font-face

Strumenti discussione

Ricerca discussione

Visualizza

problema con @font-face

Tag per questa discussione

Permessi di invio