CSS Academy · Oppitunti

Google Fonts ja @font-face

Lataatte ulkoisia fontteja Google Fontsista tai määritätte mukautettuja fontteja @font-face-säännöllä.

Oppitunti 4/413 vaihetta

Google Fonts ja @font-face on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Miksi mukautettuja fontteja?

Verkkoturvalliset fontit tarjoavat vain kourallisen vaihtoehtoja. Mukautettujen fonttien avulla brändin ilme voidaan sovittaa tarkasti. Kaksi pääasiallista lähestymistapaa ovat Google Fonts (isännöity palvelu) ja @font-face (itse isännöity).

Google Fonts -määritys

Siirtykää osoitteeseen fonts.google.com, valitkaa fonttiperhe ja tarvittavat paksuudet ja kopioikaa <link>-tagi HTML:n <head>-osaan:

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

Google Fonts -fonttien käyttö CSS:ssä

Kun fontti on linkitetty, viitatkaa siihen nimellä font-family-pinossa:

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

Google Fonts API -parametrit

display=swap-parametri käyttää Font Display Swap -strategiaa: teksti näytetään heti varafontilla ja vaihdetaan mukautettuun fonttiin sen latauduttua. Tämä estää tekstin näkymättömyyden latauksen aikana.

@font-face-perusteet

@font-face-säännön avulla voitte ladata itse isännöimänne mukautetun fonttitiedoston. Määrittäkää fonttiperheen nimi ja tiedoston lähde:

<p class="brand-text">Custom brand typeface text</p>

WOFF2: nykyaikainen muoto

WOFF2 (Web Open Font Format 2) on suositeltu muoto. Se tarjoaa parhaan pakkauksen (tyypillisesti 30 % pienempi kuin WOFF), ja kaikki nykyaikaiset selaimet tukevat sitä. Sisällyttäkää aina WOFF varamuodoksi.

Useita paksuuksia @font-face-säännöllä

Määrittäkää yksi @font-face-lohko jokaista paksuuden ja tyylin yhdistelmää kohden. Käyttäkää samaa font-family-nimeä, jotta selain valitsee oikean tiedoston automaattisesti:

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

font-display-ominaisuus

font-display-kuvaaja hallitsee fontin latauskäyttäytymistä:

swap — näyttää varafontin heti ja vaihtaa fontin sen valmistuttua (suositeltu)
block — teksti pysyy näkymättömänä enintään 3 sekunnin ajan
fallback — lyhyt estojakso, jonka jälkeen käytetään pysyvästi varafonttia
optional — käytetään vain, jos fontti on jo välimuistissa

<p class="swap-text">Text swaps in once Inter loads.</p>

Muuttuva fontti @font-face-säännöllä

Muuttuvat fontit määrittävät akselialueita kiinteiden paksuusarvojen sijaan:

<p class="variable-text">Variable weight text (550)</p>

Tärkeimpien fonttien esilataus

Esiladatkaa tärkein fonttitiedostonne renderöintiä estävän viiveen vähentämiseksi. Lisätkää <link rel="preload"> ennen tyylitiedostoa:

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

local() latauksen ohittamiseen

Käyttäkää local()-funktiota src-määrityksessä tarkistamaan, onko fontti jo asennettu käyttäjän laitteelle, ennen sen lataamista:

<p class="roboto-text">Uses local Roboto if installed</p>

Pikatarkistus

Mikä fonttimuoto tarjoaa parhaan pakkauksen ja laajimman tuen nykyaikaisissa selaimissa?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Google Fonts tarjoaa helposti käyttöön otettavia isännöityjä fontteja <link>-tagin avulla. Isännöikää fontit itse @font-face-säännöllä, käyttäkää WOFF2-muotoa ja parhaan suorituskyvyn saavuttamiseksi font-display: swap-määritystä. Esiladatkaa tärkeät fontit ja käyttäkää local()-funktiota tarpeettomien latausten välttämiseksi.

Aloita maksutta

Opi CSS tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Google Fonts ja @font-face” ilmainen?

Kyllä – oppitunnin ”Google Fonts ja @font-face” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Google Fonts ja @font-face”?

Lataatte ulkoisia fontteja Google Fontsista tai määritätte mukautettuja fontteja @font-face-säännöllä. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Google Fonts ja @font-face”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?

Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: CSS Academy