Johdanto CSS-fontin ominaisuuksiin
CSS Font Properties tarjoaa ääriviivat CSS: n fonttiominaisuuksista. Cascading Style Sheets, joka tunnetaan nimellä CSS, on helppo suunnittelukieli, jonka tarkoituksena on tehdä tuottavista verkkosivuista entistä yksinkertaisempia. CSS käsittelee verkkosivun ulkonäköä ja kokemusta. CSS: n avulla pystyt hallitsemaan väriä tekstillä, fonttityyliä, kappaleiden välistä etäisyyttä, sarakkeiden kokoa ja esitystä, käytettäviä taustakuvia tai värejä, asettelutyylejä, näytössä näkyviä variantteja useita laitteita sekä näytön koko useiden muiden efektien lisäksi. CSS on myös helppo ymmärtää ja ymmärtää, mutta se antaa HTML-asiakirjan esittelyn tehokkaan hallinnan. Useimmiten CSS yhdistetään yleensä merkintäkielten HTML tai yksinkertaisesti XHTML kanssa.
- CSS viittaa CSS-tyylisivuihin.
- CSS tunnistaa, kuinka HTML-elementit tulisi näyttää näytöllä, paperilla ja myös koostua mediasta.
- CSS säästää paljon työtä. Se voi hallita useiden verkkosivujen asettelua yhdellä kertaa.
- Ulkoiset tyylisivut säilytetään CSS-tiedostoissa.
Selitä CSS: n eri fonttiominaisuudet
Alla on eri CSS-fonttiominaisuudet:
Fonttikokoelma: CSS: ssä voit valita fontin, jota haluat käyttää tietyn elementin sisällä olevassa tekstissä, asettamalla fonttiperheen ominaisuuden tyylisääntöön, mutta ennen kuin tutustumme fonttiperheen yksityiskohtiin, meidän on ymmärrettävä kuinka käyttää fontinimiä, koska luomme verkkosivua emme aina tiedä, mitä käyttäjämme käyttää verkkosivun katsomiseen.
Määritä viisi kirjasintyyppiä standardi CSS: ssä
- Ensimmäinen näistä luokista on serif-fonttiluokat. Esimerkki tietystä fontista, joka sopisi tähän luokkaan, olisivat Times tai Times New Roman sekä Baskerville, Century ja Schoolbook
- Nämä ovat erityisiä fontinimiä, kuten Baskerville, Century ja Schoolbook; nämä ovat fontinimet, jotka saatat nähdä avattavassa luettelossa, kun valitset fonttia tekstinkäsittelyohjelman sisällä, koska tekstinkäsittelyohjelma tietää tarkalleen, mitä koneellesi on asennettu. Mutta CSS: ssä kaikki nämä kirjasimet kuuluisivat serif-fonttiluokkaan.
- Siellä on myös joukko sans-serif-fontteja ja suosittu fontti, joka kuuluu tähän luokkaan, on Arial. Jos et tiennyt, serif, niin kirjeen lopussa on pieniä rivejä, ne tekevät kirjaimista hieman hienoja ja koristellut. Voit nähdä eron alla olevissa R-kirjaimissa.
- Vasemmalla oleva R on Arial, joka on sans-serif, kirjaimellisesti ilman koristeita, kun taas oikealla oleva R on Times New Roman ja se sisältää muutaman pienen lisäiskuvan täällä ja siellä. Yleisesti ottaen ihmisten on sans-serif-fontteja helpompi lukea nestekidenäytöllä ja LED-näytöllä.
- Siellä on myös luokkia korsitiivisille fontteille, jotka näyttävät hiukan käsinkirjoitetuilta kirjaimilta ja fantasiafonteilta, jotka saattavat näyttää miltä tahansa, mutta useimmissa malleissa ei aiota käyttää näitä fontteja voimakkaasti, koska ne voivat olla vaikea lukea ja myös hieman arvaamaton.
- Lopuksi on luokka yksipaikkaisille fontteille. Nämä ovat kirjasimet, jotka jakavat yhden välin jokaiselle kirjaimelle, ja se on todennäköisesti kirjasin, jota haluat käyttää tekstieditorissa, jota käytät CSS: n luomiseen, ja myös fontti, jota haluat käyttää verkkosivulla koodin näyttämiseen Nettisivu.
Tulokset selaimessa:
lähtö:
Tulokset selaimessa:
lähtö:
Tulokset selaimessa:
lähtö:
Tulokset selaimessa:
lähtö:
Tulokset selaimessa:
lähtö:
Fonttiperheet
Selityksen alla näkyvät fonttiperheet:
- Monet CSS-mallit asettavat fonttiperheen ominaisuuden tietyn kirjasimen, kuten Arial, nimeksi. On kuitenkin aina mahdollista, että haluamasi fontti kuten Arial, ei ole käytettävissä tietyssä käyttäjän järjestelmässä. Ja se on yksi syy, jonka avulla voit määrittää pilkuilla erotetussa luettelossa niin monta fonttia kuin haluat ja selain käyttää ensimmäistä vastaavaa.
Edellä olevan kuvakaappauksen mukaan meillä on ensimmäinen valinta, toinen valinta ja jos kumpaakaan näistä kirjasimista ei ole käytettävissä, palaa takaisin yleiseen sans-serif-tyyppiin, koska vaikka selaimessa ei olisi muita sen tarjoamia fontteja kyseisen luokan oletusfontti. Tietysti se herättää kysymyksen siitä, mitä fontteja on turvallista käyttää web-suunnittelussa. Yleisesti ottaen et voi mennä pieleen Arialin, Verdanan, Timesin ja Courierin kanssa, mutta olemme myös antaneet tässä luettelon muista kirjasimista, jotka ovat yleensä saatavana useilla alustoilla.
- Helvetica on yleinen kirjasinlaji, joka näkyy monissa tyylitaulukoissa, mutta Helvetica ei ole käytettävissä Windowsissa. Windows tarjoaa sen sijaan Arialin.
- Fonttiperhe on yksi niistä ominaisuuksista, joka on peritty. Joten jos asetamme sen rungon tasolle, kappaleen ja osien sekä ankkurien, jotka ovat rungon sisällä, poiminta on kyseinen kirjasinperhe oletuksena, ellemme ohita sitä. Joten esimerkiksi tämä otsikko täällä, tämä h1-tunniste, perii kirjasinperheen runosta, mutta sen ei tarvitse olla tällainen.
lähtö:
Voimme sanoa, että h1: n fonttiperheen tulee olla Times New Roman, Serif ja jos päivität verkkosivut, muutos on heijastunut.
Fonttikoko ja tyylit
Alla yksityiskohtaiset tiedot fontin koosta ja tyyleistä:
- Toinen ominaisuus fonteille, joita haluat hallita, on koko ja kokoa määritettäessä on ensin valittava absoluuttisten tai suhteellisten yksiköiden välillä.
- Absoluuttiset koot määritetään yleensä pikselinä ja pikselit antavat sinulle erittäin tarkan hallinnan fonttikoossa.
- Suhteelliset yksiköt, kuten prosenttimäärät tai suuremmat tai pienemmät avainsanat tai ems, sallivat sinun asettaa fonttikoko jonkin perusviivan perusteella, joten 2em olisi kaksinkertainen lähtötasoon ja 0. 8em olisi 80% perusviivasta. Monet ihmiset käyttävät nykyään ems: ää fonttien suhteellisen koon muuttamiseen. Yksi syy on suhteelliset koot, joiden avulla käyttäjä voi skaalata tekstiä selaimellaan, ja tämä on asia, jota he ehkä haluavat tehdä, koska teksti on heille vaikea nähdä. Suhteelliset koot antavat sen toimia.
Tulokset selaimessa:
lähtö:
- Jotkut muut fontin ominaisuudet, jotka voit asettaa, ovat kirjasintyyli, joka pakottaa kursivoidun fontin, tai fontin paino, jotta kirjasin tehdään lihavoituna. Ja font-variant ominaisuus tuo käyttöön kirjasintyypin, joka käyttää vain isoja kirjaimia.
Tulokset selaimessa:
lähtö:
- Ensimmäinen asia, jonka haluamme tehdä, on vähentää sitä h1-elementtiä hieman. Sen on oltava h1-elementti, koska se on tämän sivun ensisijainen otsikko, mutta se on hiukan liian suuri näkökulmallemme. Joten haluan asettaa fonttikokoksi 1, 2ems. Se vähentää sitä hiukan, koska tyypillisesti h1-tagi tulee olemaan selvästi yli 1.2ems. Seuraava kysymys, jota haluamme käsitellä, on täällä oleva koodiluettelo. Haluamme, että tämä on monospace-fontti, ja tämän saavuttamiseksi on pari erilaista halua. Alla olevalle koodille.
Tulokset selaimessa:
lähtö:
Tulokset selaimessa:
lähtö:
Haluamme käyttää esitunnistetta, mikä tarkoittaa, että tämä on esimuotoiltu teksti, äläkä yritä manipuloida sitä.
Tulokset selaimessa:
lähtö:
Se on kirjasintyylin lyhennetyt ominaisuudet. Kuten kirjasintyyppinen kursivointi, fonttikoko 0.9em ja fonttiperheen serif;
Tulokset selaimessa:
lähtö:
johtopäätös
Kuinka määrittää fontit CSS: llä ja ero tietyn kirjasimen, kuten Arial, ja yleisten web-fonttiluokkien, kuten serif ja sans-serif, välillä. Hallitsemme myös fonttikokoa ja etuja ja haittoja suhteellisten kokojen verrattuna absoluuttisiin kokoihin. Lopuksi käytämme fontin ominaisuuksia ja opimme lataamaan fontteja fonttiperheeseen.
Suositellut artikkelit
Tämä on opas CSS-kirjasinominaisuuksiin. Täällä olemme keskustelleet erilaisista CSS-fonttiominaisuuksista ja viidestä kirjasinluokasta standardin CSS: ssä selaimen tulosten ja tuotosten kanssa. voit myös käydä läpi toisen ehdotetun artikkelin saadaksesi lisätietoja-
- Mikä on CSS?
- Johdanto CSS: ään
- Ura CSS: ssä
- CSS: n edut