Tämä sivu sisältää ohjeet fontin ja sen värin muuttamiseksi verkkosivulla. HTML5: n käyttöönotolla oikea tapa määrittää verkkosivujen fontit on käyttää CSS-tyylisivuja. Vanha menetelmä, jolla käytetään inline-tyyliominaisuutta tai kirjasintunnistetta, on vanhentunut, eikä sitä pitäisi enää käyttää.
Merkintä
Vaikka vanhentuneet menetelmät saattavat silti toimia oikein nykyaikaisissa Internet-selaimissa, niillä ei enää ole takuuta tehdä niin. Luo verkkosivuja, jotka näkyvät oikein suurimmalle osalle käyttäjiä, käyttämällä tällä sivulla kuvattuja CSS-menetelmiä.
Merkintä
Jos etsit apua kirjasimen ulkoasun mukauttamiseen Microsoft Word -asiakirjassa, katso kuinka muuttaa fontin väriä, kokoa tai tyyppiä Wordissa.
CSS: n käyttö yhdessä sovelluksessa
Jos aiot muuttaa fontin kasvot ja sen värin vain kerran verkkosivulla, määritä sen määritteet elementtitunnisteessa. Käyttämällä tyyli määrite, voit määrittää fontin ja värin font-family, värin ja fontin kokoa kirjasinkokoa, kuten on esitetty alla olevassa esimerkissä.
Esimerkki koodi
Tekstin fontti on Courier, se on sininen ja 20px.
Tulos
Tässä tekstissä on Courier-fontti, se on sininen ja kooltaan 20px.
CSS: n käyttö yhdellä tai useammalla sivulla
Muokattu fontti yhdelle sivulle
Voit lisätä verkkosivun yläosaan koodin välilehtien väliin muuttaaksesi tekstin ulkoasua eri elementteissä. Seuraava sininen ruutu sisältää esimerkkikoodin, joka, kun sitä kutsutaan, muuttaisi kirjasinpinta Courier-väreksi ja värisi sen punaiseksi. Kuten voitte nähdä, olemme määritellyt luokan nimen "mukautetuksi".
.custom {kirjasinperhe: Courier; väri: punainen; kirjasinkoko: 20px; }
Kun muotoilu on määritetty, sitä voidaan soveltaa useimpiin sivusi elementteihin liittämällä niihin luokka "mukautettu". Seuraava ruutu näyttää kaksi koodiriviä ja niiden tulokset.
esimerkki
Koko lause on punainen ja kuriiri
Vain sanatesti on punainen ja kuriiri.
Tulos
Koko lause on punainen ja kuriiri.
Vain sanatesti on punainen ja kuriiri.
Muokattu fontti monille sivuille
Ulkoisen CSS-tiedoston tuominen voi olla erittäin hyödyllistä, koska sen avulla käyttäjät voivat muuttaa sääntöjä useille sivuille samanaikaisesti. Seuraavassa osassa on esimerkki CSS-perustiedoston luomisesta, joka muuttaa fonttia ja sen väriä useimmille elementeille. Tämä tiedosto voidaan ladata useampaan kuin yhteen verkkosivuun, jopa koko sivustoon.
Jos käytät mitä tahansa perustekstieditoria, seuraavan tekstin tallentaminen.css-tiedostoksi valmistelee sitä tuontia varten.
@charset "utf-8";
.kuriiri {kirjasinperhe: kuriiri; väri: # 005CB9; }
Kun edellinen teksti on sijoitettu.css-tiedostoon (meille on annettu nimeksi basic.css), voit linkittää siihen miltä tahansa muulta sivulta seuraavan esimerkin kaltaisella rivillä.
Kärki
Käyttäjät voivat muuttaa sivun elementtien määritteitä muuttamalla tuodun.css-tiedoston koodia.
Kirjasintunnisteratkaisu
Vaikka HTML-tunniste on vanhentunut, sitä voidaan silti käyttää, ja se voi olla tarpeen käyttää joidenkin verkkopalvelujen kanssa. Kun käytät FONT-tunnistetta, sinun on sisällytettävä kasvotunnus, joka kuvaa käytettävää fonttia. Oheisessa esimerkissä käytämme Courier-kirjasinta ja heksadesimaalista värikoodia # 005CB9 , joka on tummansininen.
Esimerkki koodi
Erityinen fonttiesimerkki.