De la autor: Bun venit pe paginile blogului Webformyself. În acest articol, aș dori să răspund la întrebarea cum să setați un font în html. Unii oameni încă procedează în mod greșit, așa că este important să analizăm problema mai amănunțit.
Cum a fost setat fontul înainte
Anterior, html folosea o etichetă specială de font pereche, care acționa ca un container pentru modificarea parametrilor fontului, cum ar fi fontul, culoarea și dimensiunea. Astăzi, această abordare este fundamental greșită. De ce? Standardele web specifică faptul că aspectul unei pagini nu trebuie specificat în markup html. În plus, eticheta este pe deplin acceptată doar într-o versiune foarte veche de HTML - HTML 3.
Setarea corectă a fontului în html
Astăzi, în acest scop, merită să folosiți exclusiv capabilități CSS. Acest limbaj a fost creat tocmai pentru a determina aspectul prin el. În plus, CSS are mult mai multe proprietăți care afectează aspectul textului. Să ne uităm puțin la fiecare dintre ele:
Stilul fontului. Definește stilul textului. Ia urmatoarele valori:
Varianta de font. Proprietatea specifică modul în care trebuie interpretată ortografia literelor mici. Are doar două semnificații:
Normal – comportament normal.
Litere mici - toate literele mici sunt convertite în litere mari, iar dimensiunea lor este ușor redusă în comparație cu fontul obișnuit.
Grosimea fontului. Determină îndrăzneala textului. Valoarea poate fi specificată prin cuvinte cheie sau o valoare numerică. Să ne uităm la toate opțiunile:
Normal – text normal
Bold – text cu stil aldine
Mai îndrăzneț – va apărea mai îndrăzneț decât elementul părinte.
Mai ușoare – literele vor avea mai puțină îndrăzneală în comparație cu părintele lor.
Este atat de simplu. În plus, este posibil să setați valoarea sub formă de numere de la 100 la 900, unde 900 este cel mai îndrăzneț. De exemplu, valoarea normală corespunde cu 400, iar valoarea aldină corespunde cu 700.
Din păcate, majoritatea browserelor nu recunosc aceste valori numerice și pot folosi doar două valori: normal și bold. Pentru experiment, am creat 9 paragrafe și am dat fiecărui text o greutate diferită - de la 100 la 900. Apoi am deschis această pagină web în browsere diferite și niciunul nu a afișat stiluri diferite. Concluzie: este mai bine să nu folosiți valori numerice.
Marimea fontului. Această proprietate specifică dimensiunea literelor. Mărimea poate fi specificată în diferite valori relative și absolute. Cel mai adesea, dimensiunea este specificată în pixeli, unități em relative și procente. Dacă doriți să aflați mai multe despre setarea dimensiunii în CSS, citiți-l pe acesta, unde totul este descris mai detaliat.
Familie de fonturi. Poate cea mai de bază proprietate care determină familia sau numele specific al fontului folosit. Dacă utilizați un nume specific, trebuie să vă asigurați că fontul specificat poate fi găsit pe computerele tuturor utilizatorilor. Pentru fiabilitate, trebuie să specificați o opțiune alternativă sau o întreagă familie separată prin virgule. Fonturile sunt împărțite în următoarele familii:
Fiecare familie se potrivește nevoilor diferite. De exemplu, fantezia este adesea folosită pentru a proiecta diverse anteturi, iar monospace este folosit pentru a scoate codul mașinii etc. Puteți afla mai precis numele fonturilor, de exemplu, într-un editor de text sau în Photoshop.
Notație scurtă
Tot ceea ce am discutat mai sus poate fi scris foarte ușor într-o singură linie folosind minunata proprietate a fontului, care reunește toate setările. Trebuie să o scrieți în următoarea ordine:
Font: font-style | font-variant | font-weight | dimensiunea fontului | familie de fonturi;
Font: font-style | font - varianta | font - greutate | dimensiunea fontului | familie de fonturi ; |
Dacă nu trebuie să specificați un parametru, acesta este pur și simplu omis. Aici sunt necesare doar dimensiunea și familia de fonturi; orice altceva este opțional dacă nu este necesar. Utilizarea notației scurte vă permite să reduceți foarte mult codul în css. Folosește-l pentru că este o optimizare bună pentru site.
Cum să setați fontul în html la diferite elemente
Deci, dintr-un motiv oarecare, ne-am lăsat foarte duși de a descrie toate proprietățile fontului. Aceasta este o informație foarte importantă, dar cum o întrebați corect? Utilizați selectoarele potrivite pentru a ajunge la elementele potrivite. Mai jos ofer cateva exemple:
p a( font-family: Verdana, sans-serif; )
Pentru datele tabelare, sunt setați mulți parametri de font: majuscule reduse, stil aldine, dimensiunea fontului și numele.
Ați întâlnit un client capricios care cere fonturi „vopsite”? Sau pur și simplu creați un site web tematic elegant, iar scrierea textului personalizat va evidenția ideea autorului dvs.? Să luăm în considerare una dintre modalitățile de a rezolva această problemă.
Când este necesar
În primul rând, să ne uităm la cazurile cele mai justificate în care este posibil să aveți nevoie de fonturi non-standard.
- Meniu elegant.
- Anteturi elegante.
- Siglă. Crearea unui logo este o chestiune serioasă, s-au scris multe cărți pe acest subiect, specialiștii studiază această chestiune de multă vreme... Iar autorul nu va lua pâinea oamenilor, ci va pune doi cenți ai lui. Dacă logo-ul tău este text, atunci pentru optimizarea SEO de înaltă calitate ar trebui să fie afișat ca TEXT.
Sarcina este să folosiți fonturi non-standard, adică acelea care, cu un grad semnificativ de probabilitate, nu sunt disponibile pentru utilizatorul resursei dvs. de internet.
Soluții
Ca în majoritatea cazurilor, orice sarcină are mai multe soluții, iar a noastră nu face excepție. Merge:
- Imagine. Nu există flexibilitate de configurare, viteza de încărcare a paginii se deteriorează, încărcarea serverului crește, SEO este complet exclus.
- Flash. Fișiere suplimentare de descărcat, aveți nevoie de abilități în editori Flash (puteți schimba și parametrii de text aici), SEO mediu.
- JS. Fișierele externe suplimentare (și tot ceea ce vine cu el), SEO mediu, textul nu pot fi copiate.
- Fonturi personalizate folosind CSS
Adevărata cale a samuraiului sau „Trăiască CSS”
Regula css @font-face ne va ajuta în rezolvarea acestei probleme, ceea ce ne permite să încărcăm anumite fonturi în document și să le definim setările.
@ font-face (familie de fonturi: AlexBrush- Regular; src: local("AlexBrush-Regular") , url("./AlexBrush-Regular. otf " ) ; )
Astfel, eliminăm necesitatea ca fontul pe care l-am ales să fie prezent în sistemul de operare al vizitatorului.
Acest tip de design vă permite să conectați fonturi TrueType (ttf) și OpenType (otf).
Interesant: OpenType are capacități de prepress mai mari decât TrueType și acceptă un set mai mare de caractere într-o dimensiune mai mică a fișierului.
S-ar părea că acest subiect ar putea fi închis, dar există unul DAR... Să ne amintim de prietenii noștri „speciali”, și anume browserele familiei IE. Pentru a implementa un font personalizat în IE, fontul trebuie să fie în format Embedded OpenType (eot).
Acesta nu este singurul caz în care o caracteristică IE face mai mult bine decât rău. Cert este că formatul eot implică:
- Criptare. Datele despre adresa proiectului sunt introduse în fișier, astfel încât atacatorii nu vor putea fura fontul și îl vor încărca pe site-ul lor web.
- Comprimare. Fișierul cu fonturi este comprimat, reducând astfel timpul de descărcare.
Ținând cont de cele de mai sus, să modificăm exemplul nostru:
@ font-face ( font-familie: AlexBrush- Regular; src: local("AlexBrush-Regular " ), url(./ AlexBrush- Regular. eot) ; ) @ font- face ( font-familie: AlexBrush- Regular; src : local("AlexBrush-Regular") , url("./AlexBrush-Regular. otf " ) ; )
Experiența practică a arătat nevoia de a îmbunătăți acest exemplu pentru a remedia erorile și a îmbunătăți recunoașterea de către browsere.
@font-face (familie de fonturi: „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") , )
Important!!!
- Flexibilitate. Configurarea și modificarea setărilor de text este ușoară.
- Viteză. Numărul minim de fișiere suplimentare de încărcat nu încetinește pagina la fel ca același număr de elemente în js și Flash.
- SEO. Textul rămâne text - avantajele sunt evidente.
- Exemplul funcționează în browsere începând de la: IE4, Op, Fx3.5, Cr2, Sa1.
- Înainte de a utiliza un font, trebuie să îl optimizați (citiți postfața).
- Când utilizați fonturi achiziționate, trebuie să vă faceți griji pentru siguranța acestora.
- Dacă lățimea de bandă a canalului de comunicație este mică, atunci până când fișierul cu fonturi este încărcat, utilizatorul fie va vedea un font simplu în locul unuia nestandard, fie nu va vedea nimic.
Postfaţă.
Optimizarea fonturilor
Atunci când creează un set de caractere, dezvoltatorii încearcă să-l împacheteze cu funcționalitate maximă pentru a ajunge la publicul țintă cât mai larg posibil. Pe baza acestui lucru, ei introduc litere, cifre, semne de punctuație, pictograme suplimentare, diferite tipuri de stiluri, o întreagă gamă de valori pentru greutatea fontului etc.
Ca urmare a unor astfel de eforturi, fișierele cu fonturi pot depăși marca de zeci de MB. Avem nevoie de o asemenea diversitate? Până la urmă, pentru a da o notă stilistică picant, noi (în funcție de situație) nu avem neapărat nevoie de semne de punctuație sau de diferite simboluri. De fapt, stilurile diferite nu sunt întotdeauna necesare. Sau să presupunem că îți optimizezi site-ul strict pentru RuNet, te poți descurca fără latină...
Ei bine, ai înțeles deja esența. Fontul trebuie optimizat:
- Înlăturăm tot conținutul care nu este util în rezolvarea unei probleme practice.
- Convertim fișierele în formatele necesare.
Cum să o facă? Există o serie de servicii pe Internet care vă permit să efectuați operațiunile necesare, de exemplu: Font-face Generator, Online Font Converter, Web Font Optimizer etc.
Protecţie
Este nevoie de mult timp pentru a dezvolta un font funcțional de înaltă calitate și, prin urmare, un astfel de font costă o sumă bună de bani. Toate fonturile achiziționate (legal) sunt înregistrate și constituie proprietate intelectuală.
Când achiziționați un font, aveți dreptul de a-l folosi pe web, dar dacă fontul este descărcat din resursa dvs. de către un atacator, atunci proprietarul site-ului va purta responsabilitatea pentru daunele cauzate dezvoltatorului. Cum să vă protejați fontul?
În IE, totul este gândit pentru noi - protecția în format eot este deja încorporată. Pentru toate celelalte browsere nu există încă o soluție clară.
Există, desigur, noi dezvoltări - de exemplu, formatul WOFT, în care problema protecției este eliminată în mod similar cu eot, dar, din păcate, nu se poate lăuda încă cu suport complet în browsere.
De asemenea, puteți aplica pur și simplu fonturi gratuite.
Pentru a crea un design unic și colorat, trebuie să adăugați propriile fonturi. În această lecție vom învăța cum să conectăm orice font. Conectarea unui font nou se face folosind regula @font-face. În această regulă, așa cum probabil ați ghicit, trebuie să existe două proprietăți: numele fontului și calea către fișier (la font). Următoarele exemple vor fi legate de fontul Open Sans. Să ne uităm la primul exemplu.
@font-face (
font-family: „Open Sans”;
src: local("Open Sans"),
url("/font/open_sans.ttf") format("truetype");
}
Folosim proprietatea font-family pentru a specifica numele fontului (de acum înainte îl vom folosi astfel: p (font-family: „Open Sans” sans-serif)). Partea locală ("Open Sans") a codului înseamnă verificarea pentru a vedea dacă utilizatorul are acel font. Dacă nu doriți să verificați dacă utilizatorul are un font, puteți scrie ca în al doilea exemplu.
@font-face (
font-family: „Open Sans”;
src: url("/font/open_sans.ttf") format("truetype");
}
Al treilea exemplu este mai complet și mai compatibil între browsere.
@font-face (
font-family: „Open Sans”;
src: url("open_sans.eot");
src: url("open_sans.ttf") format ("truetype"),
url("open_sans.woff") format("woff");
greutatea fontului: normal;
stil font: normal;
}
Alte modalități de a conecta fonturi
Metoda unu (de exemplu, luăm un font de pe site-ul Google), codul este inserat
.Adăugarea unui font nou pe un site web nu este cea mai ușoară sarcină. Unde să alegeți, descărcați și cum să adăugați un font la un site web în CSS? În acest articol vom arăta unul dintre cel mai convenabil modalități de a instala și conecta fontul la site.
Cum să includeți un font pe un site web în CSS
De exemplu, avem un font Raleway.ttfși vrem să-l folosim în toate anteturile ( h1) de pe site-ul nostru. Pentru a face acest lucru, efectuați următorii pași:
h1 ( familie de fonturi: "RalewayRegular"; }
Acum toate titlurile de nivel 1 de pe site sunt afișate în fontul de care avem nevoie.
Dacă doriți să conectați mai multe fonturi (sau stilurile acestora), adăugați-le pur și simplu sub cel precedent:
@font-face { familie de fonturi: "RalewayRegular"; src: url("../fonts/RalewayRegular.ttf" ) format( "tip adevărat"); stil font: normal; greutatea fontului: normal; } @font-face{ familie de fonturi: „RalewayBold”; src: url("../fonts/RalewayBold.ttf" ) format( "tip adevărat"); stil font: normal; greutatea fontului: normal; }
Poate ați observat că există diferite formate de font - .ttf, .woff, .eot, .svg etc. Există, de asemenea, un format pentru browserele moderne. woff2, dar despre asta vom vorbi într-unul din articolele următoare. De obicei, fiecare font este inclus în 3 formate simultan. Acest lucru se face astfel încât fontul să fie afișat corect în toate browserele, inclusiv. si cele vechi. Arata cam asa:
@font-face { familie de fonturi: "RalewayRegular"; src: url( „../fonts/RalewayRegular/RalewayRegular.eot”) ; src: url( „../fonts/RalewayRegular/RalewayRegular.eot?#iefix”) format("embedded-opentype" ), url( „../fonts/RalewayRegular/RalewayRegular.woff”) format( "woff"), url( „../fonts/RalewayRegular/RalewayRegular.ttf”) format( "tip adevărat"); stil font: normal; greutatea fontului: normal; }
Aici urmează Atenție la ordinea de conectare - acest lucru este important!
Nu vom intra în detalii, doar amintiți-vă aspectul acestui design.
Dacă aveți un font într-un singur format, atunci utilizați diferite convertoare de fonturi. Iată una dintre ele.
Cum să conectați un font folosind diverse servicii
De asemenea, puteți utiliza serviciul fonts4web pentru a conecta fonturi: 
Cel mai simplu mod de a conecta fonturi
Cum se conectează un font la un șablon CMS Moguta 
Cum să adăugați un link cu fonturile Google la un șablon CMS Moguta
Acum știți cum să adăugați un font pe un site web folosind CSS și multe altele. Vom fi bucuroși să vă răspundem la toate întrebările Zilele trecute, din nou, am decis să încep să fac flotări. Un profesor pe care îl respect susține că acest exercițiu are un efect aproape magic dacă este făcut corect.
Ei bine, mi-am pus la cale un experiment și pentru a îngreuna să sari, am decis să fac public „caietul de laborator” și l-am postat pe un blog abandonat.
Vechiul design nu se potrivea cu noua idee, și fără ezitare, l-am luat pe cel care mi-a plăcut mai mult sau mai puțin din depozitul general WordPress.
Știți care este problema cu niște șabloane gata făcute luate de acolo? Problema este compatibilitatea stângace cu fonturile chirilice.În cazul meu, anteturile au avut de suferit. Deoarece fontul la care face referire CSS nu conținea caractere rusești, acestea au fost preluate din fontul implicit (fie Sans, fie Arial). Drept urmare, titlurile au fost URIAȘE și au stricat întregul aspect. Trebuia să mă gândesc cum să înlocuiți fontul.
Există mai multe moduri de a face acest lucru.
Metoda 1: prost
Se rezumă la faptul că găsești un font potrivit pe Internet, îl instalezi pe computer, îl scrii în CSS și vezi site-ul așa cum este intenționat.
Alții continuă să o vadă, în cel mai bun caz, cu fonturi implicite și, în cel mai rău caz, chiar și epuizate.
Nu face asta!
Metoda 2: convertiți designul într-un font standard
Aceasta este cea mai ideală opțiune, dar, din păcate, nu este întotdeauna potrivit, deoarece uneori „pofta” designului se pierde din cauza acesteia. Cu toate acestea, luați în considerare ÎNTOTDEAUNA această abordare, deoarece indiferent cât de mult ați încerca, este posibil ca computerul client să folosească în continuare fontul disponibil.
Fonturile sigure care sunt disponibile pe aproape toate sistemele de operare sunt: Verdana (ideal pentru texte), Impact (uneori foarte bine în titluri), Arial, Arial Black, Comic Sans MS (kaka, care este foarte popular printre începători), Curier nou (potrivit pentru exemple de cod și formulare), Georgia, Times New Roman, Trebuchet MS.
Metoda 3: Imagine în loc de text
Opțiunea este foarte cross-browser și potrivită pentru proiectarea elementelor statice. De exemplu, anteturile site-ului. Faceți un PNG transparent cu text în fontul dorit, îl procesați după cum aveți nevoie și îl introduceți în site, fără a uita să completați ALT. Sau același lucru, dar lipiți textul pe fundal și salvați-l ca JPG.
Pe lângă antet, trebuia să schimb aspectul antetelor postărilor și widget-urilor. Ei bine, de ce să nu faci o imagine separată cu un titlu pentru fiecare intrare?
Deși există meșteri care generează imagini cu textul titlului folosind scripturi de server, aceasta este deja o perversiune.
Metoda 4: Cufon
Aceste appleturi pot fi generate dintr-un fișier cu font folosind generatorul online http://cufon.shoqolate.com/generate/
Cel mai simplu mod este de a folosi http://www.google.com/fonts Selectați fontul dorit dintre cele prezentate și obțineți un cod gata făcut pe care trebuie să îl introduceți în site (în cap și în fișierul de stil), după care totul funcționează.
Dar nu am vrut să folosesc javascript suplimentar, să mă deranjez cu generarea de applet-uri etc. Am vrut să fac totul rapid și simplu. Mai mult, fișierul cu fontul necesar era deja disponibil de mult timp.
Metoda 4: Conectați fontul la site folosind CSS
Internetul este plin de ghiduri pe această temă. Cu toate acestea, după ce am încercat cinci dintre ele, am ajuns la un rezultat dezastruos. Fontul meu TTF a fost afișat în mod normal numai în IE. În alte browsere, a fost înlocuit fără milă de Arial.
Mărturisesc că nu sunt un fan al IE și îl consider un browser de descărcare a browserului. Nu mai! Deci, a trebuit să fac o mică îmbunătățire.
Pentru a conecta un font la site folosind CSS, avem nevoie de fontul în sine (fișier) și de un convertor online http://onlinefontconverter.com/
Poate exista o mare varietate de convertoare de fonturi online. Unele sunt închise, apar altele noi în locul lor, așa că dacă acesta nu mai este acolo, căutați în motoarele de căutare o interogare precum „convertorul de fonturi online” și încercați să convertiți fonturile acolo. În acest post, convertoarele date sunt folosite ca exemplu.
1. Accesați site-ul web al convertorului , luați fontul pe care îl aveți și trageți-l în această fereastră (de obicei este în coloana din dreapta).
2. Descărcați fontul în 4 variante: EOT, OTF, TTF și WOFF. Acest lucru ar trebui să fie suficient. Browserul, în procesul de redare a paginii, îl va alege și descărca pe cel mai convenabil pentru el.
3. Încărcați fonturi către site-ul web. Am creat un folder pentru asta în rădăcina site-ului "f"și le-a pus acolo.
Actualizare 16.02.2015: Pentru acum onlinefontconverter.com refăcut și nu a convertit niciunul dintre fonturile propuse ((
A trebuit să folosesc site-ul font2web.com. Acesta oferă toate fonturile necesare simultan într-un pachet într-o arhivă. Confortabil!
4. Conectați încărcarea fontului la site. Pentru a face acest lucru, introduceți acest cod în fișierul css sau în etichetele de stil corespunzătoare.
@font-face( familia de fonturi: EtoMoiFont; src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1. woff);)
familie de fonturi: EtoMoiFont;— spune browserului cum va fi numit fontul încărcat. Vino tu cu un nume.
src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1.woff);— specifică calea și numele fișierelor cu fonturi.
De ce fonturile sunt în această ordine?
Primul eu pun EOT. Acest format este folosit de versiunile mai vechi de IE.
Al doilea — OTF. Acesta este un format de font comprimat care ar trebui să cântărească mai puțin.
Al treilea — TTF. Aproape toate browserele îl înțeleg. Deși, se întâmplă altfel. De exemplu, pe iOS este posibil să nu se deschidă.
Ultimul — WOFF. Acest lucru ar trebui să se citească bine pe Mac-uri, dar încă nu am avut timp să-l verific.
5. Desemnați în fișierul de stil , care familie de fonturi ar trebui utilizată pentru a afișa titluri (în cazul nostru, titluri h2).
h2(familie de font: EtoMoiFont;)
Gata!
Dacă fonturile nu sunt aplicate, asigurați-vă: în primul rând, că fișierul css este folosit de site (uneori trebuie să resetați memoria cache, uneori să căutați un alt fișier css), în al doilea rând, că fontul este folosit pentru clasă (id sau etichetă) ați specificat.nu sunt blocați într-un alt fișier css care este încărcat după aceasta.
Frumusețea acestei metode este că în viitor pot seta acest font pentru orice container de text.
Asta s-a intamplat.
Dezavantajul metodei este că setările browserului unor utilizatori paranoici pot interzice încărcarea fonturilor externe, flash, javascript, imagini etc.
Așa că nu fi leneș și verifică cum va arăta site-ul dvs. dacă fonturile încărcate sunt dezactivate. Încercați să jucați cu cei siguri metoda 2, apoi încărcați-l pe al dvs. din nou. Dacă dimensiunile sunt mai mult sau mai puțin aceleași și nimic nu s-a depărtat, atunci este în ordine.
Și mai departe! Metode de testare numai pe computere pe care fontul cu care urmează să lucrați nu este instalat. Altfel se va rezolva metoda numarul 1.
Asta e tot. am fost cu tine.
Pana data viitoare.
