Jos olet uusi web-suunnittelun parissa, saatat ajatella jotain tällaista: "Miksi minun pitäisi rajoittaa itseni tähän? pieni setti fontit? Minulla on valtava kokoelma kauniita fontteja!” Tosiasia on, että vierailijan selain voi näyttää vain ne fontit, jotka on asennettu hänen käyttöjärjestelmä (noin kääntäjä: Tällä hetkellä sivuja ja sen uutta ominaisuutta suunniteltaessa on jo mahdollista käyttää käytännössä mitä tahansa fonttia @font-face; kaikki selaimet eivät kuitenkaan vielä tue tätä toimintoa), mikä tarkoittaa sitä joka sivusi vierailijan on oltava valitsemiesi fonttien omistaja. Siksi sinun tulee käyttää vain fontteja, jotka ovat saatavilla kussakin käyttöjärjestelmässä. Onneksi CSS:llä on omaisuus @fonttiperhe, mikä helpottaa tätä tehtävää.
Lista
| @fonttiperheen merkitys | Windows | Mac | Perhe |
|---|---|---|---|
| Arial, Helvetica, sans-serif | Arial | Arial, Helvetica | sans-serif |
| "Arial Black", Gadget, sans-serif | Arial musta | Arial Black, vempain | sans-serif |
| "Comic Sans MS", kursiivinen | Comic Sans MS | Comic Sans MS 5 | kursiivinen |
| "Courier New", Courier, yksitila | Kuriiri Uusi | Courier Uusi, Courier 6 | monospace |
| Georgia, Serif | Georgia 1 | Georgia | serif |
| Impact, Charcoal, sans-serif | Vaikutus | Impact 5, Charcoal 6 | sans-serif |
| "Lucida Console", Monaco, monospace | Lucida konsoli | Monaco 5 | monospace |
| "Lucida Sans Unicode", "Lucida Grande", sans-serif | Lucida Sans Unicode | Lucida Grande | sans-serif |
| "Palatino Linotype", "Book Antiqua", Palatino, serif | Palatino Linotype, Kirja Antiqua 3 | Palatino 6 | serif |
| Tahoma, Geneve, sans-serif | Tahoma | Geneve | sans-serif |
| "Times New Roman", Times, serif | Times New Roman | Ajat | serif |
| "Trebuchet MS", Helvetica, sans-serif | Trebuchet MS 1 | Helvetica | sans-serif |
| Verdana, Geneve, sans-serif | Verdana | Verdana, Geneve | sans-serif |
| Symboli | Symboli 2 | Symboli 2 | - |
| Webdings | Verkkoyhteydet 2 | Verkkoyhteydet 2 | - |
| Wingdings, "Zapf Dingbats" | Wingdings 2 | Zapf Dingbats 2 | - |
| "MS Sans Serif", Geneve, sans-serif | MS Sans Serif 4 | Geneve | sans-serif |
| "MS Serif", "New York", serif | MS Serif 4 | New York 6 | serif |
1 Georgia- ja Trebuchet MS -kirjasimet toimitetaan Windows 2000/XP:n mukana, ja ne sisältyvät IE-fonttipakettiin (ja monien Microsoft-sovellusten mukana), joten ne on asennettu moniin Windows 98 -tietokoneisiin.
2 Merkkifontit näytetään vain Internet Explorer, muissa selaimissa ne yleensä korvataan standardi fontti(vaikka esimerkiksi Symbol-fontti näkyy Operassa ja Webdings Safarissa).
3 Book Antiqua -kirjasin on lähes identtinen Palatino Linotype -kirjasimen kanssa; Palatino Linotypen mukana tulee Windows 2000/XP ja Book Antiquassa Windows 98.
4 Huomaa, että nämä fontit eivät ole TrueType-, vaan bittikarttoja, joten ne saattavat näyttää huonoilta joissakin kooissa (ne on suunniteltu näyttämään 8, 10, 12, 14, 18 ja 24 pisteen tarkkuudella 96 DPI).
5 Nämä fontit toimivat Safarissa vain vakiotyylillä, mutta eivät lihavoituna tai kursivoituina. Comic Sans MS toimii myös lihavoituna, mutta ei kursiivilla. Muut Mac-selaimet näyttävät pystyvän emuloimaan puuttuvia kirjasinominaisuuksia yksinään (kiitos Christian Fecteaulle vinkistä).
6 Nämä fontit asennetaan Maciin vain Classic-asennuksella
Kuvakaappaukset
- Mac OS X 10.4.8, Firefox 2.0, ClearType käytössä (kiitos Juris Vecvanagsille kuvakaappauksesta)
- Mac OS X 10.4.4, Firefox 1.5, ClearType käytössä
- Mac OS X 10.4.11, Safari 3.0.4, ClearType käytössä (kiitos Nolan Gladiusille kuvakaappauksesta)
- Mac OS X 10.4.4, Safari 2.0.3, ClearType käytössä (kiitos Eric Zaveskylle kuvakaappauksesta)
- Windows Vista, Internet Explorer 7, ClearType käytössä
- Windows Vista, Firefox 2.0, ClearType käytössä (kiitos Michiel Bijlille kuvakaappauksesta)
Kun aloitat asettelun luomisen, sinun on määritettävä erikseen CSS:ssä sivulla käytetyt fontit. Usein erilaisia fontteja suunnittelija kirjoittaa sivun päätekstin lisäksi myös erilaisia otsikoita, logoja ja monogrammeja.
Hyvä suunnittelija, kuten hyvä taittosuunnittelija, tietää, että selain voi käyttää sivun näyttämiseen vain niitä fontteja, jotka on asennettu käyttäjän tietokoneeseen. Eli fontit voidaan jakaa kahteen luokkaan:
- Fontit, joita suurin osa käyttäjistä näyttää ilman ongelmia.
- Fontit, joita sinulla on tarpeeksi iso ryhmä käyttäjiä ei ole.
Jos suunnittelija käytti toisen luokan kirjasimia luodakseen esimerkiksi logon tai suuria staattisia otsikoita, et voi epäröidä käyttää tekniikkaa, jolla teksti korvataan kuvalla. Tämän tekniikan käytön haittana on joustamattomuus. Jos tekstissä tapahtuu muutoksia, sinun on tehtävä kuva uudelleen ja muutettava CSS (esimerkiksi jos mitat uusi kuva ei vastaa vanhaa).
Voimme sanoa, että tekniikan käytön vaara riippuu suoraan tekstin muuttamisen todennäköisyydestä. Siksi esimerkiksi sivun yleistä tekstiä ei voi kirjoittaa epätyypillisillä fonteilla! Osaava suunnittelija ei koskaan tekisi tätä. Ja jos suunnittelija törmää vihreään, hyvä taittosuunnittelija on yksinkertaisesti velvollinen korjaamaan virheensä - korvaa se taittossa tämä fontti mahdollisimman samanlainen kuin tavallinen.
Mutta miten voidaan erottaa ensimmäisen ryhmän fontit toisesta? On selvää, että et voi luottaa suoraan tietokoneellesi asennettuihin kirjasimiin! Selvitetään se.
Vakiofontit
Vakiofontit ovat kirjasimia, jotka asennetaan käyttöjärjestelmän mukana. Koska käyttöjärjestelmät ovat erilaisia, niiden fontit ovat erilaiset. Luettelo vakiofonteista Windows-versiot Näet esimerkiksi artikkelissa Tavalliset Windows-fontit ja luettelon tavallisista Mac OS -fonteista sivulla Mac OS:n mukana tulevat kirjasimet. Mitä tulee Unix/Linux-käyttöjärjestelmiin, niillä ei ole yhtä fonttisarjaa. monet Linuxin käyttäjiä käytä DejaVu-fonttisarjaa, erityisesti Ubuntussa ne on asennettu oletusarvoisesti. http://www.codestyle.org-sivuston tilastojen mukaan monilla Unix/Linux-käyttäjillä on asennettuna myös URW, Free ja muut fonttisarjat. Samojen tilastojen mukaan yli 60 %:lla Unix/Linux-käyttäjistä on kirjasimia tietokoneessaan Ydinsarja kirjasimia Webille, joka oli virallisesti saatavilla vuoteen 2002 asti ilmainen lataus Microsoftin verkkosivuilla.
Jotta sivu näkyy suunnittelijan tarkoittamalla tavalla missä tahansa käyttöjärjestelmässä, on mahdollista CSS-ominaisuus font-family määrittää useita fontteja pilkuilla erotettuina.
Tämä ominaisuus määrittää priorisoidun luettelon kirjasinten perheiden nimistä ja/tai yleisistä sukunimistä. CSS2-spesifikaation mukaan kirjasinperheen nimiä on kahdenlaisia:
- Valitsemasi kirjasinperheen nimi. Esimerkiksi "Times new Roman", "Arial" ja muut. Välilyöntejä sisältävät kirjasimen sukunimet tulee laittaa lainausmerkkeihin. Jos lainausmerkit puuttuvat, kaikki fontin nimen edessä ja jälkeen olevat välilyönnit ohitetaan, ja kaikki fontin nimen välilyönnit muunnetaan yhdeksi välilyönniksi.
- Yleinen (yleinen) perhe. Spesifikaatio määrittelee seuraavat yleiset perheet:
- serif - fontit, joiden päissä on serifit;
- sans-serif - sans-serif-fontit;
- kursiivi - kursivoitu fontit;
- fantasia - koristeelliset fontit;
- monospace - monospace fontti (samanleveät kirjaimet).
Esivanhempien sukujen nimet ovat avainsanoja eikä sitä tarvitse laittaa lainausmerkkeihin.
Suunnittelua varten otetaan siis vakiofontti OS Windowsista, valitaan samanlainen Mac OS:lle ja Unix/Linuxille, määritetään yhteinen kirjasinperhe, ja olet valmis.
Mutta se ei ole niin yksinkertaista. Kaivetaan tarkemmin.
Verkkoturvallisten fonttien löytäminen
Internetissä käsite "turvalliset" verkkokirjasimet on kehittynyt historiallisesti. Turvallinen fontti on fontti, joka on vakiona kaikissa käyttöjärjestelmissä. Koska voimme vain haaveilla tällaisesta tilasta, ei ole olemassa täysin turvallisia fontteja!
Joitakin fontteja voidaan kutsua turvallisiksi tietyin varauksin.
"Turvallisten" fonttien määrittelyn perustana olivat yleisimmän Windows-käyttöjärjestelmän fontit, joita käytetään myös muissa käyttöjärjestelmissä. Esimerkki tällaisesta käytöstä on jo mainitut Web-fonttipaketin Core-fontit, jotka tilastojen mukaan monet Unix/Linux-käyttäjät ovat ladanneet.
Tämä paketti sisältää seuraavat fontit: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Kaikki ne tukevat kyrillisiä aakkosia, mikä on tärkeää Runetille.
Mac OS X:n vakiofontit (tämä käyttöjärjestelmä on laajimmin käytetty Mac OS:n käyttäjien keskuudessa) sisältää kaikki fontit Web-ydinfonteista.
Näin ollen muissa käyttöjärjestelmissä käytettyjen Windows-fonttien perusteella a seuraava lista niin sanotut "turvalliset" verkkokirjasimet:
- Arial
- Arial musta
- Comic Sans MS
- Kuriiri Uusi
- Georgia
- Vaikutus
- Times New Roman
- Trebuchet MS
- Verdana
Webdings-fontti sisältää kuvakkeita, eikä sitä voi käyttää sisältöön. Andale Monoa ei käytetä laajalti, koska se ei sovellu päivittäiseen tekstin lukemiseen näytöltä eikä kaikilla ole sitä Windows-käyttäjät.
Jokaisella Windows-, Mac OS X -käyttäjällä ja suurimmalla osalla Unix/Linux-käyttäjistä (eli niillä, jotka ovat asentaneet Web-paketin Core-fontit) on kaikki nämä kirjasimet.
Mutta entä loput? Loppujen lopuksi haluat, että suunnittelijan suunnitelma nähdään mahdollisimman paljon suurempi määrä käyttäjiä!
Kyrillisyyttä tukevat fontit
RuNetin erityinen ominaisuus on ongelma sivujen koodauksissa ja kirjasimien kyrillisen tuen kanssa. Välttääksesi ongelmia eri merkkikoodauksissa, fiksut ihmiset keksitty Unicode, jonka avulla voit yhdistää useiden kielten merkkejä yhteen fonttiin. Siksi venäjänkielisillä sivuilla on käytettävä vain Unicode-fontteja, jotka tukevat kyrillistä.
Alla on taulukko kirjasinten vastaavuuksista.
| Windows | Mac käyttöjärjestelmä | Unix/Linux | esi-isien perhe |
|---|---|---|---|
| Arial musta | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
| Arial | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
| Comic Sans MS | Monaco CY | * (Katso alempaa) | kursiivinen |
| Kuriiri Uusi | * (Katso alempaa) | Nimbus Mono L | Monospace |
| Georgia | * (Katso alempaa) | Century Schoolbook L | Serif |
| Vaikutus | Charcoal C.Y. | * (Katso alempaa) | Sans-serif |
| Times New Roman | Times C.Y. | Nimbus Roman No9 L | Serif |
| Trebuchet MS | Helvetica C.Y. | * (Katso alempaa) | Sans-serif |
| Verdana | Geneve C.Y. | DejaVu Sans | Sans-serif |
* fonttia vastapäätä olevassa sarakkeessa tarkoittaa alkuperäistä kyrillistä Windows-vastineet Käyttöjärjestelmässä ei ole fonttia. Mutta samaan aikaan on suuri todennäköisyys, että tämä kirjasin asennetaan suoraan käyttöjärjestelmään.
Jos esimerkiksi asettelun pääteksti on Arial, löydämme tämän fontin taulukosta ja kirjoitamme vastaavan rivin CSS:ään:
body (fonttiperhe: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )
keho ( font - perhe: Arial, "Helvetica CY", "Nimbus Sans L", sans - serif; |
Tämä merkintä tarkoittaa, että jos käyttäjällä on Arial-fontti (ja kaikki Windows-käyttäjät ja kaikki Mac-käyttäjät OS X), sivu näytetään tällä fontilla. Jos käyttäjällä ei ole tätä fonttia, venäjänkielisen Mac OS 9 -käyttäjän sivu näytetään ehdottomasti vakiona järjestelmän fontti Helvetica CY, ja Unix/Linux-käyttäjälle se näytetään Nimbus Sans L -kirjasimella, joka on asennettu 90 %:lle Unix/Linux-käyttäjistä. Jos Unix/Linux-käyttäjä on siinä 10 %:ssa, jolla ei ole tätä kirjasinta, sivu näytetään serif-kirjasimella, joka on oletusarvoisesti asetettu Web-sivujen katseluun.
Sen lisäksi, että taulukossa on huomioitu Unix/Linux-fontit, tavallisen Helvetican jälkeen löytyy myös outo CY-kuvake. Selvitetään mikä se on!
Ennen Mac OS X:n julkaisua tällä rivillä oli seuraava merkitys: Windows-käyttäjille näytämme sivun Arialissa, Mac OS 9 -käyttäjille tavallisella Helvetica-kirjasimella ja loput sivut näkyvät järjestelmässä. sans-serif-fontti, joka on oletusarvoisesti määritetty selaimessa. Mutta taas tärkeä vivahde! U tavallinen Mac OS 9 Helvetica -fontti ei kyrillistä! Venäjänkieliselle sivulle tämä tarkoitti seuraavaa: Windows-käyttäjille näytämme Arial-sivun, Mac OS 9 -käyttäjille - tavallisella Helvetica-kirjasimella, joka näyttää lukukelvotonta tietoa, ja loput näkevät sivun järjestelmällä sans-serif. fontti on oletusarvoisesti määritetty selaimessa.
Jotta tämä sarja näytetään oikein Mac OS 9 -käyttäjille, on järkevää määrittää sama standardi Mac OS 9 -fontti Helvetica CY, joka sisältää kyrillisen Helvetican.
Viivainten lukeminen on muuttunut Mac OS X:n julkaisun jälkeen. Windows/Mac OS X:lle on nyt määritetty yksi yleinen standardifontti. Ja jos haluamme, että Mac OS 9 -käyttäjät näkevät suunnittelijan tarkoituksen, meidän on sisällytettävä kirjasinriville kyrillinen kirjasin.
Joten vaikka turvallisia kirjasimia ei ole, on olemassa turvallisia kirjasinperheitä. Niitä kutsutaan myös fontin CSS-pinot. Tavallisten Windows/Mac OS X -fonttien lisäksi näillä riveillä voi olla myös vastaavia fontteja standardi setti Mac OS 9 (joka ei sisällä "turvallisia" fontteja oletuksena) ja yleiset Unix/Linux-fontit.
Jokainen taittosuunnittelija kohtaa ennemmin tai myöhemmin hetken, jolloin suunnittelija käyttää asettelussa fonttia, joka ei ole "turvallisten" kirjasinten luettelossa; Mutta tämä ei ole vielä syy soittaa hälytystä! Esimerkiksi suunnittelijat käyttävät hyvin usein asetteluissa Tahoma-fonttia, joka ei sisälly tähän luetteloon. Oikein rakennettu fonttirivi avaa mahdollisuuden käyttää Tahoman lisäksi myös muita fontteja. Kaikki Suuri määrä suunnittelijat käyttävät tätä tilaisuutta hyväkseen ja pätevän taittosuunnittelijan tulee tietää siitä.
Alla on lisäpöytä fontit, jotka eivät sisälly "turvallisten" luetteloon, mutta joita voidaan käyttää asetteluissa.
| Windows | Mac käyttöjärjestelmä | esi-isien perhe |
|---|---|---|
| Lucida konsoli | Monaco | Monospace |
| Lucida Sans Unicode | Lucida Grande | Sans-serif |
| Tahoma | Geneve C.Y. | Sans-serif |
Entä jos kyrillisiä aakkosia ei ole?
Englanninkielisten tekstien osalta yllä olevat taulukot näyttävät hieman erilaiselta.
| Windows | Mac käyttöjärjestelmä | Unix/Linux | esi-isien perhe |
|---|---|---|---|
| Arial musta | Gadget | Nimbus Sans L | Sans-serif |
| Arial | Helvetica | Nimbus Sans L | Sans-serif |
| Comic Sans MS | Monaco | TSCu_Comic | kursiivinen |
| Kuriiri Uusi | Kuriiri | Nimbus Mono L | Monospace |
| Georgia | * (Katso alempaa) | Century Schoolbook L | Serif |
| Vaikutus | Puuhiili | Rekha | Sans-serif |
| Times New Roman | Ajat | Nimbus Roman No9 L | Serif |
| Trebuchet MS | Helvetica | Garuda | Sans-serif |
| Verdana | Geneve | DejaVu Sans | Sans-serif |
Arial-, Courier New- ja Times New Roman -fonttien kohdalla viivaimia luotaessa on parempi määrittää ensin Unix/Linux-fontti ja sitten Mac OS -fontti. Tämä johtuu Linux X11 -ydinfonttisarjan vinoista.
Fontit, jotka eivät sisälly "turvallisten" luetteloon, mutta joita voidaan käyttää asetteluissa, määritellään paremmin tämän taulukon perusteella CSS-kirjasinpinoilla.
| Windows | Mac käyttöjärjestelmä | Unix/Linux | esi-isien perhe |
|---|---|---|---|
| Lucida konsoli | Monaco | - | Monospace |
| Lucida Sans Unicode | Lucida Grande | Garuda | Sans-serif |
| Palatino Linotyyppi | Palatino | Garuda** | Sans-serif |
| Tahoma | Geneve | Kalimati | Sans-serif |
Viiva Unix/Linux-sarakkeessa osoittaa, että näiden käyttöjärjestelmien käyttäjät näkevät todennäköisesti sivulla oletuskirjasimen.
** Tällä rivillä on järkevää sijoittaa Garuda-fontti ennen Palatinoa (katso selitys yllä).
Johtopäätökset:
- Täysin turvallisia fontteja ei ole olemassa. Seuraavia fontteja voidaan pitää ehdollisesti turvallisina:
- Arial
- Arial musta
- Comic Sans MS
- Kuriiri Uusi
- Georgia
- Vaikutus
- Times New Roman
- Trebuchet MS
- Verdana
- Turvalliset CSS-pinot, jotka ottavat huomioon kyrillisten aakkosten tuen kirjasimissa, löytyvät artikkelista.
- Jos kyrillisten aakkosten tuki ei ole tärkeä sivulla, käytämme artikkelin CSS-pinoja.
Yksi web-suunnittelun päätehtävistä on oikean valinta vakiofontit. Fontin upotuspalvelut, kuten Google Web Fonts tai Typekit, luotiin vaihtoehtona tavoitteena tarjota jotain uutta.
Ne ovat erittäin helppokäyttöisiä. Otetaanpa esimerkkinä Google-palvelu Web-fontit.
Valitse fontiksi Open Sans, Droid Serif tai Lato. Kirjoita koodi ja liitä se elementtiin HTML-dokumentti. Olet valmis viittaamaan siihen CSS:ssä! Koko prosessi kesti enintään 60 sekuntia. Ja kaikki on täysin ilmaista.
Mikä voisi olla vialla?
Jotkut kirjasimet eivät välttämättä ole kaikkien saatavilla. Ja tämä tarkoittaa, että ongelmia voi ilmetä. Oletko tyytyväinen valitsemaasi? kaunis fontti sivustolle, ja verkkosivun vierailija näkee sen sijaan ruman tekstin.
Tätä ei tapahdu, jos otat käyttöön varavaihtoehdon.
Kuinka tärkeää on käyttää turvallisia verkkokirjasimia?
Jokaisessa laitteessa on omat esiasennetut fontit. Kumpi riippuu käyttöjärjestelmästä. Ongelmana on, että niiden välillä on pieniä eroja.
Entä verkkosivustot? Niinkuin tämä? Näkemäsi kirjasin ei ehkä ole se, joka alun perin määritettiin sivustolle.
Mitä se tarkoittaa? Oletetaan, että suunnittelija on valinnut sivustolle maksullisia kirjasimia. Jos sinulla ei ole niitä asennettuna eikä niitä tarjoa erityinen verkkopalvelu, näkemäsi fontti on yksi vakiovaihtoehdot. Esimerkiksi Times New Roman.
Siksi näytölläsi oleva teksti voi näyttää yksinkertaisesti kamalalta.
Ja täällä sivuston vakiofontit saatavilla kaikissa käyttöjärjestelmissä. Tämä on pieni kokoelma saatavilla Windowsille, Macille, Googlelle sekä Unixille ja Linuxille.
Tämän valinnan avulla suunnittelijat ja verkkosivustojen omistajat voivat määrittää, mitä fonttia käytetään varafonttina. Tämä antaa sinulle mahdollisuuden hallita, miltä sivu näyttää eri laitteilla.
Varavaihtoehtona kehittäjä valitsee fontin, joka on hyvin samanlainen kuin alkuperäinen, ja tämä näytetään käyttäjälle.
Katsotaanpa valikoimaa suosituimmista vakiofontit HTML.
15 parasta verkkoturvallista fonttia
Arial
Useimmissa tapauksissa sitä pidetään vakiona. Yleisin fontti" ilman serifiä"tai sans serif fontit ( joissa ei ole serifejä kirjainten lopussa). Sitä käytetään usein Windowsissa korvaamaan muita merkkejä.
Helvetica
Helvetica on hengenpelastaja suunnittelijoille. Tämä tavallinen verkko fontti toimii lähes aina ( Tekijä: vähintään, turvaverkkona muille fonteille).
Times New Roman
Palvelee samaa roolia serif-fonteille kuin Arial sans serif-fonteille. Se on yksi suosituimmista Windows-laitteet. Tämä päivitetty versio vanha Times fontti.
Ajat
CSS standardi fontti The Times on tuttu useimmille. Monet ihmiset muistavat hänet pienin kirjaimin vanhojen sanomalehtien kapeilla sarakkeilla. Yleisin painatusmuoto, josta on tullut perinne.
Kuriiri Uusi
Samanlainen kuin Times New Roman ja käytetty muunnelmana vanhoista klassikoista. Sitä pidetään myös yksivälisenä fonttina. Toisin kuin serif- ja sans serif -fonteissa, sen kaikilla merkeillä on sama leveys.
Kuriiri
Vanha kiinteän levyinen kirjasin, jota käytetään varavarana melkein kaikissa laitteissa ja käyttöjärjestelmissä.
Verdana
Verdanaa voidaan perustellusti pitää todellisena verkkofontina ( todellinen verkkofontti) kiitokset yksinkertaiset linjat, joka toimii serifeinä sekä suurikokoinen. Sen kirjaimet ovat hieman pitkulaisia, joten ne on helppo lukea näytöltä.
Georgia
Standardiverkkokirjasin Georgia on muodoltaan ja kooltaan samanlainen kuin Verdana-fontti. Sen merkit ovat suurempia kuin muut samankokoiset fontit. Mutta on parempi olla käyttämättä sitä yhdessä muiden kanssa. Sama Times New Roman näyttää kääpiöltä verrattuna.
Palatino
Palatino juontaa juurensa renessanssin aikakaudelle. Ei vitsejä. Tämä on toinen iso fontti, joka sopii erinomaisesti Internetiin. Sitä käytetään yleisesti otsikoissa ja mainoksissa.
Garamond
Toinen muinainen kirjasinlaji, joka juontaa juurensa 1500-luvulta Pariisissa. Sen uusi ja parannettu versio on vakiona useimmissa Windows-laitteissa. Myöhemmin tämä kirjasin otettiin käyttöön muissa käyttöjärjestelmissä.
Bookman
Kirjamies ( tai Bookman Old Style) - Yksi parhaat standardifontit otsikoille. Sen ominaispiirre on luettavuus myös pientä kokoa käytettäessä.
Comic Sans MS
Comic Sans MS on hauska vaihtoehto serif-fonteille.
Trebuchet MS
Tämä on keskiaika-aiheinen fontti, jonka Microsoft kehitti alun perin 1990-luvun puolivälissä. Sitä käytettiin Windows XP:ssä. Nykyään sitä käytetään päätekstin säveltämiseen.
Arial musta
Analoginen sivuston vakiofontti Arial. Totta, se on suurempi, paksumpi ja kovempi. Sen mittasuhteet ovat samanlaiset kuin Helvetica-fontissa. Ja onko se tärkeää. He voivat Helvetican korvaaminen onnistuneesti ilman lisenssin ostamista.
Vaikutus
Toinen loistava fontti otsikoiden korostamiseen. Se toimii hyvin lyhyessä lauseessa, joka koostuu useista sanoista, sekä pitkissä lauseissa.
Tämä luettelo sisältää kaikille nykyisille Windows-käyttöjärjestelmille yhteiset fontit (itse asiassa Windows 98:sta lähtien) ja niitä vastaavat Mac OS -käyttöjärjestelmät. Tällaisia fontteja kutsutaan joskus "selaimen turvallisiksi fonteiksi" ( selaimen turvalliset fontit). Tämä on pieni hakuteos, jota käytän Web-sivuja tehdessäni ja uskon, että siitä on hyötyä myös sinulle.Jos olet uusi web-suunnittelun parissa, saatat ajatella jotain tällaista: "Miksi minun pitäisi rajoittua niin pieneen joukkoon kirjasimia? Minulla on valtava kokoelma kauniita fontteja!” Tosiasia on, että vierailijan selain voi näyttää vain ne fontit, jotka on asennettu hänen käyttöjärjestelmä ( noin kääntäjä: Tällä hetkellä on jo mahdollista käyttää käytännössä mitä tahansa kirjasimia sivujen suunnittelussa CSS 3:lla ja sen uudella ominaisuudella @font-face; kaikki selaimet eivät kuitenkaan vielä tue tätä toimintoa), mikä tarkoittaa sitä joka sivusi vierailijan on oltava valitsemiesi fonttien omistaja. Siksi sinun tulee käyttää vain fontteja, jotka ovat saatavilla kussakin käyttöjärjestelmässä. Onneksi CSS:llä on omaisuus @fonttiperhe, mikä helpottaa tätä tehtävää.
Lista
| @fonttiperheen merkitys | Windows | Mac | Perhe |
|---|---|---|---|
| Arial, Helvetica, sans-serif | Arial | Arial, Helvetica | sans-serif |
| "Arial Black", Gadget, sans-serif | Arial musta | Arial Black, vempain | sans-serif |
| "Comic Sans MS", kursiivinen | Comic Sans MS | Comic Sans MS 5 | kursiivinen |
| "Courier New", Courier, yksitila | Kuriiri Uusi | Courier Uusi, Courier 6 | monospace |
| Georgia, Serif | Georgia 1 | Georgia | serif |
| Impact, Charcoal, sans-serif | Vaikutus | Impact 5, Charcoal 6 | sans-serif |
| "Lucida Console", Monaco, monospace | Lucida konsoli | Monaco 5 | monospace |
| "Lucida Sans Unicode", "Lucida Grande", sans-serif | Lucida Sans Unicode | Lucida Grande | sans-serif |
| "Palatino Linotype", "Book Antiqua", Palatino, serif | Palatino Linotype, Kirja Antiqua 3 | Palatino 6 | serif |
| Tahoma, Geneve, sans-serif | Tahoma | Geneve | sans-serif |
| "Times New Roman", Times, serif | Times New Roman | Ajat | serif |
| "Trebuchet MS", Helvetica, sans-serif | Trebuchet MS 1 | Helvetica | sans-serif |
| Verdana, Geneve, sans-serif | Verdana | Verdana, Geneve | sans-serif |
| Symboli | Symboli 2 | Symboli 2 | - |
| Webdings | Verkkoyhteydet 2 | Verkkoyhteydet 2 | - |
| Wingdings, "Zapf Dingbats" | Wingdings 2 | Zapf Dingbats 2 | - |
| "MS Sans Serif", Geneve, sans-serif | MS Sans Serif 4 | Geneve | sans-serif |
| "MS Serif", "New York", serif | MS Serif 4 | New York 6 | serif |
1 Georgia- ja Trebuchet MS -kirjasimet toimitetaan Windows 2000/XP:n mukana, ja ne sisältyvät IE-fonttipakettiin (ja monien Microsoft-sovellusten mukana), joten ne on asennettu moniin Windows 98 -tietokoneisiin.
2 Symbolifontit näkyvät vain Internet Explorerissa muissa selaimissa ne yleensä korvataan tavallisella kirjasimella (vaikka esimerkiksi Symbol-fontti näytetään Operassa ja Webdings Safarissa).
3 Book Antiqua -kirjasin on lähes identtinen Palatino Linotype -kirjasimen kanssa; Palatino Linotypen mukana tulee Windows 2000/XP ja Book Antiquassa Windows 98.
4 Huomaa, että nämä fontit eivät ole TrueType-, vaan bittikarttoja, joten ne saattavat näyttää huonoilta joissakin kooissa (ne on suunniteltu näyttämään 8, 10, 12, 14, 18 ja 24 pisteen tarkkuudella 96 DPI).
5 Nämä fontit toimivat Safarissa vain vakiotyylillä, mutta eivät lihavoituna tai kursivoituina. Comic Sans MS toimii myös lihavoituna, mutta ei kursiivilla. Muut Mac-selaimet näyttävät pystyvän emuloimaan puuttuvia kirjasinominaisuuksia yksinään (kiitos Christian Fecteaulle vinkistä).
6 Nämä fontit asennetaan Maciin vain Classic-asennuksella
Kuvakaappaukset
- Mac OS X 10.4.8, Firefox 2.0, ClearType käytössä (kiitos Juris Vecvanagsille kuvakaappauksesta)
- Mac OS X 10.4.4, Firefox 1.5, ClearType käytössä
- Mac OS X 10.4.11, Safari 3.0.4, ClearType käytössä (kiitos Nolan Gladiusille kuvakaappauksesta)
- Mac OS X 10.4.4, Safari 2.0.3, ClearType käytössä (kiitos Eric Zaveskylle kuvakaappauksesta)
- Windows Vista, Internet Explorer 7, ClearType käytössä
- Windows Vista, Firefox 2.0, ClearType käytössä (kiitos Michiel Bijlille kuvakaappauksesta)
