Extras din cartea remarcabilă "The Big Book CSS3 3rd Edition" de David McFarland despre fonturile web și modul în care sunt conectate folosind directiva @ font-face.
Am învățat multe despre acest subiect pentru mine. În special, două moduri de a conecta fonturi sunt dotate cu servicii de fonturi Google și o densitate numerică fonturi la scară, resurse pentru a găsi fonturi libere, subtilitățile de a lucra cu un generator de FontSquirrel, resurse pe pictograma Font. Pentru mine, informațiile au fost extrem de utile și interesante.
Mai jos am prezentat un scurt rezumat al tuturor aspectelor care păreau interesante și noi pentru practica mea, revăzute în cuvintele mele. Sper că acest material va fi util nu numai pentru mine.
Conectarea fonturilor web cu @ font-face:
- conectând un font non-standard cu directiva @ font-face
- atribuirea unui font conectat utilizând proprietatea familiei font-ului
Directiva @ font-face specifică (numele vorbește de la sine - directiva!) Pentru ca browserul să facă două lucruri:
- creați un nume de font specificat
- încărcați glifurile pentru un font din locația pe care o specifică
Proprietatea familiei font-ului îi spune browserului să aplice un font cu numele specificat elementelor selectate ale paginii.
Există mai multe formate pentru fonturile web. Cele mai obișnuite dintre ele: EOT, WOFF, OTF sau TTF,
Formatați EOT. care este înțeleasă de browserele IE până la versiunea 8. De fapt, acest format de fonturi este creat și există numai pentru binele acestui browser și versiunile acestuia. Pentru a obține un font EOT, este necesar un software special pentru a converti formatul TTF în OET.
Formatul WOFF (Web Open Font Format) este cel mai bun pentru utilizarea astăzi pe Web: cea mai mică și mai ușoară, susținută de toate browserele moderne (inclusiv IE9 și de mai sus); acest format a fost creat special pentru Web. De fapt, aceasta este o versiune ușoară a formatului TTF sau OTF.
Formate OTF (Tip deschis Font) și TET (True Type Font) - acesta este cele mai comune fonturi de calculator, care sunt utilizate în majoritatea sistemelor de operare (Windows, Macintosh, Linux) și aplicații pentru aceste sisteme. Dar, în plus, aceste fonturi pot fi utilizate cu ușurință pe Internet.
Formatul SVG nu are niciun format de fonturi, ci format grafic, grafică. Particularitatea acestui format este că grafica în acest format este creată exclusiv cu ajutorul vectorilor, adică - formule matematice.
Din această cauză, imaginile în acest format sunt scalate fără pierderi de calitate - când creșteți dimensiunea imaginii, calculatorul trebuie să recalculeze punctele vectoriale. Particularitatea acestui format de grafică a permis aplicarea acestuia pentru a crea "fonturi". Adică, un font normal este convertit într-un format SVG, unde fiecare font este de fapt o imagine într-un format SVG scalabil.
De ce ai nevoie de astfel de dificultăți? Lucrul este că browserele din sistemul de operare Android (OS foarte obișnuit pentru dispozitivele mobile) pot afișa fonturi web numai în acest format. Browserele pentru iPhone (Safari 4.1 și mai jos) nu știu, de asemenea, cum să recunoască un font web. Aici, aceste imagini "inestetice" și împinse în formă de fonturi - "nu poți mânca mâncare obișnuită, așa că mănânci cel puțin!".
Problemă juridică privind utilizarea fonturilor
Întrebarea poate fi formulată succint în următoarele două fraze. Toate fonturile sunt împărțite în plăți sau gratuite.
Fonturile plătite sunt împărțite în acelea care:
Pentru a nu deranja problema confuză a unei licențe pentru fonturi, puteți utiliza serviciile web Google Fonts sau TypeKit. pe care se colectează toate fonturile care pot fi utilizate pe Web. Fonturile de pe aceste servere sunt gratuite (Google Fonts) sau plătite (TypeKit).
O scurtă listă de surse de fonturi gratuite. care pot fi utilizate pe Web:
Singura limitare a acestui serviciu este faptul că are propria sa listă neagră, care conține fonturi care sunt interzise sub licență pentru utilizare pe Web. Cu alte cuvinte, dacă "împingeți" această licență cu un font licențiat cumpărat într-un mod pirat, atunci el refuză să genereze această licență.
Generatorul generator de fonturi @ nu este singurul tip de serviciu Web. Există generatori similari, care, în plus, au o "iluzibilitate" în ceea ce privește licența fonturilor convertibile.
Ordinea de specificare a formatelor de fonturi din directiva @ font-face este importantă și ar trebui să fie după cum urmează:
- Format EOT numai pentru Internet Explorer 8 și mai jos
- WOFF - fontul cel mai modern și mic, care este înțeles de majoritatea browserelor moderne
- TTF - font destul de mare și destul de depășit
- SVG - cel mai mare font de dimensiune și volum, deci trebuie plasat pe ultima linie. În plus, acest format de font este utilizat numai în browserele sistemului de operare Android sau în browser-ul Safari 4 (adică iPhone)
Utilizarea corectă a fonturilor web conectate Liga Gothic. Specifică primul rând numele fontului pentru conexiunea, și apoi - fonturi de back-up în mod deliberat instalate în sistemul utilizatorului (numele fontului, garantată de sistemul existent, și font-family).
Cititorul atenți va acorda atenție celei de-a doua linii și va spune: acest lucru este inutil, un fel de prostii. De fapt, nu exact. Browserele întotdeauna încearcă să redă anteturile cu caractere aldine, în mod implicit. Prin urmare, aici afirmăm că browserul nu o face, asta-i tot.
În plus față de litere, fonturile pot consta din icoane sau imagini. Resurse pe tema pictogramelor și icoanelor:
Tipuri de fonturi
La conectarea fonturile instalate pe computer, de obicei, nu se pune problema, iar noi nu ne gândim cum se face că atunci când specificați browser-ul face textul cu caractere aldine folosind tag-ul puternic Intri cu caractere aldine; când specificați textul prin eticheta em, textul este făcut în mod italic; și cu text italic îndrăzneț prin etichete puternice em este făcută cu caractere aldine italice. Se pare că browserul face textul așa cum îl spunem.
De fapt, nu este așa. Sau nu exact. Browserul trage de fapt fontul în modul indicat, dar cu fontul în sine nu poate face nimic. El ia doar fontul specificat de etichetă și îl imprimă pe ecran. De fapt, designerii sau companiile care dezvoltă fonturi creează fonturi în acest fel: artistul desenează patru seturi de același font. Aceasta este, setul de caractere este tras în tracings normale (obișnuite), apoi trage un set de caractere cu caractere cursive (italice), atunci setul de caractere în caractere aldine (bold), și în cele din urmă un set de caractere cu caractere aldine cursiv (italic bold). Toate aceste patru seturi de caractere sunt de fapt fonturi separate, deși poartă un nume comun (Georgia, Tahoma, Helvetica și așa mai departe).
Când browser-ului i se spune care font să se aplice, acesta pur și simplu ia un font cu forma specificată și îl afișează. De exemplu, fontul Arial are patru tipuri de contururi. Dacă specificați că aveți nevoie de o caractere aldine, browser-ul ia bold Arial. Browserul în sine nu poate converti o față în alta în nici un fel. El poate face un singur lucru - încercați să faceți și conturul obișnuit al "italic". O comandă care îi spune unui browser să efectueze o astfel de sarcină este numită oblică. În acest caz, browser-ul se înclină prost în toate literele fontului cu 45 de grade, și asta este. Rezultatul rezultat poate fi doar groaznic, astfel încât această comandă este folosită foarte rar.
În cazul fonturilor web, un web designer trebuie să-și facă griji pentru conectarea individuală a tuturor celor patru tipuri de fețe ale fontului selectat. Din cauza browserului IE8, conectarea fonturilor web utilizând directiva @ font-face este semnificativ complicată și poate fi efectuată în două moduri: simplu. care IE8 nu înțelege (dar înțelege toate celelalte browsere) și complexe. care vor fi disponibile și IE8 de asemenea.
O modalitate simplă de a conecta un font web
O modalitate simplă este adăugarea a două reguli CSS în plus față de directiva @ font-face: font-weight și font-style. De obicei, aceste două reguli stabilesc ca browserul să afișeze textul cu caractere aldine și italice. Dar, în interiorul directivei @ font-face, aceste reguli îndeplinesc un rol diferit, forțează browserul să încarce un font web cu stilul specificat și conținutul de grăsime. Pentru a fi mai clar, să dăm un exemplu de conectare a unui font web PTSans cu patru opțiuni pentru afișarea acestuia:
- src: url ('PTSansBoldItalic.eot') - locația fontului;
- font-weight: normal - încărcați fontul conținutului de grăsime specificat;
- font-style: normal - încărcați fontul stilului specificat.
Normele CSS impun ca, în patru opțiuni de afișare a fontului, matricea PTSans să fie populată de fiecare dată printr-un apel separat la funcția @ font-face. După aceea, este suficient să conectați variabila PTSans la elementele selectate ale paginii:
Și apoi, cu etichete HTML, puternice sau em, specificați ce font se aplică pentru elementele specificate:
Browser „trage“ din matrice PTSans fontul mărcii (italic bold sau italic sau bold) și se aplică la elementele de pagină specificate.
Avantajul acestei metode de a conecta un font web este universalitatea sa. Este suficient să declare fontul o dată cu directiva @ font-face și regula:
... apoi pentru a controla afișarea acestui font prin intermediul unor etichete puternice și etichete semantic corecte.
Un mod complex de a conecta un font web
Din păcate, IE8 nu înțelege cum să conecteze fontul web descris mai sus. Mai exact, acest browser nu înțelege cum să conecteze diferite stiluri de fonturi la același nume de font. Dacă creați regulile descrise mai sus și încercați să descărcați pagina HTML rezultată în IE8, atunci tot textul va fi afișat ca: font-family: PTSans; font-weight: normal; font-style: normal.
În acele locuri unde se aplică etichete puternice sau em. Browserul IE8 se va face din fontul PTSans bold și italic. și să nu includem fonturi prefabricate în aceste contururi. Rezultatul unei astfel de "autoactivități" va fi deplorabil.
Drumul este folosirea numelor de fonturi diferite în directiva @ font-face. Un exemplu de varianta de conectare a unui font web care este de inteles pentru IE8 este prezentat mai jos:
Rețineți absența regulilor privind greutatea fontului și stilul fontului în cele patru directive @ font-face. Acest cod pare mai ușor de înțeles și mai logic decât prima opțiune. Și ca totul este bine, dar întrebați acum să ia în considerare un exemplu simplu de paragraf cu etichete puternice și em. la care ar trebui să se aplice fontul PTSans.
Evaluați acest CSS - "crocodil" de mai jos. Cât de greoaie și ciudat este! Și dacă considerați că pe pagina HTML va trebui să aplicați fontul PTSans nu numai pentru elementul p, ci și pentru antetele h1. h2. link a. Cât de mult "bloat" foi de stil în acest caz! Și dacă dintr-o dată (Doamne ferește!) Trebuie să faceți modificări acestui cod?
Pentru a aplica sau a nu folosi a doua modalitate de conectare a fonturilor web este problema cât de mult este necesar suportul IE8 pentru un anumit site. Trebuie remarcat faptul că ponderea IE8 este în scădere și va continua să scadă.
Google Fonts Fonts
Pentru a nu deranja cu căutare de fonturi, descărcați pe formatul TET sau OTF, conversia de tip generator de FontSquirrel Generator, conectați stilurile CSS-derivate în proiect, cu ajutorul a numeroase directive font-face. Puteți utiliza serviciul Google Fonts. Avantajul acestei metode constă în simplitatea metodei și fiabilitatea acesteia - este suficient să obțineți o linie de legătură pe serverul Google și să o plasați în proiectul dvs.
Prima metodă este simplă, dar are un dezavantaj - tag-ul de legătură va trebui să fie conectat la fiecare dintre paginile HTML dezvoltate ale proiectului.
În același timp, a doua modalitate cu directiva @import este mai concisă - conectați-o doar la partea de sus a foilor de stil, astfel încât fonturile selectate să fie aplicate tuturor paginilor HTML.
În Google, densitatea fontului nu este indicată cu cuvintele cheie normale. îndrăzneț sau mai îndrăzneț. iar în scala numerică - 100 până la 900. Valoarea de 400 corespunde normei. 700 - bold.
De exemplu, codul poate arăta astfel. Pentru elementul em, setați fontul Gentium Book Basic la densitatea normală a fontului italic:
Aceasta scindează fonturile web.