În dezvoltarea web, utilizarea corectă a stilului fontului oferă aplicației un aspect atractiv. Aceste stiluri de font oferă indicii vizuale despre ordinea de citire a documentului. De exemplu, stilul de font al titlului documentului trebuie să fie aldine și semnificativ față de ceilalți. De asemenea, stilul ajută la distingerea conținutului important de alții.
Rezultatele învățării din acest articol sunt:
- Ce sunt Google Web Fonts?
- Cum se importă fonturi Google în HTML?
- Cum să utilizați fonturile Google în fișierul CSS?
Ce sunt Google Web Fonts?
Fontul web Google este o bibliotecă open-source care conține sute de stiluri sau familii de fonturi. De asemenea, oferă API-uri care ne ajută să folosim fonturi Web cu Android și CSS. Fonturile Google sunt mult mai ușoare decât alte biblioteci de fonturi și sunt disponibile gratuit pentru utilizare în afaceri. Acestea sunt mai ușor de implementat pe orice site web.
În mod implicit, CSS oferă stiluri de font fantasy, serif, Sans serif, cursive și monospace. Fonturile Google pot fi utilizate dacă doriți să utilizați alte stiluri de font.
Cum se importă fonturi Google în HTML?
Pentru a utiliza fonturile Google pe o pagină HTML, parcurgeți următorii pași.
Pasul 1: Selectați familia de fonturi
Mai întâi, deschideți Fonturi Google site-ul oficial și selectați fontul care vă place. De exemplu, am ales „ Homar doi ' familie de fonturi:
Pasul 2: Selectați stilurile
Apoi, derulați în jos pentru a vedea lista de stiluri. Adăugați-le în colecția dvs. făcând clic pe „ + ' semn:
Pasul 3: Vizualizați familiile selectate
Pentru a vizualiza familiile selectate, faceți clic pe pictograma evidențiată mai jos:
Pasul 4: Copiați linkul pentru a încorpora în HTML
După aceea, derulați în jos și copiați linkul familiei de fonturi folosind „ Copie pictograma ”:
Cum să utilizați fonturile Google în fișierul CSS?
Pentru a utiliza copia Google Fonts în CSS pentru stil, parcurgeți exemplele date.
Exemplul 1
Includeți un „ ” element pentru a specifica un conținut sau un paragraf:
< p > „Cel mai bun site de tutoriale” p > Pentru a importa fonturile Google, inserați codul copiat în „
Element de stil „p”.
p {familie de fonturi: „Homar doi” , cursiv;
text-align: centru;
dimensiunea fontului: 45px;
culoare: rgba ( 64 , 3 , 162 , 0,8 ) ;
}
Următoarele proprietăți CSS explicate sunt aplicate HTML-ului „ ' etichetă:
- „ familie de fonturi ” este atribuit cu valoarea “ „Homar doi”, cursiv ”. Această familie de fonturi este importată din Google Fonts.
- „ aliniere text ” ajustează alinierea textului.
- „ marimea fontului ” determină dimensiunea fontului.
- „ culoare ” setează culoarea fontului.
Imaginea arată că familia de fonturi a fost aplicată cu succes:
Exemplul 2
Să luăm un alt exemplu pentru a importa „ Nerko Unu ” Font Google. În acest scop, inserați din nou codul pentru adresa URL a fontului Google „Nerko One” în „
Element de stil „p”.
p {familie de fonturi: „Nerko One” , cursiv;
grosimea fontului: 300 ;
dimensiunea fontului: 30px;
}
„ familie de fonturi ”, “ grosimea fontului ', și ' marimea fontului „Proprietățile sunt aplicate HTML” ' element.
Ieșire
V-am învățat cum să importați fonturi web Google în fișierul CSS.
Concluzie
Pentru a importa fonturi Google în CSS, accesați mai întâi Fonturi Google site-ul oficial și selectați stilul fontului. Apoi, copiați codul care conține „ @import ” și inserați-l în fișierul CSS sau în fișierul „