Diskusia – 10. diel - Triedny selektor a štýlovanie textu v CSS

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

Posledné komentáre sú na spodnej časti poslednej stránky.

Capricorn76

Člen

Capricorn76:28.3.2022 9:51

Ahoj,
mám dotaz.

@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-ExtraBold.ttf);
    font-weight: bold;
}

Proč musím zadávat font-weight:bold, když "font-weight" je teoreticky zadána už v ttf souboru "src: url(fonty/Poppins-ExtraBold.ttf);" ?

Děkuji

Odpovedať

Capricorn76

Člen

Capricorn76:28.3.2022 10:51

Ok, už chápu.

Odpovedať

Nat Owen

Člen

Nat Owen:9.5.2022 20:27

Také mám dotaz.. pokud vypisuji toto. Jak to pozná co je určené na nadpis a co na text?

@font-face {
  font-family: Poppins;
  src: url(fonty/Poppins-Regular.ttf);
  font-weight: normal;
}
@font-face {
  font-family: Poppins;
  src: url(fonty/Poppins-ExtraBold.ttf);
  font-weight: bold;
}

Odpovedať

David Kučera

Člen

David Kučera:5.6.2022 19:03

Ahoj, také jsem si nad tím dost lámal hlavu - je to špatně popsané.
font-family: je něco jako třída, uvedu příklad: pokud by jsi chtěla zadat ExtraBold k nadpisům, tak ho napiš jako Poppins1 a to následně spáruj s h1,h2 atd...

h1,h2 {
font-family: "Poppins1";
}

Odpovedať

Tomáš Indrák

Člen

Tomáš Indrák:7.6.2022 20:21

Ahoj, nevím proč, ale nastavení fontu Poppins mi nefungovalo, když jsem tu definici @font-face nastavil ve style.css.

Nicméně pokud jsem to dal do hlavičky index.html (jak bylo v ukázce českého manuálu CSS), tak to fungovalo.

<style>
        @font-face {
            font-family: Poppins;
            src: url(fonts/Poppins-Regular.ttf);
            font-weight: normal;
        }
        @font-face {
            font-family: Poppins;
            src: url(fonts/Poppins-ExtraBold.ttf);
            font-weight: bold;
        }
    </style>

Odpovedať

Tomáš Indrák

Člen

Tomáš Indrák:7.6.2022 23:23

Tak už vím, v čem byl problém.. Měl jsem totiž soubor style.css uložený v podložce css/, narozdíl od příkladu, kde byl stylovací soubor přímo v hlavní složce vedle index.html.

Tedy jsem jen ve style.css upravil správnou cestu k fontům, s ohledem na umístění souborů, a je to funkční.

@font-face {
    font-family: Poppins;
    src: url(../fonts/Poppins-Regular.ttf);
    font-weight: normal;
}
@font-face {
    font-family: Poppins;
    src: url(../fonts/Poppins-ExtraBold.ttf);
    font-weight: bold;
}

Odpovedať

Ondřej Raška

Člen

Ondřej Raška:16.6.2022 12:57

Do selektoru body nastavíme konečně námi zvolený font (v tomto případě font Poppins). body {
font-family: "Poppins"; }

To co je pak prezentováno jako výsledek kroku je změna v body i v nadpisech. Nadpisi už nejsou Arial. Nadpisy ale nejsou zmíněny v textu.

Může to pak být matoucí, když student provede změnu, kterou lektor říká, ale jeho výsledek je jiný.

Odpovedať

Tomáš Novotný

Člen

Tomáš Novotný:7.7.2022 13:30

trošku mne děsí co všechno se dá s písmem vyvádět..... 😀

Odpovedať

Kitsu

Člen

Kitsu:3.9.2022 21:42

řešila jsem to samé, pozná to podle toho front-weight: bold
h1-h6 nebo i <strong> jsou bold, takže se přepíší podle toho .../Poppins/ExtraBold.ttf);

Odpovedať

Karoline Elisabeth Wild

Člen

Karoline Elisabeth Wild:13.9.2022 9:58

Trochu mi tu chybela zminka o font fallbacku a o jednotce rem.

Odpovedať

Posledné komentáre sú na spodnej časti poslednej stránky.

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 10 správy z 127.

Najčastejšie vyhľadávané

Diskusia – 10. diel - Triedny selektor a štýlovanie textu v CSS