CSS Fonts Module Level 3

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson
Download our mobile app to listen on the go
Get App

Questions and Answers

Jaká hodnota se použije pro velikost písma, pokud není specifikována metrika?

  • font-size
  • none
  • max-height
  • x-height (correct)

Která vlastnost řídí použití alternativních glyfů pro velká písmena?

  • font-variant-caps (correct)
  • font-variant-alternates
  • font-variant-emoji
  • font-variant-position

Jaká vlastnost je zkráceným zápisem pro další vlastnosti jako font-style a font-size?

  • font (correct)
  • font-weight
  • line-height
  • font-variant

Co určuje vlastnost font-variant-emoji?

<p>Výchozí styl prezentace emotikonů. (A)</p> Signup and view all the answers

Jaký formát písma je momentálně preferován pro webová písma?

<p>WOFF (A)</p> Signup and view all the answers

Jakým způsobem lze připojit webová písma v CSS?

<p>@font-face (B)</p> Signup and view all the answers

Jakou hodnotu může nabývat vlastnost velikosti písma mimo 'none' a 'from-font'?

<p>metrika a číslo (D)</p> Signup and view all the answers

Jaké hodnoty může nabývat vlastnost pro měnění velikosti prvku?

<p>none, both, horizontal, vertical (D)</p> Signup and view all the answers

Která z následujících vlastností určuje používané ligatury a kontextové formy?

<p>font-variant-ligatures (D)</p> Signup and view all the answers

Jaké hodnoty může mít vlastnost text-overflow?

<p>clip, ellipsis, auto, default (A)</p> Signup and view all the answers

Jaké informace určuje vlastnost cursor?

<p>Jaký typ kurzoru se zobrazuje pro ukazovací zařízení (D)</p> Signup and view all the answers

Co určuje vlastnost overflow?

<p>Chování obsahu při přetečení boxu (C)</p> Signup and view all the answers

Jakou hodnotu může mít vlastnost cursor pro posunování?

<p>move (D)</p> Signup and view all the answers

Jaký typ ořezávání může vlastnost text-overflow použít?

<p>ellipsis (D)</p> Signup and view all the answers

Jaké hodnoty může mít vlastnost overflow-x?

<p>visible, hidden, scroll (A)</p> Signup and view all the answers

Jaký kurzor se zobrazuje pro pomoc?

<p>help (A)</p> Signup and view all the answers

Jaký typ spojovníku je viditelný při zalamování řádků?

<p>Tvrdý spojovník (HYPHEN) (B)</p> Signup and view all the answers

Jaká hodnota overflow-wrap přerušuje text na jakémkoli místě, aby se zabránilo přetečení?

<p>anywhere (D)</p> Signup and view all the answers

Jakým způsobem se nastavuje zarovnání textu pomocí vlastnosti text-align?

<p>Vodorovně (A)</p> Signup and view all the answers

Jaká je hodnota text-align, která zarovná text na střed?

<p>center (B)</p> Signup and view all the answers

Co dělá vlastnost text-align-last?

<p>Zarovnává poslední řádek bloku nebo řádku (D)</p> Signup and view all the answers

Jaká hodnota overflow-wrap způsobí, že řádky se mohou lámat pouze v normálních bodech diferenciace?

<p>normal (A)</p> Signup and view all the answers

Která hodnota text-align se používá pro zarovnání textu doprava?

<p>right (D)</p> Signup and view all the answers

Co dělá vlastnost overflow-wrap, pokud je nastaveno na 'break-word'?

<p>Nezohledňuje body měkkého zalamování (B)</p> Signup and view all the answers

Jaký je hlavní důvod, proč se nedoporučuje používat běžná písma OpenType na webu?

<p>Mohou porušovat licenční smlouvy (D)</p> Signup and view all the answers

Jaká je funkce vlastnosti text-transform v CSS?

<p>Ovládání velikosti písmen v textu (A)</p> Signup and view all the answers

Co se stane, když je vlastnost white-space nastavena na 'nowrap'?

<p>Zalomení řádků bude potlačeno (B)</p> Signup and view all the answers

Která z následujících hodnot není platnou hodnotou pro vlastnost text-transform?

<p>italics (A)</p> Signup and view all the answers

Jaká hodnota vlastnosti white-space udržuje sekvence prázdného místa?

<p>pre (B)</p> Signup and view all the answers

Co dělá vlastnost max-width?

<p>Nastavuje maximální šířku prvku. (B)</p> Signup and view all the answers

Co dělá hodnota 'capitalize' pro vlastnost text-transform?

<p>Převádí první písmeno každého slova na velká (C)</p> Signup and view all the answers

Jaké hodnoty může vlastnost min-height nabývat?

<p>délka, procento, auto (C)</p> Signup and view all the answers

Jaký efekt má vlastnost text-transform s hodnotou 'full-width'?

<p>Vynucuje psaní znaků do čtverce (B)</p> Signup and view all the answers

Jaký je účel vlastnosti white-space s hodnotou 'normal'?

<p>Sekvence prázdného místa jsou sbalené (A)</p> Signup and view all the answers

Jaká je funkce vlastnosti line-height?

<p>Nastavuje vzdálenost mezi řádky textu. (D)</p> Signup and view all the answers

Co se stane, pokud nastavíte max-height na 'none'?

<p>Nebude žádná maximální výška. (A)</p> Signup and view all the answers

Která možnost popisuje vlastnost fit-content?

<p>Využije dostupný prostor, ale ne přes maximální šířku. (A)</p> Signup and view all the answers

Jaká hodnota se použije pro max-width, pokud je nastaveno na 'max-content'?

<p>Maximální vlastní šířka obsahu. (A)</p> Signup and view all the answers

Jaký efekt má vlastnost min-content?

<p>Omezuje minimální vlastní šířku nebo výšku. (D)</p> Signup and view all the answers

Jaká hodnota je přípustná pro vlastnost max-height?

<p>max-content (B)</p> Signup and view all the answers

Jaká vlastnost zajišťuje zachování sekvencí prázdného místa při zalamování textu?

<p>pre-wrap (D)</p> Signup and view all the answers

Jakou hodnotu může mít vlastnost tab-size?

<p>délka - šířka tabulátoru (D)</p> Signup and view all the answers

Co dělá vlastnost word-break s hodnotou break-all?

<p>Zalomení textu se provede při každém přetečení. (C)</p> Signup and view all the answers

Jaké hodnoty může mít vlastnost line-break?

<p>auto, loose, normal, strict (D)</p> Signup and view all the answers

Jak se chová vlastnost hyphens s hodnotou none?

<p>Zabraňuje rozdělování slov na konci řádků. (A)</p> Signup and view all the answers

Jaká je charakteristika vlastnosti break-spaces?

<p>Je shodná s pre-wrap s určitými výjimkami. (B)</p> Signup and view all the answers

Co znamená hodnota keep-all pro vlastnost word-break?

<p>Zalomení slov není povoleno, kromě čínského textu. (D)</p> Signup and view all the answers

Jak se používá hodnota auto u vlastnosti line-break?

<p>Rozděluje text na základě výchozího pravidla zalomení. (B)</p> Signup and view all the answers

Flashcards

Vlastnost CSS "pre-wrap"

Zachovává mezery, zalomuje řádky u znaku nového řádku a u
tagu.

Vlastnost CSS "pre-line"

Sbalí mezery, zalomuje řádky u znaku nového řádku a u
tagu.

Vlastnost CSS "tab-size"

Nastavuje šířku tabulátoru (U+0009) v pixelech.

Vlastnost CSS "word-break"

Určuje, zda a jak se slova rozdělují při zalomení řádku přes více řádků.

Signup and view all the flashcards

Vlastnost CSS "line-break"

V běžném textu se toto dělení slov nepoužívá. V CJK jazycích (čínský, japonský a korejský) to určuje, jak se zalomení řádků provádí s interpunkcí a symboly.

Signup and view all the flashcards

Vlastnost CSS "hyphens: none"

Zabraňuje dělení slov na zalomené řádky, i když znaky uvnitř slov naznačují zalomení.

Signup and view all the flashcards

Vlastnost CSS "hyphens: auto"

Zalamuje řádky s ohledem na rozložení textu a umožňuje automatické vkládání pomlček.

Signup and view all the flashcards

Vlastnost CSS "line-break: anywhere"

Povolí zalomení řádků s užitím měkkých návratů, tj. umožňuje zalomení na libovolném místě (nejen na mezerách).

Signup and view all the flashcards

font-size-adjust

Vlastnost, která určuje, jak se má upravovat velikost písma vzhledem k jeho výšce. Může nabývat hodnot, které specifikují násobek výšky písma, nebo použít metriku z dostupného písma.

Signup and view all the flashcards

text-transform

Vlastnost CSS, která řídí, jak se v textu zachází s velkými a malými písmeny. Lze ji použít k zobrazení textu velkými, malými, s velkým písmenem na začátku každého slova atd.

Signup and view all the flashcards

font-variant

Vlastnost, která slouží jako zkratka pro vlastnosti ohledně variantů písma, jako jsou alternativní glyfy, ligatury a varianty pro velká písmena.

Signup and view all the flashcards

white-space

Vlastnost CSS, která řídí zacházení s bílým prostorem uvnitř prvku. Ovlivňuje, jak se bílé znaky zobrazují v textu.

Signup and view all the flashcards

Modul CSS Text

Funkce CSS, které řídí překlad zdrojového textu na formátovaný, řádkově zalomený text.

Signup and view all the flashcards

font-variant-east-asian

Vlastnost, která řídí použití alternativních glyfů pro východoasijská písma, jako je japonština a čínština.

Signup and view all the flashcards

font-variant-emoji

Vlastnost definuje výchozí styl prezentace pro zobrazování emotikonů.

Signup and view all the flashcards

Výběr fontů na webu

Použití běžných písem OpenType (TTF, OTF) pro web se nedoporučuje, protože to může porušit licenční smlouvy a soubory písem jsou obvykle velké.

Signup and view all the flashcards

text-transform: uppercase

Funkce text-transform umožňuje přenášet text na velká písmena (uppercase), malá písmena (lowercase), použít první písmeno velká (capitalize) nebo ponechat bez změny (none).

Signup and view all the flashcards

font

Vlastnost, která je zkratkou pro vlastnosti definující styl, variantu, váhu, roztažení, velikost, výšku řádku a rodinu písma.

Signup and view all the flashcards

text-transform: lowercase

Funkce text-transform umožňuje přenášet text na malá písmena.

Signup and view all the flashcards

Webové písmo

Písmo, které není standardně nainstalováno na zařízení uživatele a je načteno z webu.

Signup and view all the flashcards

WOFF

Formát souboru určený speciálně pro komprimovaná webová písma.

Signup and view all the flashcards

text-transform: capitalize

Funkce text-transform umožňuje použít první písmeno každého slova v textu jako velké písmeno.

Signup and view all the flashcards

text-transform: none

Funkce text-transform ponechává text bez změny.

Signup and view all the flashcards

WOFF2

Komprimovaný formát souboru pro webová písma, který je nástupcem WOFF.

Signup and view all the flashcards

Vlastnost 'resize'

Nastavuje, jak se má měnit velikost prvku – ať už v horizontálním, vertikálním nebo obou směrech, případně vůbec.

Signup and view all the flashcards

Vlastnost 'text-overflow'

Určuje, jak se má zobrazovat skrytý text, který přesahuje daný prostor. Může být oříznutý s trojtečkou nebo zkrácený bez označení.

Signup and view all the flashcards

Vlastnost 'cursor'

Nastavuje typ kurzoru, který se zobrazí, když uživatel umístí ukazatel myši nad daný prvek.

Signup and view all the flashcards

Vlastnost 'overflow'

Určuje, zda se má obsah, který přesahuje rozměry prvku, oříznout, nebo zobrazit posouvací lišty pro prohlížení celého obsahu.

Signup and view all the flashcards

Vlastnost max-width

Nastavuje maximální šířku prvku. Zabrání tomu, aby se použitá hodnota vlastnosti width stala větší než hodnota určená parametrem max-width.

Signup and view all the flashcards

Vlastnost max-height

Hodnota nastavuje maximální výšku prvku. Zabrání tomu, aby se použitá hodnota vlastnosti height stala větší než hodnota určená pro max-height.

Signup and view all the flashcards

Vlastnost min-width

Nastavuje minimální šířku prvku. Zabrání tomu, aby se použitá hodnota vlastnosti width stala menší než hodnota určená pro min-width.

Signup and view all the flashcards

Vlastnost min-height

Hodnota nastavuje minimální výšku prvku. Zabrání tomu, aby se použitá hodnota vlastnosti height stala menší než hodnota určená pro min-height.

Signup and view all the flashcards

Vlastnost line-height

Nastavuje výšku řádkové oblasti. Běžně se používá k nastavení vzdálenosti mezi řádky textu. Pro prvky na úrovni bloku určuje minimální výšku řádkových polí v prvku.

Signup and view all the flashcards

Vlastnost max-content

Určuje, jak se prvek bude chovat, pokud je mu k dispozici více prostoru, než potřebuje. Nastavuje maximální šířku prvku, která nebudou nikdy překročena.

Signup and view all the flashcards

Vlastnost max-content pro výšku

Určuje, jak se prvek bude chovat, pokud je mu k dispozici více prostoru, než potřebuje. Nastavuje maximální výšku prvku, která nebudou nikdy překročena.

Signup and view all the flashcards

Vlastnost min-content

Určuje, jak se prvek bude chovat, pokud má k dispozici méně prostoru, než potřebuje. Nastavuje minimální šířku prvku, která se nikdy nesníží.

Signup and view all the flashcards

overflow-wrap

Prohlížeč vkládá konce řádků do nerozbitného řetězce, aby se zabránilo přetečení textu z řádkového boxu. Určuje, zda a jak se řádky můžou lámat.

Signup and view all the flashcards

overflow-wrap: anywhere

Umožňuje lámat jinak nerozbitné řetězce (dlouhá slova nebo adresy URL) za účelem zabránění přetečení obsahu. V tomto případě ale nebere v úvahu měkká zalamování.

Signup and view all the flashcards

overflow-wrap: break-word

Stejné jako 'anywhere', ale navíc zohledňuje měkká zalamování při výpočtu vnitřních rozměrů obsahu. Ostré zlomy.

Signup and view all the flashcards

text-align

Nastavuje vodorovné zarovnání obsahu textu uvnitř bloku. Ovlivňuje, jak je text umístěn v rámci bloku.

Signup and view all the flashcards

text-align-last

Nastavuje zarovnání posledního řádku bloku nebo řádku před vynuceným zalamováním. Ovlivňuje pouze poslední řádek.

Signup and view all the flashcards

automatické dělení slov

Prohlížeč automaticky rozděluje slova v příslušných bodech podle vnitřních pravidel pro dělení slov.

Signup and view all the flashcards

měkký spojovník (U+00AD)

Znak, který umožňuje zalomení slova, ale není viditelný.

Signup and view all the flashcards

tvrdý spojovník (U+2010)

Znak, který umožňuje zalomení slova a je viditelný.

Signup and view all the flashcards

Study Notes

Písmo v CSS

  • Práce s písmem v CSS je popsána v modulu CSS Fonts Module Level 3.
  • Znak (character) - nejméně významná složka psaného jazyka s sémantickou hodnotou. Není konkrétní způsob zobrazení. Používá standard Unicode.
  • Glyf (glyph) - konkrétní vizuální reprezentace znaku. Jeden znak může mít několik glyfů.
  • Font - sada znaků stejného stylu a velikosti. Obsahuje glyfy mapované na znaky.
  • Rodina písma - skupina fontů odvozených z jednoho základního typu písma. Různé varianty (např. tučné, kurzíva) jsou řezy.

Základní termíny

  • Znak (character): Nejnižší sémantická jednotka psaného jazyka. Je to abstraktní reprezentace, ne grafický tvar. Standard Unicode je běžný způsob reprezentace a kódování znaků.
  • Glyf (glyph): Konkretizace znaku. Jeden znak může mít více glyfů (třeba různou velikost nebo styl). Ligatury jsou příkladem, kde jeden glyf zobrazuje dva znaky (např. spojená písmena).
  • Font (písmo): Sada glyfů pro jeden typ písma, velikosti a stylu. Představuje zásobník glyfů pro vykreslení.
  • Rodina písma (font family): Skupina fontů, které jsou odvozené ze stejného typu písma. Například Helvetica, Verdana, Times New Roman.. Součástí je i řada grafických variant.

Vlastnosti fontů v CSS

  • font-family: Seznam prioritních rodin písem. Používá se pro výběr správného písma.
  • font-weight: Nastavuje tučnost písma (např. thin, normal, bold, bolder). Hodnoty od 100 (nejtenčí) do 900 (nejtučnější).
  • font-style: Nastavuje styl písma (např. normal, italic, oblique).
  • font-size: Velikost fontu (např. 12px, 1em, 16pt).
  • font-stretch: Nastavuje šířku znaku (např. normal, condensed, expanded).
  • font-variant: Nastavuje další varianty písma. Zahrnuje styl pro malé a velké písmeny.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Quiz Team

Related Documents

04_WWW_výukový text PDF

More Like This

Písmo v CSS
48 questions

Písmo v CSS

ForemostCanto5845 avatar
ForemostCanto5845
Písmo v CSS: Základní termíny
47 questions
Font Styling and CSS Properties
10 questions
Use Quizgecko on...
Browser
Browser