Paano Mag-import ng Google Web Font sa CSS?

Sa web development, ang tamang paggamit ng font styling ay nagbibigay ng kaakit-akit na hitsura sa application. Ang mga estilo ng font na ito ay nagbibigay ng mga visual na pahiwatig tungkol sa pagkakasunud-sunod ng pagbabasa ng dokumento. Halimbawa, ang istilo ng font ng heading ng dokumento ay dapat na naka-bold at makabuluhan mula sa iba. Nakakatulong din ang pag-istilo na makilala ang mahalagang nilalaman mula sa iba.

Ang mga resulta ng pag-aaral ng artikulong ito ay:

• Ano ang Google Web Fonts?
• Paano Mag-import ng Mga Google Font sa HTML?
• Paano Gamitin ang Google Fonts sa CSS file?

Ano ang Google Web Fonts?

Ang Google web font ay isang open-source na library na naglalaman ng daan-daang mga estilo ng font o pamilya. Nagbibigay din ito ng mga API na tumutulong sa amin na gumamit ng mga Web font na may Android at CSS. Ang Google Font ay mas magaan kaysa sa iba pang mga library ng font at magagamit nang libre para sa paggamit ng negosyo. Ang mga ito ay mas madaling ipatupad sa anumang website.

Bilang default, nag-aalok ang CSS ng fantasy, serif, Sans serif, cursive, at monospace na mga estilo ng font. Maaaring gamitin ang Google Fonts kung gusto mong gumamit ng iba pang istilo ng font.

Paano Mag-import ng Mga Google Font sa HTML?

Upang gamitin ang Google Fonts sa isang HTML page, dumaan sa mga sumusunod na hakbang.

Hakbang 1: Piliin ang Font Family

Una, buksan ang Mga Font ng Google opisyal na website at piliin ang font na gusto mo. Halimbawa, pinili namin ang ' Lobster Two ” font-family:

Hakbang 2: Piliin ang Mga Estilo

Susunod, mag-scroll pababa upang tingnan ang listahan ng mga istilo. Idagdag ang mga ito sa iyong koleksyon sa pamamagitan ng pag-click sa “ + ' tanda:

Hakbang 3: Tingnan ang Mga Napiling Pamilya

Upang tingnan ang mga napiling pamilya, mag-click sa icon na naka-highlight sa ibaba:

Hakbang 4: Kopyahin ang Link sa I-embed sa HTML

Pagkatapos nito, mag-scroll pababa at kopyahin ang link ng font-family gamit ang naka-highlight na ' Kopya ” icon:

Paano Gamitin ang Google Fonts sa CSS File?

Upang gamitin ang kopya ng Google Fonts sa CSS para sa pag-istilo, dumaan sa mga ibinigay na halimbawa.

Halimbawa 1

Isama ang isang '

” elemento upang tukuyin ang ilang nilalaman o talata: