Fonturi non-standard în Blogger pentru design de blog. Font caligrafic frumos pe Blogspot, Blogger

O zi bună, dragi cititori. Astăzi vreau să vă vorbesc despre una dintre modalitățile de a instala un font chirilic non-standard pe site-ul dvs. Aceasta metoda potrivit pentru orice site, inclusiv bloguri pe Blogger. Această metodă a fost folosită cu succes pe multe site-uri în limba engleză și este utilizată activ în temele premium WordPress și Joomla.

Deoarece Deoarece majoritatea cititorilor mei blog pe Blogger și WordPress, vă voi arăta cum să instalați un font personalizat pe acele bloguri. În același timp, metoda descrisă pentru Blogger este potrivită pentru absolut orice site. Și pentru WordPress există un plugin gata făcut. Dar nu vă sfătuiesc să defilați articolul la descrierile relevante, pentru că. pentru a configura pluginul, veți avea nevoie de toate cunoștințele despre această metodă.

ma gandesc mai departe acest moment aceasta este una dintre cele mai populare moduri de a instala un font chirilic non-standard pe site, în primul rând, datorită ușurinței instalării și, în al doilea rând, datorită suportului diferitelor browsere.

Te-am intrigat destul? Este timpul să trecem la detalii.

Deci, această metodă se numește Cufon. A fost inventat de un dezvoltator - Simo Kinnunen. Mai întâi, a creat un fișier special care trebuie conectat la site. În al doilea rând, a creat un generator care transformă orice font în JavaScript.

Metoda în sine este ușor de rușinat, iar mai târziu o vei vedea. Cel mai dificil lucru aici este exact căutarea fontului necesar. Și sunt sigur că mulți dintre voi care nu sunteți utilizatori activi editori grafici, cum ar fi PhotoShop, pur și simplu nu au idee ce font să încarce în generator și de unde să obțineți un astfel de font. Despre asta am decis să vorbesc mai detaliat.

Nu este un secret pentru nimeni că un anumit set de fonturi este instalat pe orice computer, în același Word și în alte programe. De asemenea, putem instala independent fonturi noi pe computerul nostru, inclusiv în orice program. Pentru a face acest lucru, trebuie doar să introducem expresia în oricare dintre motoarele de căutare descărcați fonturi chiriliceși asigurați-vă că fonturile pe care le-am găsit sunt în format .ttf.

După ce ați descărcat fontul care vă place în format .ttf, îl puteți instala pe computer prin simpla deschidere.

Sau selectați comanda Instalare folosind butonul din dreapta al mouse-ului. După această procedură, fontul va fi afișat în toate programele instalate pe computer, unde este furnizat în general. Acestea. nu este necesară nicio acțiune suplimentară. Metoda descrisă este garantată să funcționeze în Windows 7.

Instalarea absolut orice font chirilic pe site în trei pași

Deci, am devenit proprietarul unui font chirilic frumos non-standard și dorim să-l instalăm pe site-ul nostru. Care sunt acțiunile noastre?

Pasul 1

Mergem pe site-ul Cufon - cufon.shoqolate.com.
Faceți clic pe linkul din meniu - Descărcare. Se deschide pagina de script. Copiem tot codul, îl lipim în notepad și îl salvăm cu extensia .js. Pentru cititorii mei, am pregătit un fișier gata făcut, îl puteți descărca pe computer.

Atenție, de la data scrierii postării pe 26 iulie 2011, versiunea scriptului este 1.09i. Este această versiune acum la linkul de mai sus.

Încărcarea scriptului pe găzduire. Oricine blogează pe Blogger ar trebui să știe deja unde să încarce un fișier terță parte (), eu folosesc site-urile Google pentru asta.

Pasul 2

Revenim pe site-ul Cufon la fila Generator. În fața noastră este o pagină cu multe setări. Sincer să fiu, nu am intrat în absolut toate setările, dar în timpul experimentelor am încercat altele și am obținut întotdeauna rezultatul dorit.

Dar, în orice caz, am pregătit câteva capturi de ecran cu setări de bază pentru a vă atrage atenția asupra punctelor importante.


După cum puteți vedea, există o fereastră de încărcare separată pentru fiecare tip de font:

  • font obișnuit
  • font aldine
  • cursive normale
  • cursiv aldine

Nu am înțeles pe deplin de ce a fost așa, dar l-am încărcat exact acolo unde descrierea mi-a caracterizat maxim fontul.

De exemplu, captura de ecran arată încărcarea unui font scris de mână. Este înclinat și destul de bine hrănit :).


În continuare, este evidențiat câmpul cu acordul de licență. Trebuie să bifați caseta și, prin urmare, să confirmați că fontul pe care îl încărcați poate fi utilizat pe web de către dezvoltatorul acestui font. Aici întrebarea este delicată, din păcate, printre varietatea mare de fonturi diferite de pe Internet, noi înșine nu știm exact ce font putem folosi și care nu. Prin urmare, acest articol este în întregime pe conștiința ta.

Următoarea captură de ecran.

  1. În primul câmp, indicăm că dorim să afișăm litere mari și mici, precum și cifre și semne de punctuație.
  2. Al doilea câmp este verificat implicit, nu am încercat să-l elimin.
  3. În al treilea câmp, asigurați-vă că selectați alfabetul chirilic și rus.

Am evidențiat o linie cu albastru - cei care generează fontul pentru WordPress au bifat aici.
Și ultimele setări.

  1. Nu am scris nimic în prima casetă, dar cred că câmpul este util din punctul de vedere că, dacă specificați domeniile pe care va fi folosit fontul, pur și simplu nu va funcționa pe alte domenii.
  2. Înțeleg că în câmpul superior vorbim despre ce dimensiune a fontului va merge implicit. Puteți fi de acord cu setarea sau puteți refuza bifând caseta. Personal, am încercat în diferite moduri și am fost mulțumit de ambele variante. Cred că depinde și atât de fontul în sine, cât și de ideea designerului de șabloane. Următorul element din fereastra 2, generatorul însuși recomandă oprirea acestuia, cu condiția să utilizați o dimensiune mică a fontului. Dacă este posibil, este mai bine să puneți ultima bifă, pentru că. datorită acestei setări, fișierul generat este mai mic, ceea ce va afecta, fără îndoială, încărcarea fontului în bine.
  3. Și în sfârșit, un acord cu condițiile de utilizare a generatorului.

Drept urmare, obținem un alt fișier, care este și el încărcat în găzduire.

Pasul 3

Singurul lucru rămas este să specificați în șablonul site-ului fișierele înainte de eticheta de închidere cod astfel:

După cum puteți vedea din cod, aplicăm fontul etichetei de titlu h1. Astfel, puteți specifica orice altă etichetă, astfel încât să afișeze fontul nostru chirilic.

De asemenea, puteți specifica nu o etichetă, ci un identificator:

Dar asta nu este tot. Dacă doriți să utilizați mai multe fonturi diferite pe un site simultan, atunci pentru toate fonturile noi trecem prin Pasul doi și le specificăm pe toate:

Dacă nu sunteți sigur de ortografia corectă a fontului dvs., deschideți fișierul generat corespunzător de la pasul 2 și găsiți informațiile de care aveți nevoie.

Cel evidențiat cu albastru este numele fontului.
Deci, pe unul dintre blogurile mele de testare, a fost inițial așa.


Și a devenit așa:

Cum se instalează un font chirilic personalizat în WordPress

Pentru utilizatorii WordPress, este încă mult mai ușor. Desigur, puteți merge până la capăt și și fontul va funcționa, dar există și un plugin gata făcut numit All-in-One Cufon. Puteți descărca pluginul atât de pe site-ul dezvoltatorului, cât și direct în panoul de administrare al blogului.


Instalarea pluginului. Activati. Accesați setările pluginului. În partea de sus sunt două mesaje de avertizare.


Primul este că ar trebui să creați un folder cufon-fonts în directorul wp-content/plugins/. Pentru a face acest lucru, conectați-vă prin FTP sau accesați panoul de control al găzduirii și creați un folder nou în folderul de pluginuri numit cufon-fonts. După aceea, primul mesaj dispare.

Al doilea mesaj spune că trebuie să plasați fișierul font generat în folderul creat, același fișier pe care îl obținem în Pasul 2. Încărcăm fișierul și mesajul dispare, în timp ce fontul apare în setările de mai jos, pe care acum pluginul " vede”.


Nu uitați să bifați caseta de lângă fontul pe care îl veți utiliza în șablon. Dar fontul nu funcționează încă. Mai jos este câmpul Cod Cufon, în care trebuie să specificăm la ce etichetă trebuie aplicat fontul nostru chirilic. În acest caz, trebuie să specificați un cod complet, fără alte denumiri.

înlocuiți ("h1");


Apropo, merită spus că dacă ați instalat Tema WordPress cu un font deja non-standard, deși nu are o ortografie chirilică, atunci trebuie să:

  1. Instalați pluginul All-in-One Cufon.
  2. Instalați fontul generat.

Nu este nevoie să introduceți Codul Cufon în câmpul de mai jos, de regulă, acest cod este deja scris în șablon. Dacă doriți să instalați un alt font, în plus față de cel existent, atunci va trebui făcută o astfel de intrare, așa cum am scris în exemplele de mai sus.

O notă foarte importantă.
Dacă ați optimizat titlurile din șablon conform articolelor mele - și atunci ar trebui să fiți extrem de atenți. Dacă vă amintiți, pe toate paginile, cu excepția celei principale, titlul blogului este în etichetă (în link). Trebuie să atribuiți un id sau o clasă acestei etichete, de exemplu:

Și apoi codul tău Cufon ar trebui să fie așa:

înlocuiți ("h1");
cufon.replace(".mycufon1");

În consecință, pentru titlurile articolelor, ar trebui să faceți același lucru.

Vă felicit, ați devenit proprietarul unui font non-standard și chiar s-ar putea spune unic, chirilic.

Singurul lucru asupra căruia nu m-am oprit a fost descrierea stilurilor CSS. Pe de o parte, stilurile pe care le aveam deja la fonturile implicite, după ce le-am înlocuit cu fonturi Cufon, s-au păstrat. Acestea. culoarea, marimea nu s-a schimbat. Pe de altă parte, majoritatea stilurilor repetă deja stilurile CSS standard, de exemplu. te poți descurca cu ceea ce ai deja. Dacă doriți să experimentați, atunci puteți vedea toate setările CSS în documentația de pe această pagină.
Asta e tot. Vă doresc să aveți cele mai frumoase bloguri în Runet.

Cum să schimbi fontul pe site-ul tău? Cum se conectează fonturile publice din biblioteca Google Fonts și ce se întâmplă dacă fontul este exclusiv? Dacă întrebările sunt relevante pentru dvs., citiți mai departe.

Formate de font

Ca și alte tipuri de fișiere, fonturile vin în formate diferite. Sunt câteva zeci de ele în total, iar TTF, EOT, WOFF și SVG sunt considerate cele mai populare dintre cele utilizate în rețea. Mai mult, fiecare este acceptat doar de anumite versiuni ale software-ului.

Pe lângă faptul că aparțin unor sisteme specifice, ele diferă prin tehnologia de redare a caracterelor și metoda de compresie. Volumul fișierului primit depinde de acesta din urmă, care afectează direct timpul de descărcare a acestuia și, prin urmare, viteza de afișare a paginii. Acest lucru este critic doar atunci când instalați un font nou, deoarece după descărcarea fișierului care îl conține va fi stocat în cache. În momentul de față, la încorporarea unui anumit font pe un site, este necesar să pregătiți toate aceste formate de font: TTF (sau OTF), WOFF, EOT și SVG .

Conectarea fonturilor Google

Pentru a facilita lucrul cu fonturile, Google a creat serviciul Fonturi, care conține câteva sute de fonturi, inclusiv zeci de fonturi chirilice.

După selectarea fonturilor dorite și pot fi mai multe dintre ele, serviciul formează o fereastră minimizată cu modurile „standard” și „import”, fiecare dintre ele având două tipuri de cod:

  • adauga special. o linie la titlul documentului HTML între etichete + scrieți combinația dorită în fișierul CSS;
  • sau scrieți o altă linie între etichete