Ako najlepšie využiť písma v CSS?

Tento článok vám predstaví jednoduchú, ale dôležitú tému, ktorou sú písma v a tiež vám poskytne praktickú ukážku k tejto téme. V tomto článku sa budeme zaoberať nasledujúcimi ukazovateľmi,

• Písma v CSS
• Atribúty vo fonte CSS
• atribút štýlu písma
• atribút hmotnosť písma
• atribút veľkosti písma
• atribút rodina písma

Webové stránky obsahujú obsah vo forme obrázkov, zvuku, videa a textu. Väčšina webových stránok sa však stále spolieha na text ako na prevažujúci formát. Je to preto, že obyčajný text ponúka niektoré veľmi významné výhody.

Nerušivá čitateľnosť - chcete si skontrolovať najnovšie skóre zápasu, keď ste v kancelárii. Je zrejmé, že chcete rýchlu aktualizáciu textu, nie hlučné video!
Nízka požiadavka na šírku pásma - Textový obsah je možné načítať aj v zlých oblastiach pripojenia k internetu, zatiaľ čo multimediálne údaje nie.
Priateľské k vyhľadávaniu - webové stránky vždy sledujú, ako ľahko si ich obsah všimne vo vyhľadávacích nástrojoch. Na to je najvhodnejší text, prinajmenšom dovtedy, kým AI úplne neprevezme internet!

Pri formátovaní textového obsahu majú webdizajnéri k dispozícii len niekoľko parametrov, na ktorých môžu pracovať - ​​písmo, zarovnanie, zvýraznenie a farba. Výber správneho písma pre text je kritickou voľbou. Štandardnou praxou je používať značky písma CSS na definovanie písma pre text na stránkach HTML.
Ak ste vo svete programovania HTML nováčikom, tu si urobte základné úvodné turné. Možno si budete chcieť prečítať základné informácie o CSS, kým sa dozviete viac o písmach CSS.

Komplexný tutoriál o CSS nájdete v príručke Edureka CSS pre začiatočníkov. Dostanete vynikajúci prehľad o tom, ako sa má CSS používať na vylepšenie webového dizajnu HTML.

Pokračujeme v tomto článku o písmach v CSS

Písma v CSS

Písmo je v podstate súbor charakteristík spojených so zobrazením textu. Fonty sa navzájom líšia veľkosťou, odsadením, šírkou, šikmým atď. Začnime základným zobrazením textu v rôznych písmach.

Príklad 1: Nadpisy a odstavce v rôznych písmach

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
Odsek zvýraznený tučným písmom Gruzínsko
 

 Príklad 1: Výstup 

V príklade 1 máme 3 rôzne riadky textu v rôznych písmach. Môžete si všimnúť, že každé z typov písma sa líši svojou šírkou, odsadením atď.

Pokračujeme v tomto článku o písmach v CSS

Atribúty vo fonte CSS

Fonty CSS majú 4 základné atribúty - štýl, hmotnosť, veľkosť a rodina. Atribút style označuje normálnu alebo kurzívu. Váha zobrazuje písmo ako obyčajné alebo tučné písmo. Hmotnosť je možné vyjadriť aj číselne. Veľkosť je jednoducho veľkosť písma, čím väčšia je veľkosť, tým väčší je vzhľad textu. Existuje niekoľko spôsobov, ako možno priradiť veľkosť písma, podrobné popisy sú uvedené v ďalších častiach. Atribútom family je priradiť názvu písma text.

V príklade 1 sme použili rôzne názvy písma pre nadpisy a odstavce. Pod značkami h1 a p vidíme uvedené dva názvy písma, zatiaľ čo značka h2 iba jedno písmo. Toto je definícia rodiny fontov, viac o tom neskôr.

Pokračujeme v tomto článku o písmach v CSS

atribút štýlu písma:

Nastaviť sa dajú dva základné štýly: „normálny“ a „kurzíva“. Kurzíva má mať kurzívu sklonenú. Normálna je predvolená možnosť, ktorá je rovná. Existuje ešte jedna menej používaná možnosť s názvom „šikmá“, ktorá sa vo väčšine typov písma podobá kurzíve. Štýl môžete tiež nastaviť na „dediť“, aby prevzal štýl písma z nadradeného prvku.

Pokračujeme v tomto článku o písmach v CSS

atribút gramáže písma:

Tento atribút rozhoduje o tom, či sa má písmo javiť silné alebo tenké. Môže byť nastavený na „normálny“ alebo „tučný“. Predvolená hodnota je normálna. Túto hodnotu je možné nastaviť aj ako číselnú. Váha 400 predstavuje normálnu hmotnosť a 700 je označená tučne. Existuje niekoľko ďalších nastavení (od 100 - veľmi ľahké do 900 - veľmi tučné), ale nie sú podporované všetkými typmi písma. Všetky možnosti hmotnosti sú uvedené v príklade 3.

Pokračujeme v tomto článku o písmach v CSS

ako používať db prehliadač pre sqlite

atribút veľkosti písma:

Atribút size je možné nastaviť viacerými spôsobmi. Nižšie uvádzame zoznam týchto spôsobov.
● Vymenovaná hodnota ako „stredná“, „veľká“. Rovnako ako veľkosti oblečenia, aj jeho hodnoty sa môžu pohybovať od XX malého do XX Veľkého!
● Nastaviť vo vzťahu k nadradenému prvku ako „väčší“ alebo „menší“.
● Percento veľkosti nadradeného prvku.
● Nastavením možnosti „dediť“ priamo prijmete veľkosť nadradeného prvku.
● Ako absolútna hodnota v jednotkách px (pixely), pt (body) alebo cm (centimetre)
„Stredná“ je predvolená hodnota nastavená pre tento parameter.

Pokračujeme v tomto článku o písmach v CSS

atribút rodina písma:

V HTML je rodina fontov CSS určená na nastavenie názvu písma. Do značky môžete buď vložiť jeden názov písma. Alebo môžete priradiť viac hodnôt ako zoznam rodiny fontov, ktorý definuje prioritu, v ktorej má prehliadač zvoliť písmo.
Zoznam má prioritu zľava doprava vo forme záložného systému. Je vybraná prvá hodnota, ak je k dispozícii, alebo ovládací prvok prejde na ďalšiu, až kým sa nedosiahne koniec zoznamu. Predvolená rodina fontov je definovaná preferenciami prehliadača.
Skupiny fontov CSS sú 2 typov - generické rodiny a rodiny fontov.
● Generické rodiny - na základe niektorých všeobecných charakteristík sú písma zoskupené do skupín „serif“, „sans serif“, „monospace“ atď. Napríklad Sans serif znamená písma bez pätkového štýlu.
● Rodinné mená - písma patriace do konkrétnych rodinných hierarchií. Times, Arial, Courier sú rodiny fontov a Times New Roman je príkladom písma rodiny Times.
Rôzne možnosti použitia rodiny fontov sú uvedené v príklade 4 nižšie.

Niektoré spoločné body, ktoré je potrebné poznamenať

● Rovnako ako niekoľko ďalších vlastností CSS, aj niektoré nastavenia písma sa v rôznych prehľadávačoch líšia. Pred použitím niektorých zriedkavých nastavení písma si pozrite podporu prehliadača.
● Nastavenia písma môžete nastaviť osobitne pomocou jednotlivých značiek štýlu písma, hmotnosti písma atď. Alternatívne, ak uprednostňujete kompaktný kód, môžete použiť atribút skratkového písma so všetkými hodnotami v rovnakom riadku.
● V používateľských scenároch, kde chcete, aby sa veľkosť písma líšila v závislosti od veľkosti prehliadača, existuje užitočné nastavenie veľkosti písma, ktoré sa nazýva responzívne nastavenie písma. Môže byť nastavený pomocou vw jednotky, čo znamená „šírka výrezu“. Takto bude veľkosť textu zodpovedať veľkosti okna prehliadača.

Dúfam, že ste našli informácie, ktoré ste hľadali, na Fonts In CSS. Podeľte sa s nami o svoje skúsenosti v sekcii komentárov nižšie. Šťastné navrhovanie!

Ak sa chcete dozvedieť viac informácií o vývoji webových aplikácií, pozrite si stránku od Edureka. Osvedčenie o školení v oblasti vývoja webu vám pomôže Naučte sa, ako vytvárať pôsobivé webové stránky pomocou rozhraní HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a ako ich nasadiť do služby Amazon Simple Storage Service (S3).