Fontet ruse për dizajn në internet. Fonte të sigurta. Tani është koha për të përmirësuar dizajnin e robotëve tuaj duke përdorur fontet në internet

Teksti është mënyra kryesore e përcjelljes së informacionit në botë dhe, si rezultat, një nga komponentët më të rëndësishëm të një faqe interneti. Duket e natyrshme dhe logjike në një situatë të tillë që është detyrë e çdo autoriteti në faqe të sigurojë që tekstet e tij të mos jenë shumë informuese dhe të lodhshme, por edhe të duken të mira. Për këtë qëllim, teknologjitë moderne të dizajnit dhe paraqitjes së uebit ofrojnë një arsenal të madh mjetesh. Sot do të flasim për më të rëndësishmit prej tyre - fontin dhe veçoritë e dizajnit të tij në faqet e internetit.

Fonti- Jo vetëm një element dekorativ në sit. Përveç funksionit utilitar të vizualizimit të tekstit, vera luan një rol estetik dhe psikologjik, duke ndikuar në të gjitha aspektet e ndërveprimit me klientin. Një font i theksuar që i ngjan një faqeje estetikisht të këndshme është i lehtë dhe i këndshëm për t'u lexuar, ndërsa një font i paqartë ose i zgjedhur keq e kthen leximin në provë dhe e privon lexuesin nga ndjenjat e pakëndshme. Disa shembuj të zgjedhjes së zgjidhjeve origjinale të shkronjave në hartimin e faqeve të internetit të organizatave jofitimprurëse:

Tani, nëse efekti pozitiv i përdorimit të shkronjave të bukura në sit bëhet i dukshëm për ne, arsyeja e të ushqyerit është për të fajësuar. "Pra, si i përdorni fontet jo standarde në faqen tuaj të internetit?". Çelësi për ta zbuluar këtë qëndron në parimin racional të funksionimit të shkronjave kompjuterike.

Fonti i kompjuterit- një skedar në një format të vetëm që përshkruan një grup shkronjash dhe karakteresh që përdoret nga një program ose sistem operativ për të shfaqur karaktere në ekran. Kjo, për të parafrazuar Wikipedia, ka një sërë aspektesh kryesore që janë të rëndësishme për respektin tonë kur punojmë me fontet në një faqe interneti.

  1. Formati i skedarit të këngës. Skedari është në një font në mënyrë që të mund të modifikohet nga programi në të cilin po punojmë, i cili mund të jetë në një format "program sinkron". Ekziston një model në formatet e fontit kompjuterik, i cili automatikisht krijon problemin e mospërputhjes. Është e rëndësishme t'i kushtoni vëmendje zgjedhjes së fontit, pasi nuk ndikoheni nga programi në të cilin shikohet teksti.
  2. Programi Vikorist OS. Skedari i fontit duhet të jetë fizikisht i aksesueshëm për sistemin në mënyrë që të mund të përdoret për të shfaqur tekstin. Në mendjet e internetit, ky është një mister jo i parëndësishëm. Edhe pse faqja shikohet në shumë kompjuterë të ndryshëm, nuk mund të fajësojmë faktin që ata nuk kanë fontet e nevojshme.
  3. Përshkrimi i grupit të shkronjave dhe karaktereve. Duhet të sigurohemi që fonti të përmbajë glyphs që përshkruajnë të gjitha karakteret në tekst që shfaqen. Për shembull, nëse po përpiqemi të konvertojmë tekstin rus në një font të ndryshëm, si p.sh. glyphs cirilike, nuk mund të gjejmë asgjë.
  4. Cilësimi për shfaqjen e simboleve. Është e nevojshme që të kemi një mënyrë për të informuar programin, që përfshin rishikimin e tekstit, për ato pjesë që mund të shfaqen me shkronja të ndryshme.

Tani, meqenëse i kemi të qarta problemet që lidhen me përdorimin e shkronjave në faqet e internetit, le të shohim se si faqosja aktuale e uebit përballet me to.

Kërkoni një font për faqen tuaj të internetit

Gjëja më e rëndësishme që duhet të bëjmë është të njohim dhe zgjedhim fontin e duhur dhe të shkojmë te:

  • ai mbështet gjuhën e kërkuar (Zokrema, Rusisht)
  • Licenca për fontin lejon që ai të përdoret në faqen e internetit

Nga të cilat ne mund të ndihmohemi nga biblioteka të ndryshme në internet, si fontet komerciale dhe jo komerciale, dhe t'i ndihmojmë ata të gjejnë, rishikojnë dhe testojnë.

  • MyFonts është biblioteka më e madhe e shkronjave në internet, duke ofruar një sistem kërkimi manual me informacion të detajuar për origjinën e secilit font dhe aftësinë për të zgjedhur ose zgjedhur opsione.
  • Google Webfonts- një bibliotekë e shkronjave të disponueshme falas të krijuar nga Google, të gjitha fontet nga ky koleksion mund të jenë të disponueshme lirisht në çdo sajt, dhe Google gjithashtu ofron një ndërfaqe të thjeshtë për instalimin e tyre.
  • Adobe Edge Web Fonts është një shërbim i ngjashëm nga Adobe që ofron një katalog të madh të shkronjave të disponueshme gjerësisht, duke përfshirë kërkimin dhe testimin, dhe mundësinë e futjes së tyre në një faqe interneti.
  • free.type.org.ua - një koleksion shkronjash me ngjyra të lira me një prekje cirilike.

Yakshcho në fontin e emërtuar Yogo Kirilichna nuk është ngulitur dukshëm (KOLLEKSIONI, Museo Sans Cyrillic), më pas Scho riparohet në Piditrimsi Movie, Simal Submiss, Scho Masive, Abo, i bollshëm, Disa biblioteka në internet ofrojnë këtë aftësi; përndryshe, ju mund të përdorni shërbimet e testimit të shkronjave, për shembull:

  • Typetester - testimi dhe nivelimi i shkronjave, duke parë tekstin e testimit me parametra që duhen konfiguruar, si p.sh. madhësia e pikës, hapësira e rreshtave, etj.
  • Wordmark - një shërbim i thjeshtë për testimin e shkronjave të instaluara në një kompjuter, përmes shfaqjes së një fraze testimi, si në hyrje

Fonti mund të përdoret në sajt vetëm nëse e lejon marrëveshja e licencës (EULA) e marrë nga projektuesi ose agjencia. Shumë shitës të shkronjave (duke përfshirë cirilikën, për shembull, ParaType) ofrojnë një licencë të tillë. Si një alternativë për blerjen e një licence ueb për një font nga një agjenci lokale, ekzistojnë Shërbimet e Embedding Font Web. Ata gjithashtu kanë një bibliotekë të shkronjave për t'u dhënë klientëve të tyre mundësinë për të personalizuar fontet dhe për t'i blerë ato nga faqet e tyre të internetit për një tarifë mujore (rishikim i shërbimeve të prokurimit). Më të njohurat në mesin e tyre:

Megjithatë, të gjitha këto shërbime, për shkak të orientimit të tyre, janë kryesisht të orientuara drejt tregut të huaj (i cili përdor alfabetin latin) dhe numri i shkronjave që mbështesin alfabetin cirilik është i vogël. Çmimi i abonimit për këto shërbime është i lartë dhe mund të jetë pengues për një projekt specifik jo-tregtar. Një alternativë e denjë për këtë është përdorimi i shkronjave të zgjeruara lirisht, për shembull nga Google Webfonts ose Adobe Edge Web Fonts, të cilat tashmë janë shpikur dhe po publikohen gjithashtu nga disa projektues dhe agjenci (një raport mbi problemin e licencimit të shkronjave për ueb është publikuar në artikullin A List Apart).

Formatet e shkronjave për ueb

Ka një sërë formatesh të shkronjave desktop dhe ueb që funksionojnë ndryshe në sisteme të ndryshme dhe janë të përshtatshme për detyra të ndryshme. Qindra faqet tona të internetit përdorin formatet më të fundit:

TTF- TrueType është një format i shkronjave kompjuterike të zhvilluara nga Apple që nga vitet 1980 dhe aktualisht po përdoret nga Apple dhe Microsoft në sistemet e tyre operative. Skedarët e shkronjave mund të zgjerohen .ttf.

OTF- OpenType është një format skedari për fontet e zhvilluar së bashku nga Microsoft dhe Adobe për përdorim në sistemet e tyre operative. OpenType ka më shumë fuqi përpunuese se TrueType dhe mbështet një grup karakteresh më të madh në një madhësi skedari më të vogël. OpenType ndër-platformë arrihet duke përfshirë versionet e Windows dhe Mac OS të fontit në një skedar. Skedarët e shkronjave mund të zgjerohen .ttf ose ndryshe otf.

EOT- Embedded OpenType - një format kompakt fonti që shpërndahet në faqet e internetit OpenType, i zhvilluar nga Microsoft. Skedarët e shkronjave të tilla mund të zgjerohen .eot. Formati Embedded OpenType është i pronarit dhe mbështetet nga shfletuesi Internet Explorer.

MIRË- Web Open Font Format - një format i një fonti të ngjeshur OpenType ose TrueType, duke përfshirë një imazh të kontejnerit që përmban fontet origjinale në formatin OpenType ose TrueType. Në këtë rast, fontet e daljes janë të ngjeshur për lehtësinë e transmetimit dhe shoqërohen nga një numër të dhënash që mund të shtojnë njohuri për fontin.

SVG- Grafika vektoriale e shkallëzuar - një gjuhë për paraqitjen e grafikave vektoriale të shkallëzuara, e cila mund të përdoret për të përshkruar dhe shërbyer fontin.

Faqet e internetit shikohen në shfletues të ndryshëm, të cilët gjithashtu funksionojnë në sisteme të ndryshme operative (Windows, Mac OS, Linux, Android, iOS, etj.). Me një font të personalizuar, ne mund të sigurojmë paraqitjen e tij në shumicën e situatave (idealisht në të gjitha). Meqenëse këto opsione nuk janë tërësisht ndër-platformë, ato do të duhet të rregullohen për të arritur të njëjtin qëllim. Rekomandohet që të zgjidhni një kombinim të formateve për futje në sit: TTF, WOFF, EOT, SVG. Qoftë një font TTF ose OTF, ju mund ta konvertoni atë, vikoryst, për shembull, gjeneratorin Fontsquirrel - një shërbim që ju lejon të importoni një font dhe ta shndërroni atë në formatet e kërkuara. Përveç kësaj, ai gjeneron kodin CSS që mund të përdoret për të instaluar më tej fontet në sit.

Nëse përdorni bibliotekën e Google ose Adobe Edge, nuk keni pse të shqetësoheni për formatet. Shërbimi i softuerit i ofruar nga kompanitë ofron mbështetje për fontin në shumicën e llojeve.

Shtimi i shkronjave në faqen e internetit

Vetë aftësia për të krijuar shkronja për përmbajtjen në faqe (ngjashëm me mënyrën se si krijojmë imazhe ose video) sigurohet nga stilet e mia CSS, të cilat janë përgjegjëse për hartimin e të gjithë elementëve në faqe, përfshirë tekstin. Në fazat e hershme të zhvillimit të kësaj teknologjie, ishte e mundur të tregohej se cili font është përgjegjës për shtrembërimin e pamjes së të njëjtit ose elementëve të tjerë. Megjithatë, u tha se ky font ishte fajtor për instalimet në kompjuterin e koristuvach. Si një opsion për t'u "siguruar" nga disponueshmëria e një fonti të caktuar, ishte e mundur të caktohej një numër shkronjash sipas "përparësisë", në mënyrë që sistemi të zgjidhte vazhdimisht kërkimet dhe të zgjidhte opsionin e parë të gjetur në listë. Kjo qasje lindi konceptin i sigurt për fontet në ueb(fontet e ruajtjes së uebit) - një grup shkronjash që instalohen gjerësisht në kompjuterët e përdoruesve të kompjuterit, për shembull, të përfshira në paketën e instalimit të OS, ose thjesht përfitojnë nga popullariteti i tyre i madh.

Statistikat mbi "gjerësinë" e shkronjave të tilla mund të merren duke përdorur shërbimin shtesë cssfontstack.com, i cili gjithashtu ndihmon në ndërtimin e një sekuence të shkronjave "sigurie" për secilën prej tyre.

Me sa duket, të gjitha aftësitë e veglave të ueb-it të asaj periudhe ishin të përqendruara në dhjetëra fontet që përfshiheshin në grupin "të sigurt". Me zhvillimin e CSS, atëherë u bë i mundur "zbatimi" i shkronjave në sit. vendoseni skedarin e shkronjave së bashku me një faqe tjetër në server dhe përdorni atë në kodin e shabllonit në mënyrë që shfletuesi të mund të përdoret për të parë faqen dhe kështu të bëhet i disponueshëm për përdorim në kompjuterin e përdoruesit. Duke përdorur direktivën shtesë @font-face, ajo mbështetet nga më shumë shfletues aktualë dhe shfaqet në më shumë sajte. Gjithashtu, nëse zgjidhni, mos harroni të tregoni opsionet e fontit "siguri" që mund të jenë të disponueshme në rastet kur fonti kryesor rezulton i padisponueshëm për ndonjë arsye. Otje, Fonte po krijohet, modifikohet në serverin zyrtar.

  1. Ne e dimë fontin e kërkuar për formatin TTF ose OTF, verifikojmë që ai mbështet gjuhën që na nevojitet.
  2. Gjeneratori Fontsquirrel i Wikorist për konvertimin e shkronjave nga një shumëllojshmëri formatesh ueb.

1. Është e nevojshme që gjeneratori të krijojë një paketë @font-face, e cila përfshin skedarët e shkronjave (ato duhet të vendosen në server, së bashku me elementët e tjerë të shabllonit) dhe të përgatisë rregullat @font-face, të cilat duhet të jenë vendosur në fillimin e skedarit të stilit në faqen tuaj të internetit, pasi është konvertuar përsëri, në mënyrë që udhëzimet për skedarët e shkronjave të specifikohen saktë.

@font-face ( font-familja: 'myfont'; src: url ('myfont-webfont.eot'); src: url ('myfont-webfont.eot?#iefix') formati ('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#myfont') format('svg '); pesha e shkronjave: normale; stili i shkronjave: normale;

2. Në stile tregohet se disa elementë i nënshtrohen përdorimit të një fonti përveç sintaksës së rregullt CSS.

Është e mundur të përjetoni një efekt shpërbërës. Mund ta falim edhe pak veten Vikorist dhe shërbim i palëve të treta për importimin e shkronjave, për shembull Google Webfonts.

  1. Ne zgjedhim një font nga biblioteka dhe e kontrollojmë atë për të mbështetur gjuhën që na nevojitet.
  2. Në modalitetin "Swedish Victorial", ne zgjedhim opsionin e imazhit që na nevojitet dhe grupet e karaktereve që duhet të mbështesim. Sa më shumë opsione që duam të përdorim, aq më i rëndësishëm është skedari i shkronjave dhe aq më i rëndësishëm do të jetë për ne që të jemi të interesuar. Pra, mos zgjidhni një të pangopur.
  3. Ne kopjojmë kodin që gjenerohet nga sistemi dhe e ngjitim në kodin e shabllonit të faqes midis etiketave para mesazheve të tjera për të .css dosjet.
  4. Është e qartë në stile se disa elementë janë fajtorë për konfuzionin e përdorimit të fontit përveç sintaksës së rregullt CSS, si dhe në radhë të parë.

Çmimi për të paguar për aftësinë për të përdorur fontet jo standarde është një humbje e produktivitetit - faqja do të bëhet më e mbushur me njerëz dhe do të kërkojë më shumë burime kompjuterike. Prandaj, nuk rekomandohet përdorimi i shumë shkronjave jo standarde në një faqe, si dhe paketimi i tyre në tekstin kryesor, të rrethuar nga elementë ngjitur të dizajnit, si titujt ose elementët e lundrimit (një raport mbi problemin e produktivitetit me fontet e përdorura keq Mund ta lexoni në Habré).

Në fund të diskutimit tonë rreth përdorimit praktik të shkronjave të ueb-it në sajte - ka një sërë sajtesh që u japin fonteve të uebit një rol kyç

  • Përkthimi

Tani është koha për të përmirësuar dizajnin e robotëve tuaj duke përdorur fontet në internet

Pa ndërprerje, merezheva drukarna po kalon një periudhë të rrëmujshme të jetës së saj. Përparimet e fundit në teknologji na kanë sjellë një hap më afër botës virtuale të internetit. Croc, çfarë lloj mustaqesh kanë kontrolluar për kaq kohë?

Liria për të përdorur fontet e internetit në mënyrë të sigurt në të gjitha sistemet operative me kabllo është bërë e mundur për shkak të ndikimit të madh të tre faktorëve kryesorë, ndoshta të menjëhershëm, teknologjikë: miratimi i gjerë i rregullave @font-face në shfletues; shfaqja e "përbindëshave të fontit" si Typekit dhe Fontdeck; Krijimi i një formati të ri fonti - një skedar i arkivuar i fontit WOFF.

* Pak nga këto shkronja janë për cirilik, kështu që kjo përzgjedhje është më e përshtatshme për "kontraktuesit". Shpresojmë që disa prej tyre të shfaqen së shpejti, dhe jo më pak shkronja për gjuhët sllovene në cirilik. Shto etiketa

Kur filloni të vendosni një paraqitje, është e nevojshme të specifikoni me kujdes në CSS fontet që do të përdoren në faqe. Më shpesh, me shkronja të ndryshme, projektuesi shkruan jo vetëm tekstin kryesor të faqes, por edhe tituj, logo dhe monograme të ndryshme:

Një projektues i mirë, si dhe një dizajnues i mirë i paraqitjes, e di se shfletuesi mund të përdorë të njëjtat shkronja të instaluara në kompjuterin e projektuesit për të shfaqur faqen. Atëherë fontet mund të ndahen në mënyrë inteligjente në dy kategori:

  1. Fontet që mund të shfaqen lehtësisht nga shumica e zhvilluesve.
  2. Fontet që janë të disponueshme për një grup të madh artistësh çdo ditë.

Nëse një projektues ka përdorur fontet e një kategorie tjetër për dizajn, për shembull, një logo ose tituj të mëdhenj statikë, mund ta përdorni me siguri teknikën. Mungesa e stagnimit të kësaj metode është jofleksibiliteti. Nëse ndryshoni tekstin, do t'ju duhet të ripunoni imazhin dhe të ndryshoni CSS (për shembull, nëse madhësia e imazhit të ri nuk përputhet me atë të vjetër).

Mund të themi se rreziku i stagnimit qëndron në besueshmërinë e ndryshimit të tekstit. Prandaj, për shembull, është e pamundur të shmangni tekstin e ndyrë të një historie duke përdorur shkronja jo standarde! Një projektues kompetent nuk mund ta rregullojë atë kështu. Dhe nëse projektuesi u kap në gjelbërim, stilisti garniy thjesht dëshiron të korrigjojë gabimin e tij - në paraqitje, zëvendësoni këtë font sa më të ngjashëm me atë standard.

Si mund të dalloj fontet e grupit të parë nga një tjetër? Është e qartë se ju nuk mund të fshehni shtypjen e shkronjave të instaluara direkt në kompjuterin tuaj! Le të merremi vesh.

Fontet standarde

Shkronjat standarde janë një grup shkronjash që instalohen njëkohësisht me sistemin operativ. Pjesët e sistemit operativ janë të ndryshme dhe grupi i shkronjave të tyre është i ndryshëm. Një listë e shkronjave standarde për versione të ndryshme të Windows mund të shihet, për shembull, në artikullin Fontet standarde të Windows dhe një listë e shkronjave standarde për Mac OS në faqen Fontet që vijnë me Mac OS. Për shkak se ka sisteme operative Unix/Linux, ato kanë një grup të vetëm shkronjash. Shumë përdorues të Linux përdorin grupin e shkronjave DejaVu, veçanërisht në Ubuntu, i cili është i instaluar në prapaskenë. Bazuar në statistikat e http://www.codestyle.org, shumë përdorues të Unix/Linux kanë të instaluar gjithashtu grupe shkronjash URW, Free dhe të tjera. Bazuar në këto statistika, më shumë se 60% e përdoruesve të Unix/Linux përdorin fontet Core për fontin e ueb-it të vendosur në kompjuterët e tyre, i cili deri në vitin 2002 ishte zyrtarisht i disponueshëm për shkarkim falas në faqen e Microsoft-it.

Në mënyrë që faqja të shfaqet ashtu siç ka menduar projektuesi, pavarësisht nga sistemi operativ, është e mundur në CSS të specifikoni një numër shkronjash që do të jepen në gjendje kome.

Kjo fuqi specifikon një listë prioritare të emrave të familjeve të shkronjave dhe/ose emrave gjenerikë të familjes. Bazuar në specifikimet CSS2, ekzistojnë dy lloje të emrave të familjeve të shkronjave:

  1. Emri i familjes së fontit për përzgjedhje. Për shembull, "Times new Roman", "Arial" dhe të tjerët. Emrat e familjeve të shkronjave, të cilat do të ndihmojnë për të kapërcyer boshllëqet, janë fajtorë për rënien në putra. Meqenëse jastëkët janë të përditshëm, çdo karakter hapësirë ​​para dhe pas emrit të fontit shpërfillet dhe çdo sekuencë e hapësirave në mes të emrit të shkronjave konvertohet në një hapësirë ​​të vetme.
  2. Familje (background) familje. Specifikimi ka familjet e mëposhtme gjenerike:
    • serif - fontet me serif në skajet;
    • sans-serif - font sans-serif;
    • kursive - font për imazhe të pjerrëta;
    • fantazi – shkronja dekorative;
    • monospace - font monospace (me germa të së njëjtës gjerësi).
    Emrat e familjeve stërgjyshore janë fjalë kyçe dhe nuk janë të detyrueshme të shtrihen në këmbë.

Kështu, për dizajnin, merret një font standard nga OS Windows, zgjidhet një i ngjashëm për Mac OS dhe Unix/Linux, specifikohet atdheu origjinal i shkronjave dhe është gati.

Por nuk është kaq e thjeshtë. Le të gërmojmë në raport.

Duke kërkuar për shkronja të sigurta në ueb

Në internet, historikisht ka ekzistuar një koncept i tillë si fontet "të sigurta" në ueb. Një font i sigurt mund të quhet një font që është standard në të gjitha sistemet operative. Mbetjet e një kampi të tillë drejtësie do të humbasin për vdekje, atëherë Nuk ka shkronja absolutisht të sigurta!

Disa nga fontet mund të quhen të sigurta me njëfarë sigurie.

Baza për përcaktimin e shkronjave "të sigurta" ishin fontet e sistemit operativ më të njohur Windows, të cilat përdoren gjithashtu në sisteme të tjera operative. Një shembull i një burimi të tillë janë fontet thelbësore për paketën e shkronjave në ueb, të cilat, siç mund ta merrni me mend, u shkarkuan nga përdorues të panumërt të Unix/Linux bazuar në statistikat.

Kjo paketë përfshin fontet e mëposhtme: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Të gjitha aromat mbështesin alfabetin cirilik, i cili është i rëndësishëm për RuNet.

Seti i shkronjave të përfshira me instalimin standard të Mac OS X (ky OS ka më shumë zgjerim midis sistemeve standarde Mac OS) përfshin të gjitha shkronjat në fontet kryesore për grupin e uebit.

Kështu, bazuar në fontet e Windows që përdoren në sisteme të tjera operative, është formuar një listë e re e të ashtuquajturave shkronja të "sigurta" të uebit:

  • Arial
  • Arial Zi
  • Comic Sans MS
  • Korrier i ri
  • Gjeorgjia
  • Ndikimi
  • Times New Roman
  • Trebuchet MS
  • Verdana

Fonti Webdings është mashtrues për shtypjen e ikonave, kështu që nuk mund ta përdorni për përmbajtje. Andale Mono nuk kërkon përdorim të gjerë, pasi nuk është i përshtatshëm për leximin e përditshëm të tekstit nga ekrani dhe nuk është i disponueshëm për të gjithë përdoruesit e Windows.

Të gjitha këto fonte janë të disponueshme në të gjitha sistemet Windows, Mac OS X dhe, më e rëndësishmja, në sistemet Unix/Linux (ato që kanë instaluar fontet Core për paketën Web).

Por çfarë lidhje me të? Do të doja që ideja e stilistit të ndikohej nga më shumë se një nga njerëzit më të mirë!

Për këtë lexoni në një pjesë tjetër të botimit.

Pjesa e parë e këtij seksioni i kushtohet mësimit rreth shkronjave CSS. Në këtë faqe do të mësoni se si të përfshini fontet para CSS, çfarë janë fontet e ueb-it dhe si të punoni me to, çfarë formatesh të shkronjave ekzistojnë, si përdoret Google Fonts. Le të hedhim një vështrim në mënyrën e thjeshtë për të lidhur një font CSS së pari:

P (font-familja: Verdana; )

Kjo pjesë e vogël e kodit do të thotë se deri në të gjitha etiketat

Shkronja Verdana është ngurtësuar. Fuqia e grupeve të familjes së shkronjave përcakton se cili font ose font do të përdoret. Stili i saktë i shfaqjes në shfletuesin e përdoruesit varet nga lloji i fontit të detyrës të instaluar në kompjuterin tuaj. Nëse keni një font të përditshëm Verdana në kompjuterin tuaj, shfletuesi juaj do të shfaqë fontin dhe do të instalojë cilësimet.

Në ditët e sotme, projektuesit duhej të specifikonin një numër fontesh rezervë për përdorim shtesë, pasi kompjuteri i përdoruesit nuk do të ishte kryesori. Është e mundur që ju të dëshironi të formatoni tekstin në fontin Verdana dhe si rezervë të instaloni fontin Trebuchet MS, Geneva ose ndonjë font tjetër sans-serif. Regjistrohu në këtë mënyrë:

P (font-familja: Verdana, "Trebuchet MS", Gjenevë, sans-serif;)

Përpara përpunimit të këtij kodi, shfletuesi duhet të kontrollojë menjëherë disponueshmërinë e fontit Verdana në kompjuterin e përdoruesit. Si një font aktual, në vend të etiketave

Shfaqet në këtë font. Nëse fonti është i përditshëm, shfletuesi do të kontrollojë nëse fonti është i disponueshëm në listë - Trebuchet MS. Meqenëse ky font është i të njëjtit lloj, verifikohet prania e fontit origjinal – Geneva. Nëse kompjuteri i përdoruesit nuk ka Geneva, shfletuesi do të zgjedhë një font tjetër të disponueshëm sans-serif dhe do të shfaqë tekstin në të.

Rikthe respektin: Në kod ne shënuam emrin e fontit Trebuchet MS në pads. Është e nevojshme të përdoret emri i fontit në këmbë të dyfishta ose të vetme nëse ka pastrime në të.

Ju mund të lexoni për ato shkronja me serif (serif) dhe pa (sans-serif) në faqen e Wikipedia.

Font ueb

Lëshimi i një mënyre më të mirë për të zgjedhur fontet ka një disavantazh të madh - ju jeni të kufizuar nga numri i shkronjave. Do të jeni të kënaqur vetëm me këto opsione, pasi, ka shumë të ngjarë, shumica e kompjuterëve janë instaluar.

Si mund të rrisni zgjedhjen e shkronjave për ta bërë dizajnin e faqes individuale dhe për të shtuar origjinalitet? Fontet e uebit vijnë në ndihmë. Lexoni seksionin më poshtë dhe do të mësoni se si t'i trajtoni ato.

Megjithatë, për të shfaqur fontin e kërkuar në shfletues, duhet që ky font të instalohet në kompjuter. Është e lehtë për të ndërmarrë veprime. Kjo metodë e lidhjes së shkronjave përpara CSS hap një gamë të gjerë mundësish për projektuesit. Le të kujtojmë për një lugë mjaltë në një fuçi mjaltë: para së gjithash, shfletuesi nuk mbështet të njëjtin format për fontin (që do të bëjë që fonti të mos shfaqet), dhe në një mënyrë tjetër, pasi skedari me font përmban vlerë të madhe, ju mund të ndihmoni anën interesante.

Mbështetja e formateve

Si të merreni me problemin e papajtueshmërisë me formatin e skedarit? Hidhini një sy tabelës që tregon formatet më të njohura të shkronjave dhe cilët shfletues i mbështesin ato:

Shënim: Mund të gjeni informacione të përditësuara në lidhje me formatet mbështetëse të shkronjave në faqen e internetit caniuse.com. Për të kërkuar, duhet të vendosni një emër për formatin (për shembull, ttf).

Nëse synoni shfletues modernë, do t'ju duhet të përdorni formatin e shkronjave TTF - më i gjerë dhe më i popullarizuari. Së fundi, nëse keni nevojë për shumë formate për një font, mund të përdorni shpejt konvertues të veçantë në internet nga një format në tjetrin dhe më pas të lidhni të gjithë skedarët përmes tij. Në këtë mënyrë, shfletuesi mund të zgjedhë formatin e fontit në të cilin funksionon.

Ne përfshijmë një font ueb duke përdorur @font-face

Për shembull, ju vendosni fontin tuaj unik nën emrin MyUniqueFont në formatin TTF dhe dëshironi që teksti kryesor i faqes së internetit të shfaqet në atë font. Gjëja e parë që duhet të bëni është të kopjoni skedarin e shkronjave në dosjen ku ndodhen të gjithë skedarët e tjerë në sit. Për të shmangur krijimin e një rrëmuje, mund të krijoni një dosje posaçërisht për shkronjat, duke e quajtur atë, për shembull, fonts.

@font-face ( font-familja: MyUniqueFont; src: url ("fonts/MyUniqueFont.ttf"); )

Fuqia e font-family luan një rol të ndryshëm në këtë rast: ne gjithashtu i caktojmë një emër fontit, në mënyrë që të mund ta përdorim atë emër kur shkruajmë stilin:

P (familja e shkronjave: MyUniqueFont; )

Rreshti tjetër tregon rrugën drejt fontit të skedarit. Në aplikacionin tonë, skedari MyUniqueFont.ttf ndodhet në dosjen e shkronjave. URL-të tuaja mund të ndryshojnë.

Fontet e Google

Google e bën të lehtë lidhjen e çdo fonti me koleksionin Google Fonts. Gjithçka që duhet të bëni për të filluar përdorimin e një fonti të personalizuar që ju përshtatet është të shkruani fontin në Google, më pas të kopjoni mesazhin special për atë font dhe ta shtoni atë në dokumentin tuaj të internetit.

Shënim: I gjithë koleksioni i shkronjave të Google është i disponueshëm në faqen e internetit Fontet e Google. Në faqe mund të përdorni shpejt filtra të ndryshëm për të kërkuar fontet sipas kategorisë, produktit, alfabetit.

Procedura për t'u lidhur me fontin e Google përshkruhet më poshtë. Për të marrë një ide se çfarë po ndodh, zgjidhni një font nga faqja e Fonts Google dhe hapeni duke klikuar butonin Quick-use.

Hapi 1: zgjidhni imazhin

Në faqen e fontit të zgjedhur, do të shihni opsionin e ndenjës, si dhe ikonën e shpejtësisë, që do të thotë asgjë më pak se rrjedhshmëria e fontit. Sa më shumë stile të zgjidhni për fontin, aq më shumë kohë do t'ju duhet për ta stiluar atë. Prandaj rekomandohet të zgjidhni vetëm ato opsione imazhi që planifikoni të përdorni.

Croc 2: zgjidhni alfabetin

Më tej në faqe mund të zgjidhni një grup karakteresh: latinisht, cirilik, etj. Në varësi të fontit, jo të gjitha opsionet e alfabetit mund të jenë të disponueshme në të. Ngjashëm me pikën e mëparshme, thjesht kontrolloni kutinë përballë alfabetit që ju nevojitet.

Hapi 3: shtoni kodin në sajt

Metoda e parë është të sigurohet që kodi HTML të dërgohet në serverin e Google dhe fonti të importohet. Duhet të kopjoni pjesën e përfunduar të kodit dhe ta vendosni midis etiketave në dokumentin tuaj HTML. Prapa:

...

Një mënyrë tjetër është të lidhni fontin me direktivën shtesë @import. Kodi i përfunduar mund të gjendet në një skedë tjetër, pika 3, në faqen e fontit të zgjedhur të Google. Kjo duhet të shtohet në bazën e fletës suaj të stilit (përndryshe skedari nuk do të importohet). Kodi duket diçka si ky:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cirilik);

E veçanta e metodës së parë qëndron në faktin se ju duhet të shtoni shënime në font në titullin e çdo faqeje, ku planifikoni ta redaktoni atë. Kjo është e lehtë për t'u bërë në sajte me një numër të vogël faqesh, por është problematike për burime të mëdha. Një mënyrë tjetër manuale është që kodi mund të vendoset në krye të fletës ekzistuese të stilit dhe më pas të gjitha faqet me të cilat lidhet kjo tabelë do të zgjedhin fontin e nevojshëm, i cili kërkohet nga një direktivë shtesë @import.


Croc 4: krijoni një stil

Pas rreshtave kryesore, mund të filloni të ngurtësoni fontin. Si të shkruani këtë rregull CSS, keni shkruar tashmë:

P (font-familja: "Roboto", sans-serif; )

Meqenëse në hapin e parë keni zgjedhur një numër opsionesh imazhi (për shembull, keni shtuar opsionin e shkronjave të theksuara Bold 700), atëherë në hapin e tretë kodi do të ndryshojë pak:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cirilik);

Për t'i dhënë më pas një imazh të theksuar fontit, shkruani stilin CSS si ky:

P (familja e shkronjave: "Roboto", sans-serif; pesha e shkronjave: 700; )

Shënim: në Google Fonts, për të treguar densitetin e një fonti, përdoren vetëm njësitë mendore që variojnë nga 100 në 900. Kështu, një imazh normal (pas rreshtave) është ekuivalent me 400 (normale) dhe një imazh standard i trashë është i barabartë me 700 (të guximshme).

Përparësitë kryesore të shërbimit Google Fonts janë:

  • lehtësia e përdorimit (ju mund ta përdorni shërbimin si fillestar, dhe i gjithë kodi i nevojshëm gjenerohet automatikisht - nuk ka nevojë ta kopjoni);
  • disponueshmëria e shkronjave (nuk ka nevojë të paguani për to);
  • transferimi i të gjitha formateve të shkronjave (kjo do të thotë që shfletuesi mund të caktojë të njëjtin format fonti me të cilin punon).

Ndër të metat e shërbimit është diversiteti i shkronjave, veçanërisht cirilik. Përpara se të flisni, ka shërbime të tjera të ngjashme në internet, për shembull, TypeKit (me pagesë).

Thaskat

Sot kemi një numër opsionesh të disponueshme për lidhjen e shkronjave origjinale dhe jo standarde me faqet e internetit. Secila prej këtyre metodave ka të mirat dhe të këqijat e veta. Cili opsion është më i mirë se vikorystvovat, ju duhet të vendosni vetë. Më shpesh është e nevojshme të qëndroni të varur nga situata, dhe në situata të ndryshme mund të ketë qasje të ndryshme. Në këtë fazë, ju vetëm duhet të dini se si të ndryshoni fontet në CSS.

Aplikimi © 2024 Pajisje celulare dhe kompjuterike