Písmo v CSS

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

Jaké jsou dva hlavní obory typografie?

Grafická úprava a font design

Digitální typografie a tisková typografie

Mikrotypografie a makrotypografie (correct)

Webová typografie a klasická typografie

Která vlastnost určuje prioritu rodiny písem?

font-weight

font-style

font-size

font-family (correct)

Jaký styl písma má čisté linie bez malých tahů?

Serif

Monospace

Sans-serif (correct)

Cursive

Jaký vzhled vytvářejí patková písma?

Formální a elegantní vzhled Signup and view all the answers

O jakou vlastnost se jedná, pokud se nastavuje tučnost písma?

font-weight Signup and view all the answers

Které z následujících písmen se nepovažuje za generickou rodinu písem?

Arial Signup and view all the answers

Jaký typ typografie se zaměřuje na umístění písma na stránce?

Makrotypografie Signup and view all the answers

Jaký je mechanický vzhled, který se vytváří pomocí monospace písem?

Stejná pevná šířka pro všechna písmena Signup and view all the answers

Jaký je účel vlastnosti border-spacing?

Určit horizontální i vertikální rozestupy mezi buňkami. Signup and view all the answers

Jaké hodnoty může nabývat vlastnost empty-cells?

show a hide Signup and view all the answers

Co určuje vlastnost width, pokud je box-sizing nastavena na border-box?

Šířku oblasti včetně okraje. Signup and view all the answers

Jaká výchozí hodnota se používá pro vlastnost height?

auto Signup and view all the answers

Co dělá vlastnost text-align s hodnotou justify?

Zarovná text rovnoměrně mezi levým a pravým okrajem. Signup and view all the answers

Jaká hodnota vlastnosti text-justify zajistí, že zarovnání textu bude vypnuto?

none Signup and view all the answers

Jaký vliv má vlastnost min-width na chování prvku?

Zabraňuje zmenšení pod stanovenou šířku. Signup and view all the answers

Jaké hodnoty mohou být přiřazeny vlastnosti height?

auto, délka, %, initial, inherit Signup and view all the answers

Jaký je efekt kladné hodnoty vlastnosti letter-spacing?

Způsobuje, že se znaky rozšiřují. Signup and view all the answers

Jaké hodnoty může nabývat vlastnost word-spacing?

normal a délka Signup and view all the answers

Jaká podmínka ovlivňuje hodnotu vlastnosti width?

Zda je box-sizing nastaven na border-box. Signup and view all the answers

Jaký význam má procentuální hodnota pro vlastnost width?

Určuje šířku na základě rodičovského bloku. Signup and view all the answers

Jaký je účel vlastnosti text-indent?

Nastavit délku prázdného prostoru před řádky textu. Signup and view all the answers

Jaká hodnota vlastnosti text-justify se snaží dosáhnout rovnováhy mezi výkonem a kvalitou?

auto Signup and view all the answers

Jaká je hodnota text-indent, když je nastavena na 20px?

Před textem bude 20 pixelů prázdného prostoru. Signup and view all the answers

Co znamená hodnota inter-word u vlastnosti text-justify?

Zarovnání přidáním mezery mezi slovy. Signup and view all the answers

Jaká je funkce vlastnosti font-size-adjust?

Upravuje velikost písma podle specifikované metriky. Signup and view all the answers

Které z následujících vlastností jsou součástí zkráceného zápisu vlastnosti font?

font-weight Signup and view all the answers

Jaký je primární účel vlastnosti font-variant-numeric?

Upravuje styl pro čísla a zlomky. Signup and view all the answers

Jaký typ písma je považován za webové písmo?

Písmo, které je načteno přes @font-face. Signup and view all the answers

Jaké jsou preferované formáty pro webová písma?

WOFF a WOFF2 Signup and view all the answers

Co řídí vlastnost font-variant-ligatures?

Které ligatury a kontextové formy se používají. Signup and view all the answers

Jakým způsobem se vypočítává upravená velikost písma?

Pomocí vzorce s faktorem z různých metrik. Signup and view all the answers

Co se stane, když není uvedena metrika pro velikost písma?

Stejně se použije x-height jako metrika. Signup and view all the answers

Jakou vlastnost používáme k nastavení maximální šířky prvku?

max-width Signup and view all the answers

Která z následujících hodnot není platná pro vlastnost max-height?

min-width Signup and view all the answers

Co určuje vlastnost line-height?

výšku řádkového rámečku Signup and view all the answers

Jaká hodnota zabrání tomu, aby se šířka prvku zvětšila nad zadanou velikost v případě min-height?

min-content Signup and view all the answers

Která z následujících hodnot pro vlastnost max-width umožňuje využít veškerý dostupný prostor?

fit-content Signup and view all the answers

Jaká vlastnost nastavuje minimální výšku prvku?

min-height Signup and view all the answers

Jakou hodnotu může nabývat vlastnost max-width kromě délky a procenta?

fit-content Signup and view all the answers

Jaký je účel vlastnosti none v kontextu maximální šířky a výšky?

žádné omezení Signup and view all the answers

Jaké hodnoty může mít vlastnost outline-color?

barva a invert Signup and view all the answers

Jaký je účel vlastnosti outline-width?

Nastavit tloušťku obrysu Signup and view all the answers

Co se děje s obrysy u víceřádkového textu v závislosti na prohlížeči?

Obrys se může vykreslit pro každý řádek zvlášť Signup and view all the answers

Která z následujících hodnot není možnou hodnotou vlastnosti outline-style?

curved Signup and view all the answers

Jaké jsou možné hodnoty pro vlastnost outline-offset?

délka Signup and view all the answers

Proč se obrysy nevykreslují v rámci rámce ohraničení?

Aby obrysy nezabíraly místo v layoutu Signup and view all the answers

Jaký je význam nastavení vlastnosti resize?

Umožňuje uživateli měnit velikost prvku Signup and view all the answers

Jakým způsobem může být definována vlastnost outline?

Jako součet tloušťky, barvy a stylu Signup and view all the answers

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) – nejmenší složka psaného jazyka s sémantickou hodnotou. Není konkrétním vykreslením. Nejčastěji se používá standard Unicode s kódy pro znaky.
Glyf (glyph) – konkrétní vizuální reprezentace znaku. Může jeden znak reprezentovat více glyfů nebo jeden glyf vícero znaků (např. ligatury).
Font (písmo) – sada znaků jedné velikosti a stylu. Obsahuje glyfy mapované na znaky.
Rodina písma (font family) – skupina řezů jednoho typu písma. Řez je grafickou variantou (např. tučné, kurzíva). Některá písma mají pouze jeden řez. Rodina písma zajišťuje jednotný vzhled.
Řez písma (font-weight) – typ řezu, který slouží k zvýraznění textu. Může být kurziva, polotučný, tučný apod.
Grafém (grapheme) – nejmenší nedělitelná jednotka v pravopisu konkrétního jazyka. Často synonymum pro znak.
Kapitálky (capitals) – menší verzále (velká písmena).

Vlastnosti CSS pro písma

font-family: Určuje prioritní seznam rodin písem. (např. Helvetica, Verdana, sans-serif).
font-weight: Nastavuje tučnost písma (od 100 - Thin do 900 - Black), např. bold, normal.
font-style: Určuje styl písma (normal, italic, oblique).
font-size: Nastavuje velikost písma. Lze použít jednotky jako px, em, %.
font-stretch: Nastavuje šířku písma (normal, condensed, expanded).
font-size-adjust: Umožňuje optimalizovat poměr mezi velkými a malými písmeny v textu.
font-variant: Řídí alternativní glyfy pro specifické symboly (normal, small-caps, lining-nums, oldstyle-nums).
letter-spacing: Nastavuje mezeru mezi písmeny.
word-spacing: Nastavuje mezery mezi slovy.
white-space: Spravuje, jak je bílý prostor v prvku interpretován (normal, pre-wrap, nowrap).
text-align: Nastavuje zarovnání textu (left, right, center, justify).
text-decoration: Dekorace textu (underline, overline, line-through).
text-transform: Nastavuje transformaci písmen (none, capitalize, uppercase, lowercase, full-width).
text-indent: Nastavuje odsazení prvního řádku.
table-layout: Nastavuje způsob rozložení buněk v tabulce (auto, fixed).
border-collapse: Určuje, zda se okraje buněk v tabulce sloučí (collapse, separate).
border-spacing: Nastavuje rozestup mezi okraji buněk v tabulce.
empty-cells: Nastavuje zobrazování prázdných buněk v tabulce (show, hide).

Písmo

Fonty mohou být v různých formátech (např. WOFF, TTF, OTF).

Uživatelské rozhraní

Vlastnost box-sizing: Definuje, jak se počítá celková šířka a výška prvku (content-box, border-box).
Vlastnost cursor: Nastavuje typ kurzoru pro prvek.

Vizuální efekty

Přetečení – nastavení chování obsahu, který přetéká rámeček prvku (visible, hidden, clip, scroll).
Maskování – částečné nebo úplné skrytí obsahu pomocí masky (mask).
Ořezávání – definování oblasti pro zobrazení obsahu (clip-path).

Tabulky CSS

Definují strukturu a styly tabulek.
table-layout: určuje způsob výpočtu šířky a výšky sloupců a řádků (auto, fixed).
border-collapse: sloučí okraje buněk v tabulce.
border-spacing: nastavení rozestupu me-zi okraji buněk.

Studying That Suits You

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

Description

V tomto kvízu se zaměříme na základní koncepty spojené s písmem v CSS podle modulů CSS Fonts Module Level 3. Prozkoumáme pojmy jako znak, glyf, font a rodina písma, které jsou klíčové pro efektivní práci s textem na webových stránkách.

Písmo v CSS

Choose a study mode

Podcast

Questions and Answers

Jaké jsou dva hlavní obory typografie?

Která vlastnost určuje prioritu rodiny písem?

Jaký styl písma má čisté linie bez malých tahů?

Jaký vzhled vytvářejí patková písma?

O jakou vlastnost se jedná, pokud se nastavuje tučnost písma?

Které z následujících písmen se nepovažuje za generickou rodinu písem?

Jaký typ typografie se zaměřuje na umístění písma na stránce?

Jaký je mechanický vzhled, který se vytváří pomocí monospace písem?

Jaký je účel vlastnosti border-spacing?

Jaké hodnoty může nabývat vlastnost empty-cells?

Co určuje vlastnost width, pokud je box-sizing nastavena na border-box?

Jaká výchozí hodnota se používá pro vlastnost height?

Co dělá vlastnost text-align s hodnotou justify?

Jaká hodnota vlastnosti text-justify zajistí, že zarovnání textu bude vypnuto?

Jaký vliv má vlastnost min-width na chování prvku?

Jaké hodnoty mohou být přiřazeny vlastnosti height?

Jaký je efekt kladné hodnoty vlastnosti letter-spacing?

Jaké hodnoty může nabývat vlastnost word-spacing?

Jaká podmínka ovlivňuje hodnotu vlastnosti width?

Jaký význam má procentuální hodnota pro vlastnost width?

Jaký je účel vlastnosti text-indent?

Jaká hodnota vlastnosti text-justify se snaží dosáhnout rovnováhy mezi výkonem a kvalitou?

Jaká je hodnota text-indent, když je nastavena na 20px?

Co znamená hodnota inter-word u vlastnosti text-justify?

Jaká je funkce vlastnosti font-size-adjust?

Které z následujících vlastností jsou součástí zkráceného zápisu vlastnosti font?

Jaký je primární účel vlastnosti font-variant-numeric?

Jaký typ písma je považován za webové písmo?

Jaké jsou preferované formáty pro webová písma?

Co řídí vlastnost font-variant-ligatures?

Jakým způsobem se vypočítává upravená velikost písma?

Co se stane, když není uvedena metrika pro velikost písma?

Jakou vlastnost používáme k nastavení maximální šířky prvku?

Která z následujících hodnot není platná pro vlastnost max-height?

Co určuje vlastnost line-height?

Jaká hodnota zabrání tomu, aby se šířka prvku zvětšila nad zadanou velikost v případě min-height?

Která z následujících hodnot pro vlastnost max-width umožňuje využít veškerý dostupný prostor?

Jaká vlastnost nastavuje minimální výšku prvku?

Jakou hodnotu může nabývat vlastnost max-width kromě délky a procenta?

Jaký je účel vlastnosti none v kontextu maximální šířky a výšky?

Jaké hodnoty může mít vlastnost outline-color?

Jaký je účel vlastnosti outline-width?

Co se děje s obrysy u víceřádkového textu v závislosti na prohlížeči?

Která z následujících hodnot není možnou hodnotou vlastnosti outline-style?

Jaké jsou možné hodnoty pro vlastnost outline-offset?

Proč se obrysy nevykreslují v rámci rámce ohraničení?

Jaký je význam nastavení vlastnosti resize?

Jakým způsobem může být definována vlastnost outline?

Study Notes

Písmo v CSS

Vlastnosti CSS pro písma

Písmo

Uživatelské rozhraní

Vizuální efekty

Tabulky CSS

Studying That Suits You

Related Documents

Description

More Like This

HTML and CSS Fonts Quiz

CSS Font Family Property Guide

CSS Lettertypen Weergave

Písmo v CSS: Základní termíny