În html, dimensiunea fontului joacă un rol important. Vă permite să atrageți atenția utilizatorului asupra informațiilor importante postate pe pagina site-ului. Deși nu numai dimensiunea literelor este importantă, ci și culoarea, grosimea și chiar familia lor.
Etichete și atribute atunci când accesați cu crawlere fonturi html
Limbajul hipertext are un set mare de instrumente pentru lucrul cu fonturile. La urma urmei, formatarea textului este sarcina principală a html.
Motivul creării limbajului HTML a fost problema afișării regulilor de formatare a textului în browsere.
Luați în considerare etichetele care sunt folosite pentru a lucra cu fonturile în html și atributele acestora. Principala este eticheta ... Folosind valorile atributelor sale, puteți seta mai multe caracteristici ale fontului:
- culoare - setează culoarea textului;
- dimensiune - dimensiunea fontului în unități convenționale.
Sunt acceptate valorile atributelor pozitive de la 1 la 7.
- față - folosit pentru a seta familia de fonturi a textului care urmează să fie utilizat în interiorul etichetei ... Mai multe valori sunt acceptate simultan, separate prin virgule.
Este formatat doar textul dintre părțile etichetei de font asociate. Restul textului este afișat în fontul standard implicit.
De asemenea, în html există o serie de etichete pereche care specifică o singură regulă de formatare. Acestea includ:
- - setează fontul aldine în html. Etichetă acțiunea este similară cu cea anterioară;
- - dimensiunea este mai mare decât cea implicită;
- - dimensiune mai mică a fontului;
- - text cu caractere italice. Etichetă similară ;
- - text subliniat;
- tăiat;- - afiseaza textul doar cu litere mici;
- - cu litere mari.
Text simplu
Miniatură
Miniatură
Mai mult decât de obicei
Mai puțin decât de obicei
cursive
cursive
Subliniat
Barat
Capabilități de atribute de stil
Pe lângă etichetele descrise, există mai multe modalități de a schimba fontul în html. Una dintre ele este utilizarea atributului stil generic. Folosind valorile proprietăților sale, puteți seta stilul de afișare a fontului:
1) font-family - proprietatea setează familia de fonturi. Este posibilă enumerarea mai multor valori.
Schimbarea fontului în html la următoarea valoare va avea loc dacă familia anterioară nu este instalată pe sistemul de operare al utilizatorului.
Sintaxa de scriere:
font-family: font name [, font name [, ...]]
2) font-size - dimensiunea este setată de la 1 la 7. Acesta este unul dintre modalitățile principale prin care puteți crește fontul în html.
Sintaxa de scriere:
dimensiunea fontului: dimensiunea absolută | dimensiune relativă | valoare | interes | moşteni
Mărimea fontului poate fi, de asemenea, setată:
- În pixeli;
- În valoare absolută ( xx-mic, x-mic, mic, mediu, mare);
- În procente;
- În puncte (pt).
Dimensiunea fontului: 7
Dimensiunea fontului: 24px
Dimensiunea fontului: x-mare
Dimensiunea fontului: 200%
Dimensiunea fontului: 24 pt
3) font-style - setează stilul de scriere a fontului. Sintaxă:
stil font: normal | cursiv | oblic | moşteni
Valori:
- normal - ortografie normală;
- italic - italic
- oblic - font înclinat la dreapta;
- inherit - moștenește ortografia elementului părinte.
Un exemplu despre cum să schimbați fontul în html folosind această proprietate:
stil font: moștenire
stil de font: italic
stil font: normal
stil font: oblic
4) font-variant - convertește toate literele mari în majuscule. Sintaxă:
font-variant: normal | cu majuscule mici | moşteni
Un exemplu despre cum să schimbați fontul în html cu această proprietate:
font-variant: moștenire
font-variant: normal
varianta de font: majuscule mici
5) font-weight - vă permite să setați grosimea scrierii textului (saturație). Sintaxă:
greutate font: îndrăzneț | mai îndrăzneț | mai ușor | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Valori:
- bold - setează fontul html bold;
- mai îndrăzneț - mai gras față de normal;
- mai ușoară - mai puțin saturată față de normal;
- normal - ortografie normală;
- 100-900 - setează grosimea fontului în echivalent numeric.
greutate font: bold
greutatea fontului: mai îndrăzneață
greutatea fontului: mai ușoară
greutatea fontului: normal
greutate font: 900
Greutatea fontului: 100
Proprietatea fontului și culoarea fontului html
Fontul este o altă proprietate a containerului. Pe plan intern, a combinat valorile mai multor proprietăți concepute pentru a schimba fonturile. Sintaxa fontului este:
font: font-size font-family | moşteni
De asemenea, valoarea poate fi setată la fonturile utilizate de sistem în inscripțiile de pe diferite controale:
- legenda - pentru butoane;
- pictogramă - pentru icoane;
- meniu - meniu;
- mesaj-box - pentru casete de dialog;
- small-caption - pentru comenzi mici
- status-bar - font bara de stare.
font: pictogramă
font: legenda
font: meniu
font: mesaj-box
subtitrări mici
font: bara de stare
font: italic 50px aldine „Times New Roman”, Times, serif
Pentru a seta culoarea fontului în html, puteți folosi proprietatea color. Vă permite să setați culoarea, fie folosind un cuvânt cheie, fie în format rgb. Și, de asemenea, sub forma unui cod hexazecimal.
O capulă este prima literă a unui paragraf care este mai mare decât restul și plasată astfel încât partea superioară a acesteia să fie la nivelul primului rând al paragrafului. În imagine, puteți vedea un exemplu de un drop cap încorporat în text.
Apropo, WordPress are un plugin special (wordpress.org/extend/plugins/drop-caps) care vă permite să creați automat încorporat în text (și deplasat în jos) litere mari... Minunat! Cu toate acestea, ce se întâmplă dacă nu doriți să utilizați un plugin (sunt sigur că nu o faceți) și trebuie doar să creați o limită pentru mai multe postări și, eventual, într-un loc anume?
Vestea bună este că nu trebuie să utilizați un plugin pentru a crea majuscule, tot ce aveți nevoie este un mic css și o etichetă span. Deschideți fișierul CSS și adăugați următorul cod:
Span.dropcaps (familie de fonturi: Georgia, serif; culoare: #ccc; dimensiunea fontului: 46px; float: stânga; greutatea fontului: 400; înălțimea liniei: 1em; marginea jos: -0.4em; marginea-dreapta : 0.09em; poziție: relativă;)
Ceva de genul. Desigur, veți avea nevoie de un stil care să se potrivească cu designul și textul dvs. De exemplu, valorile proprietății: dimensiunea fontului, marginile și înălțimea liniei vor trebui selectate în funcție de design și text.
Eticheta span
Pentru ca stilul să fie aplicat litera majusculă a textului, trebuie să „împachetați” litera majusculă în eticheta span și să scrieți clasa corespunzătoare.
A
Pseudo-element: prima literă
De asemenea, puteți stila primul caracter din text folosind pseudo-elementul: prima literă. Cu toate acestea, un număr limitat de proprietăți poate fi aplicat: pseudo-elementului cu prima literă: acestea sunt proprietăți legate de font, culoare, fundal, margini, margini și umplutură. De asemenea, trebuie remarcat faptul că pseudo-elementul: prima literă nu va funcționa în browserele mai vechi.
P: prima literă (familie font: Georgia, serif; culoare: #ccc; dimensiunea fontului: 46px; float: stânga; greutatea fontului: 400; înălțimea liniei: 1em; marginea inferioară: -0.4em; marginea -dreapta: 0.09em; poziție: relativă;)
Iată câteva metode de editare. litere mari folosind CSS.
CSS majuscule ajută la spargerea monotoniei unui design uniform, ale cărui texte arată la fel de la început până la sfârșit.
Mai devreme și acum drop caps
Cronicarii au folosit majuscule în manuscrisele scrise de mână, dintre care unele datează din secolul al V-lea. Literele majuscule au continuat să fie folosite din secolul al VIII-lea până în secolul al XV-lea, când tipografia a adus tiparul la un nivel industrial. Atât capitele scrise de mână, cât și cele tipărite au fost plasate la începutul textului. Ele erau adesea decorate cu un model decorativ care era plasat în jurul literei.
Literele mari și mici sunt încă folosite astăzi. Ele pot fi găsite în ziare, reviste și cărți, precum și în tipografia digitală. Literele mari sunt uneori numite extinse. Ele sunt plasate la nivel cu partea de jos a textului care le urmează. Literele omise sunt la același nivel cu partea de sus a textului, uneori într-un strat în spatele corpului principal al conținutului textului, sau restul textului curge în jurul lor.
Literele mari sunt mult mai ușor de definit, deoarece sunt la același nivel cu restul textului și, de obicei, nu este nevoie să modificați fluxul din jurul marginilor exterioare pentru a face acest lucru. Literele omise necesită o reglare mai fină. Vă va fi mai ușor să rezolvați acest lucru dacă înțelegeți mai întâi cum sunt gestionate caracterele în relief.
Folosirea claselor
Designerii care sunt deja familiarizați cu CSS știu să creeze o clasă CSS separată pentru prima literă majusculă.
CSS-ul pentru elementul paragraf și clasa care creează scrisoarea ar arăta astfel:
p (dimensiunea fontului: 20px; familia de fonturi: Georgia, „Times New Roman”, Times, serif;) .myinitialcaps (dimensiunea fontului: 48px; familia de fonturi: Didot;)
Și codul HTML va arăta astfel:
Ceea ce ne oferă:
Pare prea ușor? De fapt, va trebui să faceți ajustări pe baza literelor ridicate specifice, deoarece fiecare literă majusculă necesită o kerning specială. După ce ați ales un font pentru literele ridicate și pentru corpul textului, trebuie să creați clase separate pentru fiecare literă ridicată. În cele de mai jos Clasa Css.myinitialcapsi caseta din dreapta este negativă pentru a micșora distanța dintre I și n.
Myinitialcapsi (dimensiunea fontului: 48px; familia de fonturi: Didot; marginea dreapta: -1px;)
În acest caz, există un spațiu suplimentar între „I” și „n”.
includerea unei noi clase cu o marjă negativă o trage mai aproape.
În funcție de rezoluția ecranului, în exemplul de mai sus, I și n pot părea ca și cum ar fi fuzionat împreună. Acest lucru se datorează serifurilor de la sfârșitul literelor. Prin urmare, înainte de a decide cu privire la stilurile CSS finale, testați site-ul pe diferite dispozitive pentru a vedea cum arată textul în toate CSS majuscule pe ele.
Citate și alte cazuri speciale
Puteți mări nu numai literele de la începutul textului. Puteți implementa o altă clasă pentru a crea o versiune supradimensionată a ghilimelelor care apar lângă literă. În cazul nostru, nici clasa de 48 de pixeli, nici clasa de text de 20 de pixeli nu este potrivită pentru ghilimele. Mai degrabă, va fi ceva între - 30 de pixeli. Vom muta ghilimele în jos cu 4 pixeli pentru a le alinia optic cu I:
Myinitialcapsq (dimensiunea fontului: 30px; familia de fonturi: Didot; float: stânga; marginea sus: 4px;)
inclusiv „o clasă nouă cu o marjă negativă o trage mai aproape.
Trebuie să fiți foarte atenți când specificați fiecare dintre limitele CSS, împreună cu ghilimele, astfel încât kerningul și alinierea lor să se potrivească cu marcajul din jur. De exemplu, litera T va trebui să fie deplasată spre stânga, puțin dincolo de marginea paragrafului, astfel încât linia sa transversală să se potrivească vizual în aspect. Va trebui să faceți același lucru cu literele rotunde precum C, G, O și Q. În acest exemplu, dimensiunile fonturilor utilizate sunt 20, 30 și 48. Dar va trebui să alegeți dimensiunile în funcție de specificul fonturilor pe care le-ați ales. La fel și dimensiunile și rezoluțiile ecranelor pe care va fi vizualizat site-ul.
Pseudo-elemente și pseudo-clase
Cu un pseudo-element CSS, puteți crea cu ușurință o literă ridicată adăugând :: prima literă la elementul paragraf. Utilizare: prima literă ( cu un colon) pentru browsere învechite:
p (dimensiunea fontului: 1.2em; familia de fonturi: Georgia, „Times New Roman”, Times, serif; înălțimea liniei: 2em; partea inferioară: 1.2em;) p :: prima literă (dimensiunea fontului: 3.6em; text-transform: majuscule; font-family: "Monotype Bernard Condensed", serif; margin-dreapta: 0.03em;) .initialb (marja-dreapta: -0.1em;) .initialn (marja-dreapta: -0.15 ei ;)
Codul HTML care conține clasele CSS care țin cont de kerningul literelor N și B va arăta astfel...
O literă inițială, prima literă fiind o literă mare.
Cu o întrerupere de linie, următoarea linie nu are limita inițială.
n Observați în sursa HTML cum prima literă, nu o literă majusculă din HTML, este dimensionată la dimensiunea inițială a capacului de 3,6 em. Îngrijit, nu?
B dar cu o întoarcere grea și un nou paragraf a început, întotdeauna se creează un alt plafon inițial. S-ar putea să te întrebi, Cum voi da socoteală pentru asta? Ar trebui să am o limită inițială la începutul unui paragraf foarte nou? Ei bine, ai putea. Dar, vrei să arate așa și trebuie neapărat să arate așa?
Prima literă majusculă a paragrafului este convertită într-o literă.
Prima literă după o întrerupere de rând nu va fi scrisă cu majuscule.
O Rețineți că, în sursa HTML, prima literă nu este scrisă cu majuscule, ci este convertită într-un caracter de 3,6 em.
O Cu toate acestea, chiar și după o întrerupere de linie forțată și la începutul fiecărui paragraf nou, se creează întotdeauna o literă. S-ar putea să vă întrebați: Cum pot lua în considerare acest lucru? Trebuie să adaug litere pentru toate aceste cazuri? Ei bine, poți. Dar este necesar?
Chiar și cu beneficiile pe care pseudo-elementele le oferă, a trebuit să adăugăm o mulțime de cod pentru a defini clase separate pentru a gestiona problemele de kerning și indentare. Dar această metodă transformă prima literă a fiecărui paragraf nou în CSS o literă majusculă. Pentru unii, s-ar putea să nu funcționeze, deoarece nu trebuie să transformați prima literă a fiecărui paragraf.
Combinând pseudo-clase și pseudo-elemente pentru a crea un aspect inteligent
Adăugarea: pseudoclasa primul copil ajută la rezolvarea problemei conversiei inutile a primelor litere:
p (dimensiunea fontului: 1.2em; familia de fonturi: Georgia, „Times New Roman”, Times, serif; înălțimea liniei: 2em; padding-bottom: 0.5em;) p: primul copil :: prima literă ( dimensiunea fontului: 3.6em; transformarea textului: majuscule; familia de fonturi: „Monotype Bernard Condensed”, serif; marginea dreapta: 0.03em;)
Combinând acest cod cu HTML:
Prima literă, care este definită ca primul copil, este singura literă care este convertită într-o limită ridicată în această metodă.
Deoarece doar litera definită ca primul copil este convertită, rețineți că acest exemplu diferă de cel precedent, fără primul copil. În plus, nu convertim primele litere după începutul unui paragraf și după o întrerupere de linie forțată. Acesta pare mai elegant decât arăta aspectul când am convertit toate primele litere ale paragrafelor.
Avantajul utilizării pseudoclaselor este capacitatea de a gestiona diverse cazuri speciale. Dar dezavantajele? Există multe pseudo-clase diferite și pot fi combinate în atât de multe moduri încât vă poate face capul să se învârtă. De exemplu, pseudoclasele: first-child și: first-of-type pot da aceleași rezultate. De asemenea, puteți aplica pseudoclasa nu numai paragrafului, ci și elementelor secțiune (dimensiunea fontului: 1.2em; familia fontului: Georgia, "Times New Roman", Times, serif; înălțimea liniei: 3em;) secțiune> p: primul copil: prima literă (dimensiunea fontului: 4em; text-transform: majuscule; font-family: Didot, serif; margine-dreapta: 5px;) Și împreună cu HTML: La începutul unei secțiuni, prima literă este setată la plafonul ridicat. Și un nou paragraf... Dacă aveți chef de experimentare, puteți explora diverse metode pe lângă: primul copil și: primul de tip. De exemplu, cum ar fi: nth-of-type sau: nth-of-child pentru a vedea cum anumite tipuri de pseudo-clase pot fi utilizate pentru text în CSS majuscule. Indiferent dacă urmați principiile evidențiate în acest articol, sau începeți să sapi mai adânc, odată ce înveți să lucrezi cu primul copil,: first-of-type și: pseudo-clase CSS cu prima literă, le poți aplica corect la elemente HTML. sau în detaliu despre litere și formatarea HTML CSS Capitolul conține exemple formatarea literelor din zona Hypertext Markup. În meniul din stânga veți găsi tutoriale HTML moderne și foarte detaliate. Acestea vă vor permite să vă creați site-ul web de la zero., dar deocamdată, uită-te puțin mai jos. Acest lucru ar putea fi interesant. Era societății informaționale Omenirea a intrat într-o nouă perioadă a dezvoltării sale, în care tehnologiile informaționale și de rețea joacă un rol extrem de important. Trăim în era societății informaționale, care se caracterizează prin dezvoltarea rapidă a tehnologiilor informaționale și de telecomunicații. Odată cu apariția computerului și a internetului, au început schimbări colosale. Calculatorul și internetul împing societatea să formuleze noi norme de comportament, reguli și idealuri. Internetul pentru noua generație este ceea ce a fost televiziunea pentru generația anterioară. Dar rețeaua globală este mult mai funcțională decât televiziunea, deoarece oferă o oportunitate de a face achiziții, vânzări, oferte de comunicare și diverse modalități de auto-exprimare, cum ar fi crearea pagini de internet și site-uri personale. Un exemplu de formatare a literelor: Rezultatul formatării: Un exemplu de text liber scris cu litere mari Un exemplu de text liber scris cu majuscule Etichete - defini litere mari(aceste etichete nu sunt acceptate în HTML 5). CSS stil = cod „text-transform: majuscule” - defineste litere mari.
Cu alte cuvinte, majusculele sunt definite folosind CSS atribute. Un exemplu de formatare a literelor: Rezultatul formatării: Text HTML arbitrar și spațiere între litere CSS de 2 px Descrierea atributelor și valorilor: CSS stilul codului = „spațiere între litere: 2px” - defineste Spațierea literelor CSS.
Căutați exemple de formatare similare în meniul din stânga. Vă mulțumim pentru atenție. Vă permite să schimbați majusculele literelor din text. În mod implicit, valoarea este setată la none, ceea ce nu are niciun efect asupra textului. Cazul textului rămâne același. Valorile majuscule și minuscule convertesc caracterele în majuscule și, respectiv, minuscule. Dacă specificați o valoare cu majuscule, atunci numai primele caractere ale fiecărui cuvânt vor fi scrise cu majuscule. Moștenire moștenește valoarea de la părinte. Proprietatea Text-transform a fost aplicată acestui paragraf cu o valoare Minuscule, ceea ce înseamnă că toate literele vor fi cu litere mici. Și acest ultim paragraf are o proprietate text-transform cu o proprietate CAPITALIZE aplicată. Primele litere ale fiecărui cuvânt vor fi majuscule și doar atât.Litere HTML: majuscule și majuscule
Literele HTML și distanța CSS dintre ele
Exemplu
h3 (text-transform: majuscule;) .minuscule (text-transform: minuscule;) .capitalize (text-transform: capitalize;)
Acesta este titlul. Are o proprietate text-transform setată la majuscule. Toate caracterele vor fi majuscule.