Mukautettujen Fonttien Lisääminen
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, kun taas toiset vaativat lisenssin; noudata aina tekijänoikeussääntöjä.
Google Fonts -palvelu
Saatavilla on monia mielenkiintoisia fontteja ilmaiseksi. Tutustutaan https://fonts.google.com/ -palvelun tarjoamiin vaihtoehtoihin. Google-fontin lisääminen merkkauskieleen on yksinkertaista.
Aloitetaan seuraavalla esimerkillä, jossa käytetään oletusfonttia. p-elementillä on seuraavat ominaisuudet: font-family (fontin nimi), font-size (fontin koko) ja font-weight (fontin lihavointi).
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/.
Napsauta kuvaa nähdäksesi yksityiskohdat selkeämmin.
"Search fonts" -hakukenttään kirjoita tarvitsemasi fontin nimi. Tässä tapauksessa se on "DM Sans." Kun fontti ilmestyy, napsauta "DM Sans" -korttia.
Fontin sivulla napsauta "Get font" -painiketta.
Seuraavaksi napsauta "Get embed code" -painiketta.
Lopuksi kopioi linkki ja liitä se projektisi HTML-tiedoston <head>-elementtiin. On tärkeää lisätä linkki ennen omaan tyyliisi viittaavaa linkkiä. Näin selain lataa ensin mukautetut fontit ennen kuin se käyttää niitä hyödyntäviä tyylejä. Kun linkki on lisätty, "DM Sans" on käytettävissä mukautettuna fonttina projektissasi. Tarkistetaan lopuksi projektin toimivuus suorittamalla 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
