Mukautettujen Fonttien Lisääminen Verkkosivulle
Fontit vaikuttavat merkittävästi verkkosivuston ulkoasuun ja tunnelmaan. Laadukas typografia parantaa luettavuutta ja tekee suunnittelusta mieleenpainuvamman. Monet fontit ovat ilmaisia käyttää, kun taas toiset vaativat lisenssin; noudata aina tekijänoikeussääntöjä.
Google Fonts -palvelu
Monia kiinnostavia fontteja on saatavilla ilmaiseksi. Tutustutaan https://fonts.google.com/ -palvelun tarjoamiin vaihtoehtoihin. Google-fontin lisääminen merkkauskieleen on yksinkertaista.
Ajetaan ensin seuraava esimerkki, jossa käytetään oletusfonttia. p-elementillä on seuraavat ominaisuudet: font-family (fontin nimi), font-size (fontin koko) ja font-weight (fontin lihavuus).
index.html
styles.css
Font-family-ominaisuus ei toimi, koska projektimme ei vielä tunne "DM Sans" -mukautettua fonttia. Lisätään fontti projektiin käyttämällä https://fonts.google.com/.
"Search fonts" -hakukenttään kirjoita tarvitsemasi fontin nimi. Tässä tapauksessa se on "DM Sans." Kun fontti tulee näkyviin, napsauta "DM Sans" -korttia.
Fontin sivulla napsauta "Get font" -painiketta.
Seuraavaksi napsauta "Get embed code" -painiketta.
Lopuksi kopioi linkki ja liitä se projektisi HTML-tiedostoon <head>-elementin sisälle. On tärkeää lisätä linkki ennen omaan tyyliisi viittaavaa linkkiä. Näin selain lataa ensin mukautetut fontit ennen kuin se soveltaa niitä käyttäviä tyylejä. Kun olet lisännyt linkin, "DM Sans" on käytettävissä mukautettuna fonttina projektissasi. Tarkistetaan lopuksi projektin toimivuus ajamalla se.
index.html
styles.css
Voimme havaita eron mukautetun fontin ja oletusfontin välillä. Lisäksi jokaisella selaimella on omat oletusfonttinsa. Siksi on tärkeää osata käyttää mukautettuja fontteja verkkosivustolla.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Mahtavaa!
Completion arvosana parantunut arvoon 2.56Mukautettujen Fonttien Lisääminen Verkkosivulle
Pyyhkäise näyttääksesi valikon
Fontit vaikuttavat merkittävästi verkkosivuston ulkoasuun ja tunnelmaan. Laadukas typografia parantaa luettavuutta ja tekee suunnittelusta mieleenpainuvamman. Monet fontit ovat ilmaisia käyttää, kun taas toiset vaativat lisenssin; noudata aina tekijänoikeussääntöjä.
Google Fonts -palvelu
Monia kiinnostavia fontteja on saatavilla ilmaiseksi. Tutustutaan https://fonts.google.com/ -palvelun tarjoamiin vaihtoehtoihin. Google-fontin lisääminen merkkauskieleen on yksinkertaista.
Ajetaan ensin seuraava esimerkki, jossa käytetään oletusfonttia. p-elementillä on seuraavat ominaisuudet: font-family (fontin nimi), font-size (fontin koko) ja font-weight (fontin lihavuus).
index.html
styles.css
Font-family-ominaisuus ei toimi, koska projektimme ei vielä tunne "DM Sans" -mukautettua fonttia. Lisätään fontti projektiin käyttämällä https://fonts.google.com/.
"Search fonts" -hakukenttään kirjoita tarvitsemasi fontin nimi. Tässä tapauksessa se on "DM Sans." Kun fontti tulee näkyviin, napsauta "DM Sans" -korttia.
Fontin sivulla napsauta "Get font" -painiketta.
Seuraavaksi napsauta "Get embed code" -painiketta.
Lopuksi kopioi linkki ja liitä se projektisi HTML-tiedostoon <head>-elementin sisälle. On tärkeää lisätä linkki ennen omaan tyyliisi viittaavaa linkkiä. Näin selain lataa ensin mukautetut fontit ennen kuin se soveltaa niitä käyttäviä tyylejä. Kun olet lisännyt linkin, "DM Sans" on käytettävissä mukautettuna fonttina projektissasi. Tarkistetaan lopuksi projektin toimivuus ajamalla se.
index.html
styles.css
Voimme havaita eron mukautetun fontin ja oletusfontin välillä. Lisäksi jokaisella selaimella on omat oletusfonttinsa. Siksi on tärkeää osata käyttää mukautettuja fontteja verkkosivustolla.
Kiitos palautteestasi!
