Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

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

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
Avatar
Šimon Raichl
Tvůrce
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.