Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ
  • në shtëpi
  • TV
  • Shkronjat e personalizuara në CSS dhe HTML dhe kompresimi i shkronjave duke përdorur fontoptimizer. Shkronja e personalizuar në faqe Vendos fontin css

Shkronjat e personalizuara në CSS dhe HTML dhe kompresimi i shkronjave duke përdorur fontoptimizer. Shkronja e personalizuar në faqe Vendos fontin css

Nga autori: Mirë se vini në faqet e blogut Webformyself. Në këtë artikull do të doja t'i përgjigjem pyetjes se si të vendosni një font në html. Disa njerëz ende po e bëjnë atë në mënyrën e gabuar, kështu që është e rëndësishme ta shqyrtojmë çështjen më hollësisht.

Si ishte vendosur fonti më parë

Më parë, html përdorte një etiketë të veçantë të çiftuar të shkronjave, e cila vepronte si një enë për ndryshimin e parametrave të shkronjave, të tilla si shkronja, ngjyra dhe madhësia. Sot kjo qasje është thelbësisht e gabuar. Pse? Standardet e uebit specifikojnë që pamja e një faqeje nuk duhet të specifikohet në shënjimin html. Për më tepër, etiketa mbështetet plotësisht vetëm në një version shumë të vjetër të HTML - HTML 3.

Vendosja e saktë e fontit në html

Sot, për këtë qëllim ia vlen të përdoren ekskluzivisht aftësitë CSS. Kjo gjuhë u krijua pikërisht për të përcaktuar pamjen përmes saj. Përveç kësaj, CSS ka shumë më tepër veti që ndikojnë në pamjen e tekstit. Le të shohim pak secilin prej tyre:

Stili i shkronjave. Përcakton stilin e tekstit. Merr vlerat e mëposhtme:

Font-variant. Vetia specifikon se si duhet të interpretohet drejtshkrimi i shkronjave të vogla. Ka vetëm dy kuptime:

Sjellje normale - normale.

Shkronjat e vogla - të gjitha shkronjat e vogla shndërrohen në shkronja të mëdha, dhe madhësia e tyre zvogëlohet pak në krahasim me fontin e zakonshëm.

Font-pesha. Përcakton guximin e tekstit. Vlera mund të specifikohet me fjalë kyçe ose një vlerë numerike. Le të shohim të gjitha opsionet:

Normal - tekst normal

Bold - tekst me stil të theksuar

Bolder – do të shfaqet më i guximshëm se elementi prind.

Më të lehta - shkronjat do të kenë më pak guxim në krahasim me prindin e tyre.

Është kaq e thjeshtë. Përveç kësaj, është e mundur të vendosni vlerën në formën e numrave nga 100 në 900, ku 900 është më e guximshme. Për shembull, vlera normale korrespondon me 400, dhe vlera e theksuar korrespondon me 700.

Fatkeqësisht, shumica e shfletuesve nuk i njohin këto vlera numerike dhe mund të përdorin vetëm dy vlera: normale dhe të theksuara. Për eksperimentin, krijova 9 paragrafë dhe secilit i dhashë një peshë të ndryshme teksti - nga 100 në 900. Më pas hapa këtë faqe interneti në shfletues të ndryshëm dhe asnjëri prej tyre nuk shfaqi stile të ndryshme. Përfundim: është më mirë të mos përdoren vlera numerike.

Përmasa e germave. Kjo veti përcakton madhësinë e shkronjave. Madhësia mund të specifikohet në vlera të ndryshme relative dhe absolute. Më shpesh, madhësia specifikohet në piksel, njësi relative em dhe përqindje. Nëse dëshironi të mësoni më shumë rreth vendosjes së madhësisë në CSS, atëherë lexoni këtë, ku gjithçka përshkruhet më në detaje.

Font-familje. Ndoshta vetia më themelore që përcakton familjen ose emrin specifik të fontit të përdorur. Nëse po përdorni një emër specifik, duhet të siguroheni që fonti i specifikuar të gjendet në kompjuterët e të gjithë përdoruesve. Për besueshmëri, duhet të specifikoni një opsion alternativ ose një familje të tërë të ndarë me presje. Fontet ndahen në familjet e mëposhtme:

Çdo familje i përshtatet nevojave të ndryshme. Për shembull, fantazia përdoret shpesh për të dizajnuar tituj të ndryshëm, dhe monospace përdoret për të nxjerrë kodin e makinës, etj. Ju mund të gjeni më konkretisht emrat e shkronjave, për shembull, në një redaktues teksti ose në Photoshop.

Shënimi i stenografisë

Gjithçka që diskutuam më sipër mund të shkruhet shumë lehtë në thelb në një rresht duke përdorur veçorinë e mrekullueshme të shkronjave, e cila bashkon të gjitha cilësimet. Ju duhet ta shkruani atë në rendin e mëposhtëm:

Fonti: font-style | font-variant | pesha e shkronjave | madhësia e shkronjave | font-familje;

Fonti: font-style | font - variant | font - pesha | madhësia e shkronjave | font - familja ;

Nëse nuk keni nevojë të specifikoni një parametër, ai thjesht hiqet. Këtu kërkohet vetëm madhësia dhe familja e shkronjave; çdo gjë tjetër është opsionale nëse nuk është e nevojshme. Përdorimi i stenografisë ju lejon të zvogëloni shumë kodin në css. Përdoreni sepse është një optimizim i mirë për faqen.

Si të vendosni fontin në html në elementë të ndryshëm

Kështu që, për disa arsye, ne u mërzitëm shumë me përshkrimin e të gjitha vetive për fontin. Ky është një informacion shumë i rëndësishëm, por si ta pyesni saktë? Përdorni përzgjedhësit e duhur për të arritur elementët e duhur. Më poshtë po jap disa shembuj:

p a ( font-familje: Verdana, sans-serif; )

Për të dhënat tabelare, janë vendosur shumë parametra të shkronjave: shkronja të mëdha të reduktuara, stili i theksuar, madhësia dhe emri i shkronjave.

A keni hasur në një klient kapriçioz që kërkon shkronja "të pikturuara"? Apo thjesht po krijoni një faqe interneti tematike me stil dhe shkrimi i tekstit me porosi do të nxjerrë në pah idenë e autorit tuaj? Le të shqyrtojmë një nga mënyrat për të zgjidhur këtë problem.

Kur është e nevojshme

Së pari, le të shohim rastet më të justifikuara në të cilat mund të keni nevojë për shkronja jo standarde.

  • Menu me stil.
  • Titujt me stil.
  • Logo. Krijimi i një logoje është një çështje serioze, janë shkruar shumë libra për këtë temë, specialistët e kanë studiuar këtë çështje për një kohë të gjatë... Dhe autori nuk do t'ua heqë bukën njerëzve, por do t'i vërë dy cent. Nëse logoja juaj është tekst, atëherë për optimizimin e SEO me cilësi të lartë ajo duhet të shfaqet si TEXT.

Detyra është të përdorni fontet jo standarde, domethënë ato që, me një shkallë të konsiderueshme probabiliteti, nuk janë të disponueshme për përdoruesin e burimit tuaj të Internetit.

Zgjidhjet

Si në shumicën e rasteve, çdo detyrë ka disa zgjidhje, dhe e jona nuk bën përjashtim. Shko:

  • Foto. Nuk ka fleksibilitet konfigurimi, shpejtësia e ngarkimit të faqeve përkeqësohet, ngarkesa e serverit rritet, SEO është plotësisht jashtë diskutimit.
  • Blic. Skedarë shtesë për të shkarkuar, keni nevojë për aftësi në redaktorët e Flash (mund të ndryshoni edhe parametrat e tekstit këtu), SEO mesatare.
  • JS. Skedarët e jashtëm shtesë (dhe gjithçka që vjen me të), SEO mesatare, teksti nuk mund të kopjohen.
  • Fontet e personalizuara duke përdorur CSS

Mënyra e vërtetë e samurait, ose "rroftë CSS"

Rregulli css @font-face do të na ndihmojë në zgjidhjen e këtij problemi, i cili na lejon të ngarkojmë fonte specifike në dokument dhe të përcaktojmë cilësimet e tyre.

@ font- face ( font-familja: AlexBrush- Regular; src: local("AlexBrush-Regular") , url("./AlexBrush-Regular. otf ") ;)

Kështu, ne eliminojmë nevojën që fonti që kemi zgjedhur të jetë i pranishëm në sistemin operativ të vizitorit.

Ky lloj dizajni ju lejon të lidhni fontet TrueType (ttf) dhe OpenType (otf).

Interesante: OpenType ka aftësi më të mëdha parashtypjeje sesa TrueType dhe mbështet një grup më të madh karakteresh në një madhësi skedari më të vogël.

Duket se kjo temë mund të mbyllet, por ka një POR... Le të kujtojmë miqtë tanë "të veçantë", përkatësisht shfletuesit e familjes IE. Për të zbatuar një font të personalizuar në IE, fonti duhet të jetë në formatin Embedded OpenType (eot).

Ky nuk është rasti i vetëm kur një veçori IE bën më shumë mirë sesa dëm. Fakti është se formati eot nënkupton:

  • Enkriptimi. Të dhënat për adresën e projektit futen në skedar, kështu që sulmuesit nuk do të jenë në gjendje të vjedhin fontin dhe ta ngarkojnë atë në faqen e tyre të internetit.
  • Kompresimi. Skedari i shkronjave është i ngjeshur, duke zvogëluar kështu kohën e shkarkimit.

Duke marrë parasysh sa më sipër, le të modifikojmë shembullin tonë:

@ font- face ( font-familja: AlexBrush- Regular; src: local("AlexBrush-Regular ") , url(./ AlexBrush- Regular. eot) ;) @ font- face (font-familja: AlexBrush- Regular; src : local("AlexBrush-Regular") , url("./AlexBrush-Regular. otf ") ;)

Përvoja praktike ka treguar nevojën për të përmirësuar këtë shembull për të rregulluar gabimet dhe për të përmirësuar njohjen nga shfletuesit.

@font-face ( font-family: "AlexBrush-Regular" ; src: url("AlexBrush-Regular.eot") ; src: url( "AlexBrush-Regular.eot?#iefix") format("embedded-opentype" ) , url( "AlexBrush-Regular.svg#JournalRegular") format("svg"); url("AlexBrush-Regular.woff" ) format("woff") , url("AlexBrush-Regular.otf") format("truetype") , )

E rëndësishme!!!

  1. Fleksibiliteti. Vendosja dhe ndryshimi i cilësimeve të tekstit është i lehtë.
  2. Shpejtësia. Numri minimal i skedarëve shtesë për t'u ngarkuar nuk e ngadalëson faqen si numri i njëjtë i elementeve në js dhe Flash.
  3. SEO. Teksti mbetet tekst - avantazhet janë të dukshme.
  4. Shembulli funksionon në shfletues duke filluar nga: IE4, Op, Fx3.5, Cr2, Sa1.
  5. Para se të përdorni një font, duhet ta optimizoni atë (lexoni pasthënien).
  6. Kur përdorni fontet e blera, duhet të shqetësoheni për sigurinë e tyre.
  7. Nëse gjerësia e brezit të kanalit të komunikimit është e vogël, atëherë derisa skedari i fontit të ngarkohet, përdoruesi ose do të shohë një font të thjeshtë në vend të një jo standarde, ose nuk do të shohë asgjë fare.

Pasthënie.

Optimizimi i shkronjave

Kur krijojnë një grup karakteresh, zhvilluesit përpiqen ta paketojnë atë me funksionalitetin maksimal në mënyrë që të arrijnë audiencën e synuar sa më gjerë që të jetë e mundur. Bazuar në këtë, ata vendosin shkronja, numra, shenja pikësimi, ikona shtesë, lloje të ndryshme stilesh, një sërë vlerash të peshës së shkronjave, etj.

Si rezultat i këtyre përpjekjeve, skedarët e shkronjave mund të tejkalojnë shenjën dhjetëra MB. A kemi nevojë për një diversitet të tillë? Në fund të fundit, për të dhënë një prekje stilistike pikante, ne (në varësi të situatës) nuk kemi nevojë domosdoshmërisht për shenja pikësimi apo simbole të ndryshme. Në të vërtetë, stilet e ndryshme nuk janë gjithmonë të nevojshme. Ose le të themi se e optimizoni faqen tuaj në mënyrë rigoroze për RuNet, mund të bëni pa latinisht...

Epo, ju tashmë e keni kuptuar thelbin. Fonti duhet të optimizohet:

  • Ne heqim të gjithë përmbajtjen që nuk është e dobishme për zgjidhjen e një problemi praktik.
  • Ne konvertojmë skedarët në formatet e kërkuara.

Si ta bëjmë atë? Ekzistojnë një sërë shërbimesh në internet që ju lejojnë të kryeni operacionet e nevojshme, për shembull: Gjeneruesi i font-face, Konvertuesi i Fonteve në internet, Optimizuesi i Fonteve në Ueb, etj.

Mbrojtja

Duhet shumë kohë për të zhvilluar një font funksional me cilësi të lartë, dhe për këtë arsye një font i tillë kushton një shumë të mirë parash. Të gjitha fontet e blera (legalisht) janë të regjistruara dhe përbëjnë pronë intelektuale.

Kur blini një font, ju merrni të drejtën ta përdorni atë në ueb, por nëse fonti shkarkohet nga burimi juaj nga një sulmues, atëherë pronari i faqes do të mbajë përgjegjësi për dëmin e shkaktuar zhvilluesit. Si të mbroni fontin tuaj?

Në IE, gjithçka është menduar për ne - mbrojtja në formatin eot është tashmë e integruar. Për të gjithë shfletuesit e tjerë nuk ka ende një zgjidhje të qartë.

Ka, sigurisht, zhvillime të reja - për shembull, formati WOFT, në të cilin çështja e mbrojtjes hiqet në mënyrë të ngjashme me eot, por për fat të keq, ai ende nuk mund të mburret me mbështetjen e plotë në shfletues.

Ju gjithashtu mund të aplikoni thjesht fontet falas.

Për të krijuar një dizajn unik dhe plot ngjyra, duhet të shtoni fontet tuaja. Në këtë mësim do të mësojmë se si të lidhim çdo font. Lidhja e një fonti të ri bëhet duke përdorur rregullin @font-face. Në këtë rregull, siç ndoshta e keni marrë me mend, duhet të ketë dy veti: emri i shkronjave dhe shtegu për në skedar (në font). Shembujt e mëposhtëm do të jenë në lidhje me fontin Open Sans. Le të shohim shembullin e parë.

@font-face (
font-family: "Open Sans";
src: lokale ("Open Sans"),
url ("/font/open_sans.ttf") formati ("truetype");
}

Ne përdorim veçorinë font-family për të specifikuar emrin e fontit (tani e tutje do ta përdorim si kjo: p (font-family: "Open Sans" sans-serif)). Pjesa lokale ("Open Sans") e kodit nënkupton kontrollimin për të parë nëse përdoruesi e ka atë font. Nëse nuk dëshironi të kontrolloni nëse përdoruesi ka një font, mund të shkruani si në shembullin e dytë.

@font-face (
font-family: "Open Sans";
src: url("/font/open_sans.ttf") formati ("truetype");
}

Shembulli i tretë është më i plotë dhe më i pajtueshëm me ndërshfletuesit.

@font-face (
font-family: "Open Sans";
src: url ("open_sans.eot");
src: url("open_sans.ttf") formati ("truetype"),
url("open_sans.woff") formati("woff");
pesha e shkronjave: normale;
stili i shkronjave: normale;
}

Mënyra të tjera për të lidhur fontet

Metoda e parë (për shembull, ne marrim një font nga faqja e internetit e Google), kodi futet në .

Shtimi i një fonti të ri në një faqe interneti nuk është detyra më e lehtë. Ku të zgjidhni, shkarkoni dhe si të shtoni një font në një faqe interneti në CSS? Në këtë artikull do të tregojmë një nga më i përshtatshëm mënyra për të instaluar dhe lidhur fontin me sitin.

Si të përfshini një font në një faqe interneti në CSS

Për shembull, ne kemi një font Raleway.ttf dhe ne duam ta përdorim atë në të gjitha kokat ( h1) të faqes sonë të internetit. Për ta bërë këtë, kryeni hapat e mëposhtëm:

h1 ( font-familja: "RalewayRegular"; }

Tani të gjithë titujt e nivelit të parë në sit shfaqen në fontin që na nevojitet.

Nëse dëshironi të lidhni disa fonte (ose stilet e tyre), atëherë thjesht shtoni ato nën atë të mëparshmen:

@font-fytyrë { font-familja: "RalewayRegular"; src: url ("../fonts/RalewayRegular.ttf" ) format( "tip i vërtetë"); stili i shkronjave: normale; pesha e shkronjave: normale; } @font-fytyrë{ font-familja: "RalewayBold"; src: url ("../fonts/RalewayBold.ttf" ) format( "tip i vërtetë"); stili i shkronjave: normale; pesha e shkronjave: normale; }

Ju mund të keni vënë re se ka formate të ndryshme të shkronjave - .ttf, .woff, .eot, .svg etj. Ekziston edhe një format për shfletues modern. woff2, por ne do të flasim për këtë në një nga artikujt e mëposhtëm. Në mënyrë tipike, çdo font përfshihet në 3 formate njëherësh. Kjo është bërë në mënyrë që fonti të shfaqet saktë në të gjithë shfletuesit, duke përfshirë. dhe ato të vjetra. Duket kështu:

@font-fytyrë { font-familja: "RalewayRegular"; src: url( "../fonts/RalewayRegular/RalewayRegular.eot") ; src: url( "../fonts/RalewayRegular/RalewayRegular.eot?#iefix") format ("embedded-opentype" ), url( "../fonts/RalewayRegular/RalewayRegular.woff") format( "uff"), url( "../fonts/RalewayRegular/RalewayRegular.ttf") format( "tip i vërtetë"); stili i shkronjave: normale; pesha e shkronjave: normale; }

Këtu vijon Kushtojini vëmendje renditjes së lidhjes - kjo është e rëndësishme!

Ne nuk do të hyjmë në detaje, thjesht mbani mend pamjen e këtij dizajni.

Nëse keni një font vetëm në një format, atëherë përdorni konvertues të ndryshëm të shkronjave. Këtu është një prej tyre.


Si të lidhni një font duke përdorur shërbime të ndryshme

Ju gjithashtu mund të përdorni shërbimin fonts4web për të lidhur fontet:


Mënyra më e lehtë për të lidhur fontet


Si të lidhni një font me një shabllon Moguta CMS


Si të shtoni një lidhje me fontet e Google në një shabllon Moguta CMS


Tani ju e dini se si të shtoni një font në një faqe interneti duke përdorur CSS dhe më shumë. Ne do të jemi të lumtur t'u përgjigjemi të gjitha pyetjeve tuaja

Një ditë tjetër, edhe një herë, vendosa të filloj të bëj shtytje. Një mësues që respektoj pohon se ky ushtrim ka një efekt pothuajse magjik nëse bëhet siç duhet.

Epo, vendosa një eksperiment me veten time dhe për ta bërë më të vështirë të kërcej, vendosa ta bëj publike "fletoren e laboratorit" dhe e postova në një blog të braktisur.

Dizajni i vjetër nuk përputhej me idenë e re, dhe pa hezitim, mora atë që më pëlqeu pak a shumë nga depoja e përgjithshme e WordPress.

A e dini se cili është problemi me disa shabllone të gatshëm të marrë nga atje? Problemi është përputhshmëria e ngathët me shkronjat cirilike. Në rastin tim pësuan goditjet me kokë. Meqenëse fonti i referuar nga CSS nuk përmbante karaktere ruse, ato u morën nga fonti i paracaktuar (ose Sans ose Arial). Si rezultat, titujt ishin TË MADHËN dhe shkatërruan të gjithë pamjen. Më duhej të mendoja si të zëvendësoni fontin.

Ka disa mënyra për ta bërë këtë.

Metoda 1: Memec

Bëhet fjalë për faktin se ju gjeni një font të përshtatshëm në internet, instaloni atë në kompjuterin tuaj, shkruani atë në CSS dhe shihni faqen tuaj siç është menduar.

Të tjerët vazhdojnë ta shohin atë, në rastin më të mirë, me fontet e paracaktuar, dhe në rastin më të keq, madje edhe të pa shtypur.

Mos e bëj këtë!

Metoda 2: Konvertoni dizajnin në një font standard

Ky është opsioni më ideal, por, për fat të keq, nuk është gjithmonë i përshtatshëm, pasi ndonjëherë "zjarri" i dizajnit humbet për shkak të tij. Megjithatë, GJITHMONË merrni parasysh këtë qasje, sepse sado të përpiqeni, është e mundur që kompjuteri i klientit të përdorë fontin që është i disponueshëm.

Shkronjat e sigurta që disponohen pothuajse në të gjitha sistemet operative janë: Verdana (ideale për tekste),Ndikimi (nganjëherë shumë mirë në tituj), Arial, Arial Black, Comic Sans MS (kaka, e cila është shumë e popullarizuar në mesin e fillestarëve), Korrier i ri (i përshtatshëm për shembuj kodesh dhe forma), Georgia, Times New Roman, Trebuchet MS.

Metoda 3: Foto në vend të tekstit

Opsioni është shumë ndër-shfletues dhe i përshtatshëm për dizajnimin e elementeve statike. Për shembull, titujt e faqeve. Ju bëni një PNG transparente me tekst në fontin e dëshiruar, përpunoni atë sipas nevojës dhe futeni në faqe, duke mos harruar të plotësoni ALT. Ose e njëjta gjë, por ngjiteni tekstin në një sfond dhe ruajeni si një JPG.

Përveç kokës, më duhej të ndryshoja pamjen e titujve të postimeve dhe miniaplikacioneve. Epo, pse të mos bëni një fotografi të veçantë me një titull për çdo hyrje?

Edhe pse ka zejtarë që krijojnë fotografi me tekst titulli duke përdorur skriptet e serverit, ky tashmë është një perversion.

Metoda 4: Cufon

Këto aplikacione mund të gjenerohen nga një skedar fonti duke përdorur gjeneratorin online http://cufon.shoqolate.com/generate/

Mënyra më e lehtë është përdorimi http://www.google.com/fonts Ju zgjidhni fontin e dëshiruar nga ato të paraqitura dhe merrni kodin e gatshëm që duhet të futni në sit (në kokë dhe në skedarin e stilit), pas së cilës gjithçka funksionon.

Por nuk doja të përdorja javascript shtesë, të shqetësohesha me gjenerimin e aplikacioneve, etj. Doja të bëja gjithçka shpejt dhe thjesht. Për më tepër, skedari me fontin e kërkuar ishte tashmë i disponueshëm për një kohë të gjatë.

Metoda 4: Lidhni fontin me sitin duke përdorur CSS

Interneti është plot me udhëzues për këtë temë. Sidoqoftë, pasi provova pesë prej tyre, arrita në një rezultat katastrofik. Fonti im TTF u shfaq normalisht vetëm në IE. Në shfletues të tjerë ai u zëvendësua pa mëshirë nga Arial.

E pranoj se nuk jam një adhurues i IE dhe e konsideroj atë një shfletues shkarkimi të shfletuesit. Jo më! Pra, më duhej të bëja një përmirësim të vogël.

Për të lidhur një font me faqen duke përdorur CSS, na duhet vetë fonti (skedari) dhe një konvertues në internet http://onlinefontconverter.com/

Mund të ketë një shumëllojshmëri të madhe të konvertuesve të shkronjave në internet. Disa janë të mbyllura, të reja shfaqen në vendin e tyre, kështu që nëse ky i veçantë nuk është më aty, kërkoni në motorët e kërkimit për një pyetje si "konvertuesi i shkronjave në internet" dhe përpiquni të konvertoni fontet atje. Në këtë postim, konvertuesit e dhënë janë përdorur si shembull.

1. Shkoni në faqen e internetit të konvertuesit , kapni fontin që keni dhe tërhiqeni në këtë dritare (zakonisht është në kolonën e djathtë).

2. Shkarkoni fontin në 4 variante: EOT, OTF, TTF dhe WOFF. Kjo duhet të jetë e mjaftueshme. Shfletuesi, në procesin e paraqitjes së faqes, do të zgjedhë dhe shkarkojë atë që është më i përshtatshëm për të.

3. Ngarko fontet në faqen e internetit. Kam krijuar një dosje për këtë në rrënjën e faqes "f" dhe i vendosi aty.

Përditësimi më 16.02.2015: Për tani onlinefontconverter.com rinovuar dhe nuk konvertoi asnjë nga fontet e propozuara ((

Më duhej të përdorja faqen font2web.com. Ky ofron të gjitha fontet e nevojshme menjëherë në një paketë në një arkiv. Të rehatshme!

4. Lidhni ngarkimin e shkronjave me sajtin. Për ta bërë këtë, futni këtë kod në skedarin css ose në etiketat e stilit përkatës.

@font-face( font-familja: EtoMoiFont; src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1. woff);)

font-familja: EtoMoiFont;— i tregon shfletuesit se si do të quhet fonti i ngarkuar. Merr një emër vetë.

src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1.woff);— specifikon shtegun dhe emrat e skedarëve të shkronjave.

Pse shkronjat janë në këtë renditje?

E para kam vënë EOT. Ky format përdoret nga versionet më të vjetra të IE.

Së dytiOTF. Ky është një format i ngjeshur i fontit që supozohet të peshojë më pak.

Së tretiTTF. Pothuajse të gjithë shfletuesit e kuptojnë atë. Edhe pse, ndodh ndryshe. Për shembull, në iOS mund të mos hapet.

E funditMIRË. Kjo duhet të lexohet mirë në Mac, por ende nuk kam pasur kohë ta kontrolloj.

5. Përcaktoni në skedarin e stilit , cila familje e shkronjave duhet të përdoret për të shfaqur titujt (në rastin tonë, titujt h2).

h2 (familja e shkronjave: EtoMoiFont;)

Gati!

Nëse fontet nuk janë aplikuar, sigurohuni: së pari, që skedari css të përdoret nga faqja (ndonjëherë duhet të rivendosni cache, ndonjëherë të kërkoni një skedar tjetër css), së dyti, që fonti të përdoret për klasën (id ose tag) që specifikuat. nuk janë të bllokuara në një skedar tjetër css që ngarkohet pas kësaj.

E bukura e kësaj metode është se në të ardhmen mund ta vendos këtë font për çdo kontejner teksti.


Kjo është ajo që ndodhi.

Disavantazhi i metodës është se cilësimet e shfletuesit të disa përdoruesve paranojakë mund të ndalojnë ngarkimin e shkronjave të jashtme, flash, javascript, foto, etj.

Pra, mos u bëni dembel dhe kontrolloni si do të duket faqja juaj nëse fontet e ngarkuara janë të çaktivizuara. Provoni të luani me të sigurta metoda 2, dhe pastaj ngarkoni tuajën përsëri. Nëse madhësitë janë pak a shumë të njëjta dhe asgjë nuk është larguar, atëherë është në rregull.

Dhe më tej! Metodat e testimit vetëm në kompjuterët ku fonti me të cilin do të punoni nuk është i instaluar. Përndryshe do të funksionojë Metoda numër 1.

Kjo eshte e gjitha. isha me ty.
Deri herën tjetër.

Artikujt më të mirë mbi këtë temë