Kauniita Google-fontteja. Etujen joukossa

Fonttitunniste otettiin käyttöön alusta alkaen vuonna 1995 ja jo vuonna 1996 kirjoitettiin ohjelmallinen määritelmä CSS:ssä. CSS 2.0 -versiosta lähtien kirjasinten lataaminen ja synteesi otettiin käyttöön selaimissa, mutta siitä huolimatta silloin suositussa, mutta nyt vanhassa ja merkityksettömässä IE:ssä ei ollut tukea fonttien lataamiselle, mikä esti kirjasinten käytön nopean kehityksen. sivusto.

Nykyään Internetissä verkkofontit ovat vakiintunut asia. Eri sivustoilla voimme käyttää erilaisia ​​kirjasimia, jotka eivät puolestaan ​​sisälly tietyn käyttöjärjestelmän toimitukseen, mutta niillä on ei-toivottu sivuvaikutus, josta puhumme tänään.

Tiedostomuodot

/ * Ilmoita fontti * / @ font-face (font-family: "Fontin nimi"; src: url ("polku / siihen");) / * Käytä fonttia * / p (font-family: "Font nimi" , Arial;)
TTF tai OTF - meille tuttu fonttitiedosto, joka ladataan palvelimelta sivustoa selatessasi;

WOFF on suojaamaton OTF- tai TTF-lähdearkisto, ehkä tärkein suosituimpien selaimien tukema formaatti, ja WOFF-tiedostot ovat yleensä 2–2,5 kertaa alkuperäisiä kevyempiä;

EOT - sulautettu TT OpenType -arkisto suojamekanismeilla, jota tarvitaan tukemaan vanhoja Internet Explorer -selaimia (IE8:sta alkaen, TrueType-käyrien lisäksi myös PostScript on tuettu);

SVG - tukee Safari-selainta.

Käyttöönottoa varten valmisteltujen fonttien (@ font-face) verkkosivuilla tulisi nykyään olla useissa eri muodoissa kerralla. Ymmärrät, että on joitain eroja, aivan kuten on olemassa useita käyttöjärjestelmiä. Fonttimuotoja on monia, mutta tietty toimii vain tietyssä selaimessa. Mitä tulee samoihin formaatteihin, minkä vuoksi niitä on niin paljon, että sinun on määritettävä yhteyden muodostamisen yhteydessä, niitä tarvitaan sivuston selaimenväliseen tukeen.

@ font-face (font-family: "Font_name_any"; src: url ("Font_file_name.eot"); src: url ("Font_file_name.eot? #iefix") muoto ("embedded-opentype"), url ("Font_file_name" .eot .woff ") -muoto (" woff "), url (" Font_file_name.ttf ") -muoto (" truetype "), url (" Font_file_name.svg # DSNoteRegular ") -muoto (" svg "); fontin paino: normaali ; font -tyyli: normaali;)
Jos haluat käyttää salattua koodia tiedoston sijaan, niin tässä tapauksessa apuumme base64, joka toimii samalla periaatteella kuvien kanssa, mutta vanhalle IE:lle base64:ää ei käsitellä.

@ font-face (font-family: "Font_name_any"; src: url ("Font_file_name.eot");) @ font-face (font-family: "Font_name_any"; src: url (tiedot: font / woff; charset = utf-8; base64, DATA) -muoto ("woff"), url (data: font / truetype; charset = utf-8; base64, DATA) -muoto ("truetype"), url ("Font_file_name.svg # Font_file_name") muoto ("svg"); fontin paino: normaali; fontin tyyli: normaali;)

Upotettu OpenType?

Src: url ("Font_file_name.eot? #Iefix") -muoto ("embedded-opentype")
Klassisessa versiossa meidän piti ilmoittaa sinulle täsmälleen tällä tavalla:

Src: url ("Font_file_name.eot") -muoto ("embedded-opentype")
Mutta kun lisäät "?" fonttimuodon jälkeen pakotamme selaimen olemaan lukematta seuraavaa ohjetta - muoto ("embedded-opentype"). Internet Explorer on tukenut kirjasinten upottamista niin sanotun patentoidun Embedded OpenType -standardin kautta IE 4.0:sta lähtien. Se käyttää digitaalista oikeuksien hallintatekniikkaa estääkseen lisensoitujen kirjasimien kopioimisen.

Entä jos selain ei tue fonttia?

1. Muinaisina aikoina kehittäjät sisällyttivät kuvan, joka puolestaan ​​oli visuaaliseen editoriin kirjoitettua tekstiä. Nyt sitä pidetään kuitenkin huonona muotona, koska tuki on melko vaikeaa (kuvan tekstin muuttamiseksi täytyy avata editori uudelleen), joten käyttäjä ei voi kopioida tekstiä kuvasta.

2. Salamaratkaisujen käyttö oli myös yleistä.

3. Toinen ratkaisu on käyttää Javascriptiä tekstin korvaamiseen VML:llä (Internet Explorer) tai SVG:llä (kaikki muut selaimet).

Mitä muita ongelmia voi ilmetä?

Flash-efekti

Esimerkki fontin lataamisesta:

Silti 2,7 sekuntia on pitkä aika!

Mitä voidaan tehdä?

Jokaisessa kokeessa on kuitenkin sivuvaikutus.

Alun perin Bram Stein käytti mukautettua kirjasinta, mutta fontin lataamisen jälkeen esiintyi "välkkymistä", esimerkissä 0,7 sekuntia:

Lyhyesti sanottuna välkkymistä tapahtuu, kun selain yrittää hahmontaa fontin fonttiperheestä ja käyttää sitä html:ssä. @ font-face -ilmoituksessa määritetty kirjasin, jota ei ole vielä ladattu.

Bram Stein osoitti, kuinka fontit yhdistetään oikein, hän kehitti skriptin, googlen vaihtoehdon fonttien asynkroniseen lataamiseen, tämä on skripti - FontFaceObserver.

Yritetään

Analyysi

Rehellisesti sanottuna useamman kuin yhden kirjasimen käyttäminen sivustossa voi erityisesti hidastaa sivuston sivun latausnopeutta ja pidentää siten kokonaislatausaikaa. Google Fonts -sovellusliittymän avulla voit nopeasti lisätä fontin verkkosivustollesi kirjasingeneraattorin avulla, mikä nopeuttaa verkkosivustosi suunnittelua. On kuitenkin oltava tietoinen FOIT-vaikutuksesta. Kokonaislatausaika on 322 ms.

Googlen Web Font Loader

Web Font Loader on JavaScript-kirjasto edistyneeseen API-työhön, kirjasto, joka antaa meille enemmän hallintaa fonttien lataamiseen kuin tavallinen Google Fonts API. Komentosarjan avulla voimme käyttää monia fontteja lataamalla ne peräkkäin tai asynkronisesti. Toisin kuin tavallinen yhteys, heikot yhteydet näyttävät tekstin tavallisella kirjasimella, kunnes fontti ladataan.
Kokonaislatausaika: 1132 ms

FontFaceObserver

FontFaceObserver on JavaScript-kirjasto (5 kt), niin kutsuttu latausohjelma, joka on yhteensopiva minkä tahansa verkkokirjasinpalvelun kanssa. Skriptin avulla voimme ilmoittaa meille, onko fontti latautunut vai ei, sen avulla voimme seurata tapahtumaa latauksen jälkeen ja ennen fontin lataamista. Kokonaislatausaika: 159 ms

Skriptin käyttö.

Google on luonut avoimen lähdekoodin kokoelman verkkofontteja.
Google Font API:n avulla saat niihin ilmaisen pääsyn, mikä tekee verkkofonttien lisäämisestä sivustollesi helppoa. Se kestää enintään 15 sekuntia! Täysin ilmainen, saat pääsyn valtavaan fonttivarastoon.

Edut sisältävät:

● Laaja valikoima korkealaatuisia verkkofontteja mille tahansa sivullesi.
● tuki näille kirjasimille lähes kaikissa selaimissa (mukaan lukien Explorer 6).
● uskomattoman helppokäyttöinen.
● kirjasinkauppa jatkaa kasvuaan joka päivä.

Alla annan sinulle vaiheittaiset ohjeet venäläisten fonttien löytämiseen ja asentamiseen sivustollesi.

Käytä Google Fonts API:ta seuraamalla tätä linkkiä.

Napsauta kyrillistä painiketta (kuten alla olevassa kuvassa)

Valitse haluamasi kirjasin luettelosta. Napsauta sitten "Käytä tätä fonttia" -välilehteä. Huomaa, että et tarvitse "Lataa"-välilehteä vain, jos haluat käyttää tätä fonttia tietokoneellasi, esimerkiksi Photoshopissa (vaikka Google pyytää, mutta ei vaadi, osallistumaan arkiston tulevaan kehittämiseen). .
Jos aiot käyttää tätä fonttia kursiivilla tai lihavoituna, valitse nimien vieressä olevat valintaruudut.

Huomaa, missä fontin nimi on (alleviivattu vihreällä). Se on tarpeen, jos lisäät kirjasimien nimet manuaalisesti.

Ja voit jo käyttää sitä CSS-tyylitaulukoissa. Lisää vain fontin nimi font-family-ominaisuuteen ja muista lisätä tavallisia verkkokirjasimia loppuun.

h1 (fonttiperhe: "PT Serif", arial, serif;)

Voit myös yhdistää ja käyttää useita fontteja kerralla sivustossasi.
Yhteystietue näyttää tältä. Kuvassa näkyy mikä on mitä.

Vaihtoehtoisesti voit hyödyntää Google-laajennuksia. Sen avulla voit testata fontteja suoraan sivustollasi. Se on erittäin kätevä, näet heti, miltä sivusto näyttää tällä fontilla.

Yhteenvetona voidaan todeta, että tämä Google-luomus on uskomattoman käyttäjäystävällinen. Tämän todistaa se tosiasia, että Smashingmagazine käynnisti verkkosivustonsa uudelleen käyttämällä Googlen kirjasinvaraston Droid-kirjasinta. Tarvitset alle minuutin halutun kirjasimen yhdistämiseen, ja sen yhteysnopeuden tarjoaa Google.

Mitä yhteistä CSS-ominaisuuksilla on? @ font-face ja Googlen verkkofontit?
@ font-face antaa meille mahdollisuuden käyttää kirjasimiamme (ei web-turvallisia kirjasimia) sivuston renderöinnissa. Google antaa meille työkalun nopeaan upottamiseen. Tämän juuri Google loi online-fonttivarasto jotta sinä ja minä voimme käyttää niitä työssämme. Mikä tärkeintä, kaikki fontit ovat täysin ilmaisia ​​ja 100% laillisia. Voitto

Joten miten se kaikki toimii?

Valitsemme tarvitsemamme fontin (luulen, että kyrilliset ja latinalaiset kirjaimet ovat merkityksellisiä täällä. Vai onko ihmisiä Kambodžasta ja Kreikasta?)

Kuvailen kuinka työskentelen kyrillistä kirjasimia sisältävien fonttien kanssa, joka on edelleen äidinkieleni. Googlen arkistossa on vain 8 kyrillistä fonttia, hyvin vähän. Mutta toivon, että työ tähän suuntaan on käynnissä. Tyytyväinen Canonicaliin (Ubuntua valmistava yritys) tarjoamalla ilmaisen pääsyn omalle kirjasimelle käyttöjärjestelmästä Ubuntu 10.10... Avoin lähdekoodi on hyvä.

Valitse haluamasi fontti arkistosta Google-fontit ja aloita esikatselu, siellä voit säätää valitun kirjasimen parametreja (fontin koko, kursivoitu tai lihavoitu) ja saada heti koodi sivustollesi.

Valitsemme tarvitsemamme näyttöparametrit, siirrämme liukusäätimiä. Vakiovaihtoehtojen, kuten alleviivauksen ja isojen ja pienten kirjainten muuttamisen, lisäksi voit lisätä tekstiin varjon valitsemalla neljästä yleisimmästä tyypistä. Googlen mukaan tietysti. Myöhemmin voit muuttaa koodia, tehdä sen tarpeen mukaan, mutta vaihtoehto on ehdottomasti välttämätön. Toivon voivani lisätä vaihtoehtoihin tehokkaamman varjoasetuksen. Toistaiseksi, mutta kiitos siitä.

Tarkista tulos esikatseluikkunasta.

Alla on koodi, jota tarvitsemme sivustolle. Voit käyttää sitä tietyin varauksin. Oletuksena Google sisältää kaikki saatavilla olevat kasvot, joskus tämä on tarpeetonta. Voit myös puhdistaa CSS:n poistamalla valitsimet, joita et ole määrittänyt asetusikkunassa.

Kuten näet, css-kirjasimesta vastaavaa valitsinta kutsutaan fontiksi. Jos haluat muuttaa fontin kokoa css:ssä, sinun on kirjoitettava font-size: 15px ja muutettava pikselien lukumäärä haluttuun arvoon. CSS:ssä lihavointi määritetään tällä valitsimella: font-weight: lihavoitu ja niin edelleen.

Vaaditut tyylit ja esimerkki fontin käytöstä sivuelementeille voidaan valita ja nähdä "Käytä tätä fonttia" -välilehdellä.

Todella kätevä juttu tämä Google Font API, voit liittää fontin muutamassa minuutissa, fontteja on suuri valikoima (latinalaisille aakkosille valinta on todella vaikuttava) ja Googlen palvelimet tarjoavat kirjasimen lataamisen nopeuden asiakkaan toimesta.

Ja viimeinen asia. Mikä tahansa fontti css:lle online-tallennustilasta voidaan ladata tietokoneellesi käytettäväksi järjestelmässä. Ja tämä on myös täydellinen on ilmainen, pyytää vain lahjoitusta, joka voi olla 0 dollaria. Täällä kaikki on jo omallatunnollasi, jokainen päättää itse - maksaako vai ei.

Toivottavasti tiedoista oli apua ja opit jotain uutta.

Materiaalin sponsori.
Ilmastointilaitteet verkkokaupassa http://www.technodom.kz/catalog/konditsionery. Ilmastointilaitteet - parhaat tavarat, lainat, valtava valikoima, moitteeton palvelu.

Hyvää iltapäivää rakkaat lukijat. Jokainen teistä todennäköisesti haaveilee omien tai asiakkaiden sivustojen tekemisestä tiiviimmiksi ja houkuttelevammiksi.

Yksi tärkeimmistä tekijöistä, joka on vastuussa sivuston tiedon havaitsemisesta, ovat fontit ja niiden yhteiskäyttö. Koska yhdellä sivustolla käytetään useimmiten kahta tai useampaa fonttityyppiä, esimerkiksi otsikoissa ja vain leipätekstissä.

Yksi mahdollisuus parantaa visuaalisesti tekstien luettavuutta on yhdistää kolmannen osapuolen kirjasimia. Loppujen lopuksi kaikki luultavasti tietävät, mikä on "huono" standardi kyrilliset kirjasimet Windowsissa, joka vastaa tekstin näyttämisestä selaimessa.

Vakiofontit:

Cufon ja @ font-face

Aiemmin kirjoitin jo siitä, jolla voit yhdistää epästandardeja fontteja sivustolle. Katsotaanpa nyt helpompaa tapaa - tämä on @ font-face -sääntö css:ssä ja itse fontin lataaminen Google Fonts -kaupasta.

Koko ero Cufonin ja @ font-facen välillä on se, että edellinen emuloi fonttia js:n avulla ja piirtää symbolit omin keinoin, kun taas @ font-face lataa itse kirjasimen vierailijan tietokoneelle ja selain käyttää sitä jo sen näyttämiseen. teksti.

Joka tapauksessa Cufon ja @ font-face hidastavat sivuston latausnopeutta, vaikkakaan ei merkittävästi.

Google-fonttien käyttö sivustolla

En maalaa paljon ja pitkään, annan erityisen esimerkin Google-kirjasinten yhdistämisestä käyttämällä tätä blogia esimerkkinä.

Kuten näet, artikkelini otsikot ja alaotsikot ovat epätyypillisillä kirjasimilla, joten nyt käytännössä näytän, kuinka tämä tehdään, ja kokeilet sitä sivustoillasi analogisesti.

Fontin valinta arkistosta

Jotta ei pelästyisi, selitän - arkisto on arkisto, mutta porvarillisesti :). Ja niin, mennään http://www.google.com/fonts/ ja etsi itsellemme sopiva fontti:

Ruokalistalla ei paljoa:
Vasemmalla, kuten näet, on lohko kaikenlaisilla fonttihakusuodattimilla, joista voit valita esimerkiksi vain latinalaisia ​​tai kyrillisiä fontteja. Ja päälle, asetukset esimerkkien näyttämiseksi, jotka on jaettu 4 välilehteen:

• Sana- useiden kirjainten näyttö. Tässä tilassa on kätevää verrata useita fontteja kerralla ja nähdä, miltä tietyt merkit näyttävät;
• Tuomita- näyttö yhden lauseen muodossa;
• Kohta- näytetään suuri tekstiosa, jonka avulla voit verrata visuaalisesti jo itse tekstissä olevaa fonttia;
• Juliste- otsikot näytetään, tämä vertailutapa on kätevä otsikoissa käytettävän fontin valinnassa.

Fontin yhdistäminen sivustoon

Siirry sen jälkeen alareunassa olevasta Kokoelma-paneelista Käytä-välilehteen, joka vastaa kokoelmasi fonttien käytöstä. Täällä näet heti, että Google näyttää kuinka paljon sivun latausnopeus heikkenee:

Alla on paneeli, jossa on valittavissa "näyttötyyppi", valitse Latinalainen (latinalainen) ja kyrillinen (kyrillinen), mikä antaa meille mahdollisuuden näyttää sekä latinalaisia ​​että kyrillisiä kirjaimia:

Sen jälkeen siirrymme tämän sivun kolmanteen kohtaan, nimittäin itse yhteyteen. Google tarjoaa meille kolme vaihtoehtoa kirjasimien upottamiseen - js:n kautta, tavallinen tapa on muodostaa yhteys ja @import css-tiedostossa. Käytän jälkimmäistä menetelmää.

Avaa css-tiedostosi ja kirjoita Googlen meille antama rivi:

Siinä kaikki, liitimme kirjasimen Google Fontsista sivustoon, miten sitä nyt käytetään?

Käyttö CSS:ssä

Kaikki on melko yksinkertaista, kun olemme yhdistäneet fontin @importin kautta, meidän on kirjoitettava vakioohjeet niille luokille ja indikaattoreille, joihin uutta fonttiamme käytetään. Esimerkiksi:

h1, h2, h3 (fonttiperhe: 'Cuprum', sans-serif;)

Kaikkien näiden manipulointien jälkeen sinulla on otsikot uudella, ei-standardilla kirjasimella.

Siinä kaikki, kiitos huomiosta ja nähdään pian.

Google Fonts on yksi suurimmista arkistoista todellisuudessa, jossa on satoja kirjasintyyppejä. Sen monipuolisuuden ja yleisen saatavuuden vuoksi lähes kaikki tavallisten kirjasimien oletuskäytön kohta menetetään. Palvelun avulla voit toteuttaa erilaisia ​​epätyypillisiä esimerkkejä.

Tästä artikkelista löydät valikoiman 10 ilmaista Google-fonttia, jotka ovat ihanteellisia verkkosivustojen otsikoille. Ne on asennettu moniin verkkoprojekteihin ympäri maailmaa. Materiaali on käännös tästä viestistä Jake Rocheleaulta.

Jos et ole varma, kuinka tämä toiminto yhdistetään, voit katsoa viestiä aiheesta - siinä on pari esimerkkiä.

1. Montserrat

Koska lihavoitut muunnelmat ovat hyvin tummia, sinun tulee käyttää katamaraania vain suurissa nimikkeissä. Se näyttää melko hyvältä melkein joka tapauksessa, mutta joskus se tuntuu liian raskaalta ja tiukalta.

7. PT Sans

Jos käytät WordPress CMS:ää verkkoprojektissasi, suosittelemme lukemaan artikkelin kirjasimien yhdistämisestä WordPressissä, jossa pohditaan myös menetelmää Google Fontsilla.