Mukautettujen Fonttien Lisääminen Verkkosivulle
Fontit ovat keskeisessä roolissa verkkosivun visuaalisen ilmeen parantamisessa. Suunnittelijat luovat lukuisia mieleenpainuvia ja kauniita fontteja, jotka jättävät käyttäjiin pysyvän vaikutuksen. Huonosti suunnitellut fontit voivat vaikeuttaa verkkosivun huomion saamista. Onneksi on olemassa resursseja, jotka tarjoavat ilmaisia fontteja kaikkien käyttöön. On kuitenkin tärkeää huomioida, että osa fonteista on lisensoituja ja vaativat oston, joten tekijänoikeuksia tulee kunnioittaa rikkomusten välttämiseksi.
Google Fonts -palvelu
Monia mielenkiintoisia 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 kirjoitetaan halutun fontin nimi. Tässä tapauksessa se on "DM Sans." Kun fontti tulee näkyviin, valitse "DM Sans" -kortti.
Fontin sivulla valitse "Get font" -painike.
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 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
Can you explain how to use the custom font in my CSS after adding the link?
What should I do if the font doesn't appear correctly on my page?
Are there any best practices for choosing and loading web fonts?
Awesome!
Completion rate improved to 2.56Mukautettujen Fonttien Lisääminen Verkkosivulle
Pyyhkäise näyttääksesi valikon
Fontit ovat keskeisessä roolissa verkkosivun visuaalisen ilmeen parantamisessa. Suunnittelijat luovat lukuisia mieleenpainuvia ja kauniita fontteja, jotka jättävät käyttäjiin pysyvän vaikutuksen. Huonosti suunnitellut fontit voivat vaikeuttaa verkkosivun huomion saamista. Onneksi on olemassa resursseja, jotka tarjoavat ilmaisia fontteja kaikkien käyttöön. On kuitenkin tärkeää huomioida, että osa fonteista on lisensoituja ja vaativat oston, joten tekijänoikeuksia tulee kunnioittaa rikkomusten välttämiseksi.
Google Fonts -palvelu
Monia mielenkiintoisia 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 kirjoitetaan halutun fontin nimi. Tässä tapauksessa se on "DM Sans." Kun fontti tulee näkyviin, valitse "DM Sans" -kortti.
Fontin sivulla valitse "Get font" -painike.
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 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!
