În html, dimensiunea fontului joacă un rol important. Atrage atenția utilizatorului asupra Informații importante postat 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 lucrați cu fonturi html
Limbajul hipertext are un set mare de instrumente pentru lucrul cu fonturile. La urma urmei, formatarea textului este sarcina principală a html.
Cauza creației limbaj HTML a existat o problemă de afișare a regulilor de formatare a textului de către 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 arbitrare.
Este acceptată o valoare de atribut pozitivă de la 1 la 7.
- față - folosit pentru a seta familia de fonturi a textului care urmează să fie utilizat în interiorul etichetei . Sunt acceptate valori multiple, separate prin virgule.
Doar textul care se află între părți este formatat etichetă asociată font. Restul textului este afișat în fontul implicit.
De asemenea, în html există o serie de etichete pereche care definesc o singură regulă de formatare. Acestea includ:
- - se setează în html font aldine. Etichetă similar în acțiune cu cel precedent;
- - dimensiunea este mai mare decât cea implicită;
- - dimensiune mai mică a fontului;
- - text italic (italic). Etichetă similară ;
- — text cu subliniere;
- tăiat;- — afișarea textului numai 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
Cu subliniere
Striat
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 se va întâmpla dacă familia anterioară nu este setată la sistem de operare utilizator.
Sintaxa de scriere:
familia-font: font-name [, font-name[, ...]]
2) font-size - dimensiunea este setată de la 1 la 7. Acesta este unul dintre principalele modalități prin care puteți crește fontul în html.
Sintaxa de scriere:
font-size: dimensiune absolută | dimensiune relativă | valoare | interes | moşteni
De asemenea, puteți seta dimensiunea fontului:
- În pixeli;
- În termeni absoluti ( 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 fontului. Sintaxă:
stil font: normal | cursiv | oblic | moşteni
Valori:
- normal - ortografie normală;
- italic - italic
- oblic - font cu o înclinare spre dreapta;
- inherit - moștenește ortografia elementului părinte.
Un exemplu despre cum să schimbați fontul în html folosind această proprietate:
font-style:moștenire
stil font: cursiv
font-style:normal
stil font: oblic
4) font-variant - convertește toate literele mari în majuscule. Sintaxă:
font-variant: normal | majuscule mici | moşteni
Un exemplu despre cum să schimbați fontul în html cu această proprietate:
font-variant:moștenire
font-variant:normal
font-variant:small-caps
5) font-weight - vă permite să setați grosimea scrierii textului (saturație). Sintaxă:
greutate font: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Valori:
- bold - setează fontul html la bold;
- îndrăzneț - mai îndrăzneț față de normal;
- mai ușoară - mai puțin saturată față de normal;
- normal - ortografie normală;
- 100-900 - setează grosimea fontului în termeni numerici.
greutate font: bold
greutatea fontului: mai îndrăzneață
greutate font: mai ușor
greutate font: normal
greutate font: 900
greutate font: 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:
font: font-size font-family | moşteni
De asemenea, fonturile folosite de sistem în etichetele de pe diferite controale pot fi setate ca valoare:
- legenda - pentru butoane;
- pictogramă - pentru icoane;
- meniu - meniu;
- mesaj-box - pentru casete de dialog;
- small-caption - pentru controale mici;
- status-bar - font bara de stare.
font:pictogramă
font:legendă
font:meniu
font: caseta de mesaje
legendă mică
font:bara de stare
font: italic 50px bold „Times New Roman”, Times, serif
Cu toții suntem obișnuiți să evidențiem o parte din text sau cuvintele individuale de pe site cu caractere aldine, subliniate sau cursive. Cu toate acestea, cu abuzul excesiv al acestor lucruri, motoare de căutare vă poate filtra pagina sau site-ul web.
Astăzi voi oferi o soluție pentru cei care doresc să scoată în continuare cuvinte și text, dar să nu se teamă de sancțiunile din motoarele de căutare. Aceasta metoda Folosesc personal pe mai multe site-uri.
Etichetele HTML standard sunt responsabile pentru formatarea textului:
Atenţie! Am lansat o nouă temă Romb pentru articolele și blogurile dvs. Cel mai rapid de pe Google PageSpeed și optimizare maximă pentru SEO.
Vă sugerez să folosiți CSS pentru a evidenția textul, care va fi perceput de motoarele de căutare destul de adecvat.
Pasul 1: Scrieți opțiunile CSS
Deschideți fișierul de stil (style.css, css.css, screen.css etc.) și adăugați asta până la sfârșit:
Puternic (greutate font: bold;) .italic (font-style: italic;) .subliniere (decor text:subliniat;)
Puternic (greutatea fontului: bold;) Cursiv ( stil font : cursiv ; ) Subliniere ( text-decor : subliniere ; ) |
Aici am oferit claselor corespunzătoare propriile lor aspect. Acum, în modul HTML, puteți introduce fragmentul de text dorit, sau un cuvânt, într-o etichetă span cu parametrii doriti, drept urmare textul va lua forma dorită: bold, italic sau subliniat. Vedea:
Cu toate acestea, este nevoie de timp pentru a scrie manual o nouă etichetă span cu o clasă de fiecare dată. Prin urmare, propun o opțiune de automatizare a acestui lucru.
Pasul 2. Adăugarea butoanelor în bara de formatare a textului
Vom adăuga acum butoane noi la bara de formatare a textului din zona de administrare a site-ului dvs. WordPress. Va arata asa:
După cum puteți vedea din imagine, am adăugat 3 butoane noi în modul HTML. Pe ei am „atârnat” spanul creat cu clasele necesare (puternic, italic și subliniat).
Deschideți fișierul functions.php și la sfârșit, înainte de închidere ?> , adăugați următorul cod (împrumutat, dar modificat de mine):
/*butoane personalizate de formatare a textului*/ add_action("admin_footer", "ex_quicktags"); funcția eg_quicktags() ( ?>
/*butoane personalizate de formatare a textului*/ add_action ("admin_footer" , "eg_quicktags" ); funcția eg_quicktags()(
 |