FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:16.1.2013 20:58

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
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:17.1.2013 10:47

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

Nahoru Odpovědět
17.1.2013 10:47
Neaktivní uživatelský účet
Avatar
Marty
Neregistrovaný
Avatar
Odpovídá na Neaktivní uživatel
Marty:17.1.2013 11:52

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
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:17.1.2013 13:13

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
Neaktivní uživatelský účet
Avatar
Marty
Neregistrovaný
Avatar
Odpovídá na Neaktivní uživatel
Marty:17.1.2013 17:03

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
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:20.1.2013 12:19

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
Neaktivní uživatelský účet
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.