Fiecare web designer visează să creeze un site web cu o tipografie frumoasă. Dar, din păcate, browserele acceptă doar câteva fonturi, așa-numitele fonturi „web-safe”. LA set standard include următoarele fonturi: Arial, Verdana, Times, Georgia, curier nouși alții câțiva.
Căști definește un set de unul sau mai multe fonturi, fiecare constând din caractere care au comun caracteristici de proiectare- greutate, stil, design, greutate, greutate, dimensiune, de exemplu, fonturi sans-serif (sau sans serif), fonturi serif (antiqua). Tipul este format dintr-un set de caractere (cifre, litere, semne de punctuație, Simboluri speciale, poate consta și din caractere nealfabetice).
Font este un set de caractere de o anumită dimensiune, greutate și stil. De exemplu, stilul italic Times New Roman de 16 px este un font, iar stilul italic Times New Roman de 10 px este altul.
regula @font-face vă permite să conectați o varietate de fonturi personalizate. Browserul încarcă fonturile în cache și le folosește pentru a stila textul de pe pagină. Această abordare se numește încorporarea fontului, și fonturi încorporate - fonturi web.
Regula @font-face trebuie plasată înaintea tuturor celorlalți regulile css, deoarece acest truc va îmbunătăți performanța paginii. Fonturile descărcabile pot fi plasate în folder special fonturi create pe server.
Pentru a include un font folosind regula @font-face, trebuie să:
1) încărcați fișierul cu fonturi pe server în mai multe formate pentru a fi acceptate de toate browserele,
2) specificați numele fontului, înregistrați un link către fișier și setați descrierea fontului,
3) adăugați numele fontului la proprietatea font-family a elementului care va fi redat în acel font.
@font-face (familie de fonturi: „WebFont”; src: format url(WebFont.eot?) („eot”), /* IE8+, semn? eludează eroarea în formatul de gestionare a valorii src */ url(WebFont.woff) ("woff"), /* toate browserele moderne, IE9+ */ url(WebFont.ttf) format ("truetype"); /* toate browserele moderne */ ) p (familie de fonturi: "WebFont", Arial, sans serif ;)
Acest cod îi spune browserului să afișeze textul din interiorul elementului
Utilizarea fontului Web. Dacă browserul din anumite motive nu poate încărca un anumit font, îl va alege pe cel potrivit din lista de fonturi. Iterează peste ele în această ordine până când găsește un font pe care îl poate folosi cu succes.
În cadrul fiecărei familii de fonturi, pot fi definite până la nouă greutăți. Prin urmare, pentru fiecare font încorporat, precum și pentru fiecare stil, trebuie să setați o regulă separată @font-face, de exemplu. nu puteți declara două fonturi diferite sau un font din aceeași familie într-o regulă, dar stiluri diferite si greutate.
@font-face (familie de fonturi: "WebFont"; src: url(WebFont.eot?) format("eot"), url(WebFont.woff) format ("woff"), url(WebFont.ttf) format( „truetype”); greutate font: bold; stil font: cursiv; ) @font-face (familie de fonturi: „WebFont”; src: url(WebFont.eot?) format(„eot”), url(WebFont .woff) format(„woff”), url(WebFont.ttf) format(„truetype”); greutate font: 400; stil font: normal; )
LA vedere generala fontul poate fi setat următoarele proprietăți:
@font-face (familie-font: „Nume font”; src: format url()(" "); varianta font: ; font-stretch: ; greutate font: ; stil font: ; )
Dacă presupuneți că computerul utilizatorului are fontul instalat și doriți ca fontul să fie descărcat numai după ce verificați dacă utilizatorul îl are, puteți utiliza valoarea local() pentru a seta adresa:
@font-face (familie de fonturi: „WebFont”; src: local(„WebFont”), url(WebFont.eot?) format(„eot”), url(WebFont.woff) format(„woff”), url (WebFont.ttf) format ("truetype"); greutate font: bold; stil font: cursiv; )
Formate de fonturi web
Proprietatea @font-face are sprijin bunîn browsere, dar folosesc browsere diferite diferite formate fonturi. Există patru formate principale de font:
format WOFF(Web Open Font Format), un format de font web deschis dezvoltat de Mozilla. Din punct de vedere tehnic, WOFF nu poate fi numit format de font, deoarece este doar un wrapper cu funcție de compresie. Formatul comprimă fonturile TTF/OTF pentru utilizare pe web. De asemenea, WOFF vă permite să adăugați metadate la fișier, cum ar fi informații despre licență.
formate OTF/TTF(Fontul OpenType și Fontul TrueType) funcționează în majoritatea browserelor. Ambele formate sunt distribuite gratuit.
format EOT(Tip deschis încorporat) creat Dezvoltatorii Microsoft, reprezintă copie comprimată Font TTF, reutilizare care este interzis Tehnologii DRM(Managementul drepturilor digitale, control digital drepturi de acces). Acceptat numai în IE începând cu versiunea 8.
SVG/SVGZ(Scalabe Vector Graphics) este un tip de fișier de font care reprezintă fața vectorială a unui font. De regulă, are dimensiuni mai mici fișiere, îmbunătățind astfel performanța pe dispozitive mobile. Funcționează în Opera Mobile și iOS Safari.
Dificultăți în utilizarea fonturilor încorporate
1) Fișierele cu fonturi pot fi dimensiuni mari, așa că adăugarea @font-face încetinește încărcarea paginii în unele cazuri.
2) Unele fonturi au restricții de licențiere care împiedică utilizarea gratuită.
3) Unele fonturi pur și simplu nu arată bine pe paginile web.
În articolul meu anterior „” am trecut în revistă două dintre cele mai multe servicii populare pentru încorporarea fonturilor în aspect și, de asemenea, a promis că va dezvălui secretele utilizării sale în articolul următor.
Să presupunem că designerul a folosit în aspectul său foarte la modă, cel mai popular Font de semnalizare MyriadPro de la Adobe. Google WebFonts nu îl are, fie și doar pentru că Adobe nu l-a făcut gratuit.
Dar sarcina merită, iar acum la obiect. Te-ai gândit cum încorporați în aspectul MyriadPro.
Mergem aici și vedem următoarea poză:
Adăugați propriul font sau fonturi (vom avea Myriad Pro Regular) și selectați modul „Expert”. Putem alege formate de fonturi - recomand să lăsați totul așa cum este - funcționează, conform macar, pentru toti versiuni moderne browsere. Operă veche(acum doi ani) a funcționat, dacă nu mă înșel, cu SVG, dar a fost o randare groaznică și fără nici un anti-aliasing.
Alegeți Subsetare personalizată. Acest lucru este necesar pentru a selecta exact acele intervale de caractere (adică caractere de limbă) de care avem nevoie. Și avem nevoie, cel mai probabil, de „engleză”, „chirilic”, iar uneori adaug „deutch”. De asemenea, adaug ceea ce este în captură de ecran - de fapt, nu știi niciodată de ce alte simboluri ai putea avea nevoie și nu vreau să repet această procedură a doua oară (împreună cu integrarea).
Există chirilic? Minunat. Să trecem la pasul următor:
Ne putem încorpora fonturile direct în CSS folosind Base64 Encode (toate browserele moderne acceptă acest truc până la urechi). Acest lucru va avea un efect pozitiv asupra reducerii încărcării pe server (numărul de solicitări către acesta va scădea), precum și asupra vitezei de încărcare a paginii.
De asemenea, puteți schimba numele CSS-ului rezultat și puteți adăuga tot felul de opțiuni care măresc dimensiunea fișierului și nu sunt cu adevărat necesare în practică.
Restul nu este atins - nu merită.
Mințim cu privire la faptul că acest font este permis nerestricționat să fie utilizat pe Internet (și de fapt - doar în machete .PSD, judecând după EULA Adobe) și obținem un fișier zip.
În el vom vedea fișierul „font-name-demo.html” - deschideți-l și vedeți o placă frumoasă cu fonturile noastre. Pentru a verifica alfabetul nostru chirilic, mergem la „Glyphs & Languages”, derulați în jos spre sfârșitul paginii.
Ne verificăm pe toate browsere moderne: Chrome, Firefox, Internet Explorer 9, Opera și Safari. Există chirilic? Minunat.
Ei bine, acum să încorporăm totul în CSS-ul nostru (vezi în fișierul stylesheet.css) și să copiem fișierele cu fonturi în folderul nostru - pentru orice eventualitate:
Acum să ne uităm la rezultat:
Lucrări. Totul este foarte simplu și frumos.
O scurtă poveste despre cum să generați corect un font pentru RuNet. Veverița de serviciu burgheză, deja cunoscută pe Habré, este în centrul atenției.
Dacă frumusețea salvează lumea, atunci designerii interfețe web Aceasta este armata răului. Nu mă înțelege greșit, cred în sinea mea web designer, și nu suport tipașii strâmbi, trebuie să-mi tastez propria cercetare psd, cu aceleași mâini strâmbe. Și de aici începe distracția...
Ca totul în practică:
1. În primul rând, totul depinde de alegerea stivei de fonturi potrivite pentru Runet, iar dacă nu pentru asta, atunci a trebuit să-l țin cont. Prin alegere teancul dorit hrănește-l corpului, ceva de genul acesta:
Corp(
familia de fonturi: „Arial Black”, „Helvetica CY”, „Nimbus Sans L” sans-serif;
dimensiunea fontului: 12px;
}
Ca rezultat, obținem un font de bază care este aproape de ceea ce folosim în aspectul nostru de design. Excelent!
2. Mulțumiți de eficiența noastră, ne uităm cu atenție la aspectul de design al lucrării și în locuri (fie în meniu, fie în subsol) vedem unul popular, aproape printre toate imprimantele: Myriad Pro, Arial Narrow sau altul Europa de la Starcraft. Trei opțiuni îmi vin imediat în minte: înlocuiți cu imagini, puneți bine JS (da, cel care este cufon) sau atingeți din nou proprietatea CSS @font-face. Da, ideea de a abandona diavolul unei scale universale și de a folosi o stivă sigură peste tot, desigur, nu apare pentru noi - noi, așa cum se spune, „aducem” frumusețea la viață.
Prima opțiune care mi-a venit în minte este să înlocuim totul cu png - renunțăm imediat, așa cum au făcut străbunicii noștri în zorii paleoliticului;
A doua opțiune (cufon.js) nu se potrivește clientului nostru, Dumnezeu să-l binecuvânteze - a existat un client treaz pe pământ; Deci, să trecem la punctul trei.
3. Căutăm fontul de care avem nevoie din măruntaiele Windows 7 pe următoarele linii: „Start → Panoul de control → Fonturi”, copiați-l în folderul local pe computerul cu proiectul și deschideți generatorul de fonturi fontsquirrel . În cazul meu - MyriadProCondensed.
Pentru noroc, faceți clic pe butoane și obțineți terminat css proprietatea seriei:
@font-face(
font-family: „MyriadProCondensed”;
src: url("myriadpro_cond-webfont.eot");
src: url("myriadpro_cond-webfont.eot?#iefix") format("embedded-opentype"),
url("myriadpro_cond-webfont.woff") format("woff"),
url("myriadpro_cond-webfont.ttf") format ("truetype"),
url("myriadpro_cond-webfont.svg#MyriadProCondensed") format("svg");
greutate font: normal
stil font: normal
}
De asemenea, obținem un exemplu despre cum va arăta fontul nostru în browsere în arhiva de descărcare. Și totul ar fi bine, dar rezultatul obținut nu funcționează așa cum avem nevoie. Și se pare că au pus EXPERT…în setări și chiar a selectat unele casete de selectare - dar totuși nu există niciun efect - literele rusești nu doresc să devină MyriadProCondensed.
Am căutat pe google timp de două zile, primul lucru pe care l-am deschis a fost Habr, de unde am aflat de fapt despre serviciu, mulțumesc, nu am găsit nimic pe această problemă și am continuat să „google” starea de spirit. Două zile mai târziu, a apărut starea de spirit și am început să demontez serviciul www.fontsquirrel.com pe rafturi și anume să caut acolo localizarea alfabetului chirilic.
4. Găsit! Tot ce a fost necesar a fost să pună „butonul radio”. subconjunctura a pozitiona Subsetare personalizată. În conținutul drop-down al setului, bifați caseta limba pe poziție chirilic.
5. Ura câștigat. Hai să bem o cafea. Vă mulțumesc tuturor pentru răbdare.
P.S. Nici măcar nu vă voi convinge să faceți stivele de layout/interfață sigure. Să fie pe conștiința noastră, dar știu un lucru, atâta timp cât există acest tip de manie - lumea se rostogolește încet, dar sigur în abis. Nu este nimic frumos în faptul că fontul nu poate fi citit de pe ecranul monitorului - nu!
Astăzi vreau să vorbesc despre proprietate CSS@font-face , ceea ce face mai ușor și mai convenabil utilizarea unui font personalizat pe site. Dar există un „dar” care trebuie rezolvat - diferite browsere necesită formate diferite fișiere cu fonturi.
Introducere
Conform statisticilor de pe acest moment cel puțin 92% dintre browserele desktop funcționează corect cu @font-face . Totul se face simplu: denumim fontul, indicăm calea către acesta, îl folosim direct în CSS:
// Declararea fontului
@font-face(
font-family: „nume font”;
src: url("cale/spre/it");
}
// Aplică fontul
p(
font-family: „Nume font”, Arial;
}
Aici, src: url specifică calea către fișierul cu fontul, src: local — numele fontului de pe mașină localăîn cazul în care utilizatorul are deja acest font. Dar nu totul este atât de simplu, browsere diferite au nevoie de diferite formate de font.
Formate de font
Fonturile pot fi în formatele TTF , OTF , EOT , SVG și WOFF:
- Internet Explorer (toate versiunile) - EOT;
- Firefox (din 3.5) - TTF/OTF (WOFF adăugat de la versiunea 3.6);
- Opera (incepand de la 10) - TTF/OTF;
- Chrome (toate versiunile) - SVG (TTF/OTF adăugat la sfârșitul lunii ianuarie 2010);
- Safari (din 3.2) - TTF/OTF.
După cum puteți vedea, avem cel puțin patru tipuri de fișiere care trebuie încărcate.
Utilizare corectă
Pentru a nu pierde mult timp creând de fiecare dată mai multe fișiere cu fonturi și diferite sintaxe de conexiune, oameni buni a făcut un serviciu - Font veveriță. Intrăm, descarcăm fontul, obținem o arhivă cu un exemplu de utilizare și tipurile de fișiere necesare.
Acum puteți verifica dacă totul funcționează așa cum ar trebui peste tot. De dragul interesului, vă sugerez să vă uitați la felul în care arată încrucișat @font-face:
@font-face(
font-family: „TheanoDidotRegular”;
src: url("theanodidot-regular-webfont.eot");
src:local("☺"),
url("theanodidot-regular-webfont.woff") format("woff"),
url("theanodidot-regular-webfont.ttf") format ("truetype"),
url("theanodidot-regular-webfont.svg#webfontE40g3tc3") format("svg");
greutate font: normal
stil font: normal
}
Asta e tot. Nu abuzați de fonturi diferite ;-)
Capacitatea de a încorpora orice fonturi care vă plac în site-uri web prin @font-face este un truc stilistic suplimentar care are scopul de a sparge monotonia fonturilor obișnuite ale sistemului. Ar fi cu siguranță prea simplu și rar dacă toată lumea ar folosi un singur font. În acest articol, vom vorbi doar despre asta.
Această scurtă introducere la @font-face vă va ghida prin subiectul integrării fonturilor prin @font-face. Dacă doriți să utilizați niște fonturi speciale, atunci aici veți înțelege cum să le integrați pe serverul dvs. În acest articol, vom încerca să enumerăm tot felul de informații utile care se referă la acest subiect.
Formate de fonturi web
EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD, PRO, XSF, pentru a numi doar câteva. Probabil că este mai ușor să-ți găsești calea de ieșire din junglă decât un font care ți se potrivește 100%. Să aruncăm o privire la avantajele și dezavantajele integrării fonturilor.
tip adevărat
Acest format a fost creat în 1980 în cadrul competiției Adobe Type 1 pentru PostScript. Acest format, bazat pe noile tehnologii, le-a înlocuit pe multe altele care erau utilizate până în acel moment. Microsoft a început să folosească formatul TrueType și a devenit în curând fontul implicit al sistemului.
tip deschis
Cândva, Microsoft și Adobe au făcut echipă pentru a crea formatul dat. Destul de ciudat, se bazează pe formatul TrueType, dar are elemente suplimentare încorporate, cum ar fi ligaturi, caractere contextuale și așa mai departe. Cu toate acestea, multe browsere încă nu acceptă acest format. Sunt două versiuni diferite Formatul OpenType bazat pe tehnologii diferite. Mai detaliat aici:
- OpenType cu contururi TrueType (OpenType TT) și
- OpenType cu contururi PostScript (OpenType PS)
Fonturile bazate pe formatul TrueType sunt mai potrivite pentru Web și va fi grozav dacă Microsoft rezolvă toate problemele de afișare. structurilor Fonturi TrueTypeși fonturile OpenType sunt foarte asemănătoare și sunt acceptate în Safari 3.1 și versiunile ulterioare, Firefox 3.5 și Opera 10 (și versiunile mai noi).
EOT
Internet Explorer acceptă formatul (EOT) din 1990. Spre deosebire de formatele TrueType și OpenType, oferă următoarele caracteristici:
- Fonturile EOT sunt mai compacte decât OpenType, ceea ce reprezintă un avantaj semnificativ pentru Web.
- Fonturile EOT pot fi utilizate numai în cadrul unui domeniu. Acesta este un lucru foarte convenabil, pentru că. ajută la lupta pentru drepturi licențiate asupra fonturilor.
Dacă doriți să convertiți font TTFîntr-un fișier EOT, puteți utiliza instrumentul EOTFast (gratuit) disponibil numai pentru utilizatorii Windows.
WOFF
De fapt, formatul WOFF este o nouă încrucișare a formatelor TrueType și OpenType, care de fapt nu îl face nou.
WOFF folosește un algoritm numit zlib, care poate reduce semnificativ dimensiunea fișierului, cu aproximativ 40%. Mai mult, este posibil să adăugați metadate precum o licență etc. la acest font. Cu toate acestea, astfel de date nu pot fi validate de browsere.
Acest format este acceptat browser Firefox, începând cu versiunea 3.6 și Google Chrome, începând cu versiunea 5.0. Toate celelalte browsere fac în prezent toate modificările necesare pentru a accepta acest format.
SVG
Fonturile SVG conțin simboluri ca elemente și atribute SVG standard și sunt reprezentate ca imagini vectoriale. Dar, destul de ciudat, acesta este unul dintre puncte slabe a acestui format. În timp ce EOT, WOFF, PostScript și OpenType pot fi comprimate, această operațiune nu poate fi aplicat fonturilor SVG.
Fonturile SVG nu sunt foarte alternativa buna pentru fonturi Web, iar iOS 4.2 este primul versiune mobila Safari care acceptă acest format. Cu toate acestea, acest format este singurul pe care îl puteți utiliza pentru iPhone și iPad-uri care rulează iOS 4.2.
Încorporarea fonturilor de pe serverul dvs
Nu trebuie să aveți licență pentru a utiliza un anumit font în designul dvs. Puteți utiliza fonturi deja licențiate din aplicațiile dvs. și le puteți trimite către serverul dvs. Web.
Acest font - da, acesta - nu
Înainte de a începe conversia în bloc a fonturilor obișnuite în fonturi web, încercați să determinați dacă puteți face acest lucru conform acord de licențiere. LA caz general, licența comercială nu permite utilizarea fonturilor din diverse programeîntr-un alt loc. Deci nu veți putea folosi regula @font-face.
În același timp, există o cantitate mare fonturi și servicii specifice pentru Web. De asemenea, puteți licenția propriile fonturi de pe MyFonts.com.
Până când formatul WOFF devine standardul oficial, puteți utiliza aceste tehnici și servicii ca mulți alți dezvoltatori.
Încorporarea fonturilor gratuite
Din fericire, pe Internet puteți găsi o mulțime de fonturi gratuite, pe care îl puteți folosi pentru site-urile dvs. O listă de fonturi pe care le puteți încorpora în siguranță poate fi găsită la webfonts.info.
Încă unul colectie imensa situat la resursa Font Squirrel. Aici puteți descărca un întreg set de fonturi care ulterior vor trebui convertite datorită @font-face Kit Generator .
Înainte de a descărca un font, asigurați-vă că fontul poate fi convertit pentru web!
Însăși ideea de a folosi diferite fonturi pe paginile web a crescut în ultimii doi ani. Nu se poate decât să viseze la un asemenea ritm de dezvoltare. Cu toate acestea, dezvoltatorii încă trebuie să se confrunte cu o mulțime de probleme de afișare între browsere. Toate aceste probleme vor fi rezolvate atunci când Web Open Font Format (WOFF) este acceptat ca standard de comunitatea dezvoltatorilor.
Un alt obstacol, care a fost deja menționat mai devreme, este prevalența operației sisteme Windows, în care redarea subpixelilor este dezactivată (fie implicit în Windows XP, fie după preferințele utilizatorului). Comparat cu fonturile de sistem, majoritatea fonturilor web se redau la o calitate scăzută din cauza lipsei de redare sub-pixel. Desigur, în timp această problemă va fi rezolvată pe măsură ce utilizatorii înlocuiesc hardware-ul vechi și Sisteme de operare. În același timp, Internet Explorer 9 funcționează cu procesorul de text DirectWrite, care oferă o procesare îmbunătățită semnificativ.
Utilizarea fonturilor web în designul dvs. necesită testare extinsă ca browsere diferiteși platforme, rezultatul poate fi exact invers. Dacă ecranul are rezolutie scazuta, și nu există suport pentru randarea sub-pixeli, atunci afișajul va fi distorsionat sau va fi complet absent. Cel mai simplu mod de a rezolva această problemă este ca toată lumea să-și schimbe hardware-ul și sistemele de operare! Dar nu va) Desigur, puteți utiliza JavaScript pentru a afla despre suportul pentru randarea subpixelilor.
Afișare text
Chiar dacă unele machete web se apropie de complexitatea machetelor de tipărire (mulțumită setului bogat de fonturi imbricate), există mai multe o problema mare: Browserele nu fac automat silabe. Mai ales în limbile unde sunt multe cuvinte lungi(de exemplu, germană), care are un efect negativ asupra lizibilității textului.
Dar acest lucru poate fi corectat cu Ajutor JavaScript silabarea pe partea clientului care a fost dezvoltată de phpHyphenator. Dar cu acest instrument, pot apărea probleme de integrare în browser, dar în viitor, cred că acest lucru va fi rezolvat.
Chips OpenType
De asemenea este si partea din spate medalii. Cert este că programe precum InDesign și QuarkXPress 7+ nu acceptă standardele tipografice OpenType.
Caracteristicile și opțiunile OpenType permit ca acest format să fie dezvoltat astfel încât să poată avea mai multe posibilitati. Dacă aplicația acceptă aceste cipuri, atunci unele caractere pot fi înlocuite automat.
Unele fonturi pot fi utilizate numai cu suport OpenType. OpenType cuprinzător poate conține glife și alte elemente. Cu funcția OpenType, versiunea de bază va fi înlocuită cu o versiune cu elementele corespunzătoare care sunt suportate în software. Exemplu din imagine:
Firefox 4 lansat recent acceptă toate caracteristicile OpenType de mai sus. Acum vă puteți bucura de aceste beneficii în următoarele moduri:
H1 ( -moz-font-feature-settings: "smcp=1"; )
Microsoft a furnizat o listă cu funcțiile OpenType pe care le acceptă. Să sperăm că toate celelalte browsere urmează exemplul.
Sperăm că acest articol a fost informativ pentru tine! În viitorul apropiat, este puțin probabil ca toate aceste probleme să fie rezolvate. Nu putem decât să așteptăm.
