Diskuze: Font-face

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Neaktivní uživatel

Tvůrce

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

Neaktivní uživatel

Tvůrce

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

Marty

Neregistrovaný

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

Neaktivní uživatel

Tvůrce

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

Marty

Neregistrovaný

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

Neaktivní uživatel

Tvůrce

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.