Muokatut fontit ovat CSS3: n eniten potentiaalisia piirteitä suunnittelijoille. Fontti-kasvosäännön avulla voit tehdä minkä tahansa fontin, jonka verkossa on verkkosivustossa, riippumatta siitä, onko käyttäjä asentanut sen vai ei.
Kuten useimmissa CSS3-tekniikoissa, peruskoodi on melko yksinkertainen, mutta käytännön todellisuus on hieman monimutkaisempi.
Tässä lyhyessä opetusohjelmassa käsittelemme mukautettuja kirjasimia sisältäviä perusasioita sivuillesi.
Varmista ensin, että haluamasi fontti on lisensoitu verkkokäyttöön. Lähes kaikkia ilmaisia kirjasimia voi käyttää verkkosivustossa, ja monet premium-fontit ovat käytettävissä lisenssillä, joka kattaa verkon käytön.
Seuraavaksi lähetä valittu fontti palvelimelle. Voit halutessasi tallentaa sen omistettu "fonts" hakemistoon, mutta tämä on valinnainen.
Muista sisällyttää tiedostot minkä tahansa käytettävän fontin muunnoksille, kuten lihavoidulle tai kursiiville. Voit käyttää EOT (Embedded OpenType) -tiedostoja Internet Explorerille ja OTF (OpenType) tai TTF (TrueType) muille. (Muita vaihtoehtoja ovat WOFF (Web Open Font Format) ja SVG (Scalable Vector Graphics), mutta pysymme yleisempiä tyyppejä täällä.)
Merkitse, missä fontitiedostot tallennetaan palvelimelle.
Avaa HTML- tai CSS-tiedosto sivulle, jossa työskentelet. Lisää fonttikohtainen ilmoitus tyyppikoodiin:
@font-face {}Ensin font-face- osion sisällä anna fontille nimi, jota voit myöhemmin käyttää viittaamaan siihen:
font-family: 'lovelyFont';Seuraavaksi, säilytä EOT-tiedoston sijainti edelleen font-face- osion sisällä:
src: url('fonts/lovely_font.eot');Vaihda fontin sijainti ja nimi tarvittaessa. Seuraavaksi lisää OTF- ja / tai TTF-fontti:
src:url('fonts/lovely_font.otf')src:url('fonts/lovely_font.ttf') Tämä on välttämättömän koodin paljaat luut, joka riittää monissa tapauksissa. On kuitenkin olemassa muita vaiheita, joita voimme tehdä koodin luotettavuuden parantamiseksi. Laajenna tämä osio ensin sisällyttämällä kirjasintyypin tyyppiin indikaattori:
src:url('fonts/lovely_font.otf')format('opentype');src:url('fonts/lovely_font.ttf')format('truetype');Toisena vaihtoehtoisena tehokkuusmittauksena saamme selaimen tarkistaa fontin paikallinen kopio siinä tapauksessa, että käyttäjällä on jo se. Laajenna koodi uudelleen seuraavasti, lisäämällä siihen paikallisen osan ennen URL-osoitteen määrittämistä, niin että fontti ladataan vain tarvittaessa:
src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.ttf')format('truetype');Lisäys on sama sekä OTF: lle että TTF: lle. Määritämme fontin nimen paikallisen avainsanan jälkeen.
Tässä tapauksessa meillä on kaksi riviä, jotka määrittelevät paikallisen fontin, koska fontin nimessä on useampi kuin yksi sana. Yhdistelmällä varustettu versio tyydyttää fonttien nimeämisen tiettyihin käyttöjärjestelmiin - tämä ylimääräinen rivi ei ole välttämätön, jos fontilla on vain yksi sana sen nimessä. Jos tiedät, että kirjasimella voi olla erilaisia nimiä eri järjestelmissä, sisällytä kaikki paikallisen osaston mahdollisuudet.
Lopuksi voimme soveltaa fonttia sivun elementteihin. Yksittäisen elementin tai elementtiryhmän CSS-koodissa määritellään vain käyttämäsi fontin nimi, mukaan lukien valitut varat:
div { font-family: 'lovelyFont', sans-serif; }Jos esimerkiksi haluat käyttää fontin lihavoitettua versiota, lisää vain toinen kirjasinkoko- osio, jossa on lihavoitu fontti-URL-osoite ja "font-weight: bold;" -ilmoitus. Määritä fontin paino lihavoiduksi mille tahansa elementille, jossa sille on määritetty mukautettu fontti ja selain tekee automaattisesti lihavoitun version:
/*default version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font.eot');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');}/*bold version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font_bold.eot');src:local('Lovely Font Bold'),local('Lovely-Font-Bold'),url('fonts/lovely_font_bold.otf')format('opentype');font-weight: bold;}/*container element*/div { font-family: 'lovelyFont', sans-serif; }/*span elements inside the container div*/span { font-weight: bold; }Se siitä!
Käytätkö CSS3: a laajennettaessa käytettävissä olevia tyyppisiä kasvoja? Käytätkö palvelua, kuten Adoben Typekit tai Googlen Webfonts? Kerro meille kommentit.