Hledáme nového kolegu do redakce - 100% home office, 100% flexibilní pracovní doba. Více informací.
Využij akce až 80 % zdarma při nákupu e-learningu - více informací. Zároveň pouze tento týden sleva až 80 % na e-learning týkající se Swift
discount week 80

Diskuze: Odlišné zobrazení @font-ace ve firefox a chromu

Aktivity
Avatar
Filip Janecek:13.11.2018 17:40

Ahoj!
Začal jsem používat @font-face, ale zjišťuji, že se sice parádně zobrazuje v Edgi, ale ne už tak skvěle v Chromu a FF.
Tady je kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title></title>
   <link rel="stylesheet" href="styly.css" />
  </head>
  <body>
  <h1>Nadpis...</h1>
  <p>jafh  gvfrv azfrz uieragf eargfge zuf gzahfgczjuwg fzuwegfczu gsdhg cfasdgcfhasdgfhagfhcdasghzf gahfc hwejgfa cfzudegfczu gcfzug fzuwegfczudsg zcfugsdzfcgzwegfczuwefzucgedzfucgsdzucfezcfgzuwe cgfzue fwefgdzu awegd zuwe tzuwefgzuf zugfzuwegfzuagfzfzuweagzer afcze gzewgfczegcfz ugczudugcdzucgdszucvsdzuvzsduvzugcvzudevgczue gzudecg ezzewg ezg zegfzu ewg fawezfgz awezwegazdg zuwegtfzweagdfzuawezdfugz czewgfawe fctzudsczuawd sfdzs fdžzu</p>
  </body>
</html>

a css:

@font-face {
    font-family: "Alcubierre";
    src: url("../fonts/Alcubierre.eot") format('embedded-opentype'),
    src: url("../fonts/Alcubierre.woff") format('woff'),
    src: url("../fonts/Alcubierre.ttf") format('truetype'),
    src: url("../fonts/Alcubierre.otf") format('opentype'),
    src: url("../fonts/Alcubierre.svg") format('svg');
        font-weight: normal;
    font-style: normal;
    }
@font-face {
    font-family: "bigjohn";
    src: url("../fonts/bigjohn.eot") format('embedded-opentype'),
    src: url("../fonts/bigjohn.woff") format('woff'),
    src: url("../fonts/bigjohn.ttf") format('truetype'),
    src: url("../fonts/bigjohm.otf") format('opentype'),
    src: url("../fonts/bigjohn.svg") format('svg');
    }
p {
font-family:"Alcubierre", Helvetica, Ariel, sans-serif;
}

h1 {
font-family:'bigjohn', Helvetica, Ariel, sans-serif;
font-size: 4.375em;
}

Zajímavé ale je, že odstave p se v písmu alcubierre zobrazí, kdežto h1 v bigjohn nikoliv...
Na g-disk je popřípadě celý"soubor"

Zkusil jsem: Pokusil jsem se vše dát do jedné složky(složka fonts), dát více formátů (eot, woff apod.), dokonce někdo radil nepoužívat zavináč ale pouze font-face... Také jsem vše roztřídil, aby každé písmo mělo svůj @font-face...

Chci docílit: Potřeboval bych, aby se vše zobrazovalo dle uložených písem.

 
Odpovědět
13.11.2018 17:40
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Šimon Raichl
Redaktor
Avatar
Odpovídá na Filip Janecek
Šimon Raichl:14.11.2018 0:14

U tohoto bych se pozastavil:

src: url("../fonts/bigjohn.eot") format('embedded-opentype'),
src: url("../fonts/bigjohn.woff") format('woff'),
src: url("../fonts/bigjohn.ttf") format('truetype'),
src: url("../fonts/bigjohm.otf") format('opentype'),
src: url("../fonts/bigjohn.svg") format('svg');

Ses si jisty, ze

src: url("../fonts/bigjohm.otf") format('opentype')

je spravna cesta k tomu fontu? Na to se muzes kouknout do vyvojarsky konzole, jestli ti nevyhazuje chybu. Btw jeste nepouzivej html 4 doctype, nahrad ho za

<!doctype html>

Jinak co jsem to pak zkousel u sebe, tak to normalne slo, posilam screeny z Firefoxu a Chromu, takze to vypada, ze ses prepsal u te cesty k tomu fontu.

 
Nahoru Odpovědět
14.11.2018 0:14
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 2 zpráv z 2.