NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

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
Člen
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.