Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

Zdravím,

dělám web a hodil by se mi tam speciální font. Podle návodu na jak psát web jsem stáhnul program který převede fonty do formátu .eot, nastavil jsem snad stejně font-face a u všech prvků u kterých jsem ten font chtěl nastavil font family. Ovšem u nikoho se to tímto fontem nevykreslí. Odkazy na font jsou správné, validátor css (což jsem čekal) neodhalil žádné chyby. Nevíte co s tím?

Za všechny rady předem děkuji.

Obrázek jak to má vypadat jsem přiložil jako přílohu.

Zde jsem nahrál dotyčný web:
http://gracik.maweb.eu/

Návod na jak psát web:
http://www.jakpsatweb.cz/…ft-font.html

a css:

@charset "utf-8";

@font-face {
  font-family: Motorwerk;
  font-style:  normal;
  font-weight: normal;
  src: url("http://gracik.maweb.eu/fonts/MOTORWE0.eot");
}
@font-face {
  font-family: "Gunny Handwriting";
  font-style:  normal;
  font-weight: normal;
  src: url("http://gracik.maweb.eu/fonts/GUNNYHA0.eot");
}

body{
        background: #2d2d2d;
}

#header{
        width: 95%;
        text-align: center;
}

#menu{
        position: fixed;
        top: 200px;
        left: 10%;
        width: 280px;
        height: 100%;
        padding: 20px;
        padding-top: 70px;
}

#menu ul{
        list-style: none;
        text-align: right;
        position: relative;
        left: -20px;
}

#menu ul ul {
        display: none;
}

#menu ul li:hover > ul
{
    display: block;
}

#menu ul.top li a{
        font-family: "Gunny Handwriting", Verdana, Geneva, sans-serif;
        font-size: 42px;
        color: #ddd;
        text-decoration: none;
        font-weight: bold;
        padding-right: 20px;
}

#menu ul.top li a:hover{
        font-weight: normal;
}

#menu ul.sub{
        text-align: left;
        margin-left: 20%;
        width: 70%;
        padding: 10px;
        border-top: 2px dotted white;
        border-bottom: 2px dotted white;
}

#menu ul.sub li a{
        font-family: "Gunny Handwriting", Verdana, Geneva, sans-serif;
        font-size: 32px;
        color: #ddd;
        text-decoration: none;
        font-weight: bold;
}

#menu ul.sub li a:hover{
        font-weight: normal;
}

#main{
        margin-left: 10%;
        width: 80%;
}
#content{
        margin-left: 280px;
        padding-left: 20px;

        background: url(image/line.jpg);
        background-position: left;
        background-repeat: repeat-y;
}

h2{
        color: #ddd;
        font-family: Motorwerk, Verdana, Geneva, sans-serif;
        font-size: 46px;
}

span{
        color: white;
        font-family: Motorwerk, Verdana, Geneva, sans-serif;
        font-size: 28px;
}

p{
        color: #ddd;
        font-family: "Gunny Handwriting", Verdana, Geneva, sans-serif;
        font-size: 38px;
        max-width: 800px;
}

div.article_else{
        padding-top: 40px;
        padding-left: 0px;
        padding-right: 100px;
        width: 100%;
        color: #ddd;
        font-family: "Gunny Handwriting", Verdana, Geneva, sans-serif;
        font-size: 28px;
        background: url("image/article_else.png");
        background-repeat:no-repeat;
        background-position:right bottom;
}

div.article_event{
        padding-top: 40px;
        padding-left: 0px;
        padding-right: 100px;
        width: 100%;
        color: #ddd;
        font-family: "Gunny Handwriting", Verdana, Geneva, sans-serif;
        font-size: 28px;
        background: url("image/article_event.png");
        background-repeat:no-repeat;
        background-position:right bottom;
}

div.article_off{
        padding-top: 40px;
        padding-left: 0px;
        padding-right: 100px;
        width: 100%;
        color: #ddd;
        font-family: "Gunny Handwriting", Verdana, Geneva, sans-serif;
        font-size: 28px;
        background: url("image/article_off.png");
        background-repeat:no-repeat;
        background-position:right bottom;
}

div.article_update{
        padding-top: 40px;
        padding-left: 0px;
        padding-right: 100px;
        width: 100%;
        color: #ddd;
        font-family: "Gunny Handwriting", Verdana, Geneva, sans-serif;
        font-size: 28px;
        background: url("image/article_update.png");
        background-repeat:no-repeat;
        background-position:right bottom;
}
Odpovědět 16.1.2013 20:58
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

Máte teda někdo nějaký nápad?

Nahoru Odpovědět 17.1.2013 10:47
Creating websites is awesome till you see the result in another browser ...
Avatar
Marty
Neregistrovaný
Avatar
Odpovídá na Jiří Gracík
Marty:

ahojda, jde o to, že ne všechny prohlížeče podporují .eot (ten je myslím jen pro IE)
osobně používám tento kod a formáty:

@font-face {
    font-family: 'museo_sans_500regular';
    src: url('fonts/museosans_500-webfont.eot');
    src: url('fonts/museosans_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/museosans_500-webfont.woff') format('woff'),
         url('fonts/museosans_500-webfont.ttf') format('truetype'),
         url('fonts/museosans_500-webfont.svg#museo_sans_500regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'museo_sans_700regular';
    src: url('museosans_700-webfont.eot');
    src: url('fonts/museosans_700-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/museosans_700-webfont.woff') format('woff'),
         url('fonts/museosans_700-webfont.ttf') format('truetype'),
         url('fonts/museosans_700-webfont.svg#museo_sans_700regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.font2 {
        font-family: museo_sans_500regular, Arial, "Helvetica Neue", Helvetica, Geneva, sans-serif;
        font-weight: normal;
        font-style: normal;
}

.font3 {
                font-family: museo_sans_700regular, Arial, "Helvetica Neue", Helvetica, Geneva, sans-serif;
        font-weight: normal;
        font-style: normal;
}

funkční ve všech prohlížečích,
ještě se pak dá nastavit antiliasing vykreslování což je používám dle konkrétního fontu a jeho velikosti

 
Nahoru Odpovědět 17.1.2013 11:52
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

takže font stáhneš nebo převedeš do vícero formát, dáš k nim link a prohlížeč si pak vybere který z nich použije, je to tak nějak?

Nahoru Odpovědět 17.1.2013 13:13
Creating websites is awesome till you see the result in another browser ...
Avatar
Marty
Neregistrovaný
Avatar
Odpovídá na Jiří Gracík
Marty:

jj přesně tak, můžu doporučit online generátor fontů včetně příslušnýho css na http://www.fontsquirrel.com/…ce/generator

 
Nahoru Odpovědět 17.1.2013 17:03
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

Díky moc, konečně je to funkční, ale jako vždycky tam mám další zádrhel. Odmítá mi to do těch zkonvertovaných formátů přidat české znaky, i přestože si otevřu pokročilé nastavení a zatrhnu tam české znaky ...

(původní font samozřejmě české znaky měl ;) )

Nahoru Odpovědět 20.1.2013 12:19
Creating websites is awesome till you see the result in another browser ...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.