Tipografie web

Tipografia web se referă la utilizarea fonturilor pe World Wide Web . Când HTML a fost implementat pentru prima dată, fețele și stilurile de fonturi erau controlate exclusiv de setările fiecărui browser web . Nu a existat niciun mecanism pentru paginile web individuale pentru a controla afișarea fonturilor până când Netscape a introdus eticheta <font> în 1995, standardizată în specificația HTML 3.2. Cu toate acestea, fontul specificat de etichetă trebuia instalat pe computerul utilizatorului sau a fost utilizat un font alternativ, cum ar fi fontul sans-serif sau monospace implicit al browserului . Primele foi de stil în cascadă (CSS) și specificațiile au fost publicate în 1996 și au oferit aceleași capacități.

Specificația CSS2 a fost lansată în 1998, încercând să îmbunătățească procesul de selectare a fontului prin adăugarea potrivirii fontului, sintezei și descărcărilor. Aceste tehnici nu au fost utilizate pe scară largă și au fost eliminate din specificația CSS2.1. Internet Explorer (acum învechit în favoarea Microsoft Edge ) a adăugat suport pentru funcționalitatea de descărcare a fontului în versiunea 4.0, lansată în 1997 ^[1] . Descărcarea fontului a fost inclusă ulterior în modulul de font CSS3 și de atunci a fost implementată în Safari 3.1, Opera 10 și Mozilla Firefox 3.5. Acest lucru a crescut mai târziu interesul pentru tipografia web, precum și utilizarea descărcărilor de fonturi.

Istorie

Comparație între text-imagine și text HTML. Al doilea se adaptează la dispozitive, nu micșorează și poate fi selectat și copiat de utilizator

În anii 1990 și 2000 nu existau tehnici pentru încorporarea fonturilor în HTML, deci puteau fi folosite doar cele implicite din sistem. Cu Adobe Flash, această problemă nu a existat deoarece a permis ca orice font ales de dezvoltator să fie afișat în fișierul SWF chiar dacă nu a fost instalat pe computerele utilizatorilor ^[2] . În HTML am început să creăm titluri și text cu fontul ales și să le inserăm ca imagine cu eticheta IMG în loc de titlu și text, dar acest lucru a creat neindexarea de către motoarele de căutare a textului, texturi granulate în cazul în care a utilizatorului cu zoom și a problemelor de accesibilitate în cazul în care utilizatorul folosește cititoare de ecran . Ulterior, s-au născut unele tehnici pentru a afișa fonturi, altele decât cele de sistem, păstrând în același timp textul HTML implicit:

• Fahrner Image Replacement ^{[3] [4] [5]} : o tehnică care utilizează CSS pentru a înlocui textul unei pagini web cu o imagine care conține textul respectiv. A fost menit să păstreze pagina accesibilă utilizatorilor de cititoare de ecran , browsere web numai text sau alte browsere în care suportul pentru imagini sau foi de stil este dezactivat sau inexistent, permițând în același timp imaginea să difere între stiluri. Numit și „ înlocuirea imaginii CSS ” de Todd Fahrner, una dintre persoanele cărora li s-a atribuit inițial ideea de înlocuire a imaginii în 2003 ^[6] .
• Schimbabil Inman Flash Replacement (sIFR) ^[7] : o implementare a fonturilor web dinamice JavaScript și Adobe Flash , care a permis înlocuirea elementelor de text din paginile web HTML cu echivalente Flash. A fost open-source și a fost inițial dezvoltat de Mike Davidson și îmbunătățit de Mark Wubben.
• Facelift Image Replacement (FLIR) ^{[8] a} fost un software similar cu sIFR. Dar, în loc să folosească Flash, a încorporat imagini simple, care au fost generate automat din textul de pe pagina web. Deci, chiar dacă utilizatorul nu avea instalat pluginul Flash, a văzut textul înlocuit cu FLIR.
• Cufón a fost o alternativă care a convertit căile de caractere în grafice vectoriale stocate în formatul de date JSON și apoi a redat caracterele în elemente Canvas sau VML (în funcție de disponibilitate) folosind un motor de redare JavaScript ^[9] .

CSS1

Același subiect în detaliu: CSS .

În prima specificație CSS, caracteristicile fonturilor au fost specificate printr-o serie de proprietăți:

• font-family
• font-style
• font-variant
• font-weight
• font-size

Toate caracterele au fost identificate numai după nume.

Fonturi sigure pentru web

Fonturile sigure pe web sunt fonturi care pot fi găsite pe o gamă largă de sisteme informatice și utilizate de autorii de conținut web pentru a crește probabilitatea ca conținutul să fie afișat în fontul ales. Dacă un vizitator al site-ului web nu are fontul specificat, browserul încearcă să selecteze o alternativă similară, pe baza fonturilor de rezervă specificate de autor și a familiilor generice, sau utilizează substituirea fontului definită în sistemul de operare al vizitatorului.

Fonturi de bază Microsoft pentru web

De când au fost lansate, prin intermediul fonturilor Microsoft Core pentru programul web, Arial, Georgia și Verdana au devenit trei fonturi web de facto. Pentru a se asigura că toți utilizatorii web au un set de fonturi de bază, Microsoft a început inițiativa Core fonts în 1996 (sa încheiat în 2002). Fonturile lansate includ Arial , Courier New , Times New Roman , Comic Sans , Impact , Georgia , Trebuchet , Webdings și Verdana , sub un EULA . Cu toate acestea, majoritatea distribuțiilor Linux nu includ aceste fonturi în mod implicit. CSS2 a încercat să mărească instrumentele disponibile dezvoltatorilor web prin adăugarea sintezei de fonturi, potrivirea îmbunătățită a fonturilor și posibilitatea de a descărca fonturi de la distanță ^[10] . Unele proprietăți ale fontului CSS2 au fost eliminate din CSS2.1 și ulterior incluse în CSS3.

Personaje de rezervă

Specificația CSS vă permite să listați mai multe fonturi ca caractere de rezervă. În CSS, proprietatea familiei de fonturi acceptă o listă de caractere separate prin virgulă pentru a fi utilizate după cum urmează:

font-family: Helvetica, "Nimbus Sans L", "Liberation Sans", Arial, sans-serif;

Primul font specificat este fontul preferat. Dacă acest font nu este disponibil, browserul web încearcă să utilizeze următorul font din listă. Dacă nu se găsește niciunul dintre caracterele specificate, browserul afișează fontul implicit. Același proces are loc și pentru fiecare font dacă browserul încearcă să afișeze un font care nu este prezent în fontul specificat.

Familii de caractere generice

Font tip pictogramă. Fiecare literă corespunde unui simbol ^[11] .

Pentru a oferi designerilor web un anumit control asupra aspectului fonturilor pe paginile lor, chiar și atunci când fonturile specificate nu sunt disponibile, specificația CSS permite utilizarea mai multor familii de fonturi generice. Aceste familii sunt concepute pentru a împărți fonturile în diferite categorii pe baza aspectului lor general. Acestea sunt de obicei specificate ca ultimele dintr-un set de caractere de rezervă, ca ultimă soluție în cazul în care niciunul dintre caracterele specificate de autor nu este disponibil. Există cinci familii generice:

Sanserif

Fonturi care nu au marcaje decorative sau caractere pe literele lor. Aceste fonturi sunt adesea considerate mai ușor de citit pe ecrane.

Serif

Fonturi cu marcaje decorative sau serif.

Monospace

Caracterele în care toate caracterele au aceeași lățime.

Cursiv

Fonturi care seamănă cu scrierea cursivă. Aceste fonturi pot avea un aspect decorativ, dar pot fi greu de citit în dimensiuni mici, deci sunt utilizate în general cu moderare.

Fantezie

Fonturi care pot conține simboluri sau alte proprietăți decorative.

Fonturi web

Formate de fișiere

Folosind o specificație @font-face este posibil să încorporați fonturile în așa fel încât să funcționeze cu IE4 +, Firefox 3.5+, Safari 3.1+, Opera 10+ și Chrome 4.0+. Acest lucru permite majorității utilizatorilor web să acceseze această funcționalitate. Unele turnătorii comerciale se opun redistribuirii fonturilor lor. Multe alte turnătorii comerciale se ocupă de redistribuirea fonturilor lor oferind o licență specifică, cunoscută sub numele de licență de font web, care permite utilizarea software-ului de font pentru a afișa conținut pe web, o utilizare interzisă în mod normal de licențele de bază pentru desktop. Desigur, acest lucru nu interferează cu fonturi și turnătorii licențiate gratuit.

TrueDoc

TrueDoc, deși nu este specific pentru webfont, a fost primul standard pentru încorporarea fonturilor. A fost dezvoltat de fondatorul Bitstream în 1994 și a fost acceptat în Netscape Navigator 4, în 1996. Datorită restricțiilor de licență open source, Netscape nu a putut elibera codul sursă Bitstream, suportul nativ pentru tehnologie s-a încheiat când a fost lansat Netscape Navigator 6 . Un plugin ActiveX a fost disponibil pentru a adăuga suport TrueDoc la Internet Explorer, dar tehnologia a trebuit să concureze cu fonturile Microsoft OpenType Embedded care erau acceptate nativ în browserul lor Internet Explorer de la versiunea 4.0. Un alt impediment a fost lipsa instrumentelor open source sau gratuite pentru a crea fonturi web în format TrueDoc, în timp ce Microsoft a pus la dispoziție un instrument gratuit pentru a încorpora fonturi web pentru a crea fonturi web în formatul lor.

Încorporat OpenType

Internet Explorer a acceptat încorporarea fonturilor prin standardul brevetat OpenType Embedded de la versiunea 4.0. Folosește tehnici de gestionare a drepturilor digitale pentru a preveni copierea și utilizarea fonturilor fără licență. Un subset simplificat de EOT a fost oficializat sub numele de CWT (Compatibility Web Type, fost EOT-Lite).

Grafică vectorială scalabilă

Același subiect în detaliu: Grafică vectorială scalabilă .

Tipografia web se aplică SVG în două moduri:

1. Toate versiunile specificației SVG 1.1, inclusiv subsetul SVGT , definesc un modul de font care permite crearea de caractere într-un document SVG. Safari a introdus suport pentru multe dintre aceste proprietăți în versiunea 3. Opera a adăugat suport preliminar în versiunea 8.0, cu suport pentru mai multe proprietăți în 9.0
2. Specificația SVG permite CSS să aplice documente SVG într-un mod similar cu documentele HTML, iar @font-face poate fi aplicat textului din documentele SVG. Opera a adăugat suport pentru aceasta în versiunea 10

Fonturi grafice vectoriale scalabile

Fonturile SVG sunt un standard de fonturi W3C care utilizează imaginea SVG. Fonturile SVG, ca format independent, sunt acceptate de majoritatea browserelor. Standardul cu care sunt de acord majoritatea producătorilor de browsere este subsetul de fonturi SVG incluse în OpenType (și, prin urmare, supersetul WOFF), numit SVGOpenTypeFonts. Firefox a acceptat SVG OpenType de la Firefox 26.

TrueType / OpenType

Conectarea la fonturile standard TrueType (TTF) și OpenType (TTF / OTF) este acceptată de Mozilla Firefox 3.5+, Opera 10+, Safari 3.1+ și Google Chrome 4.0+.

Metode de încorporare a fonturilor

Font veveriță

Font Squirrel este un serviciu gratuit care vă permite să descărcați multe fonturi gratuite și să creați pachetul pentru a încorpora fonturi web, inclusiv fișiere de fonturi și reguli CSS conexe. ^[12] Alternativ, puteți descărca manual fiecare format de fișier de font și puteți scrie CSS de la zero. Exemplu:

 @ font-face {
 	font-family : „Jurnal” ;
 		src : format url ( „http://your-own.site/fonts/journal/journal.woff” ) format ( „woff” ),
 		formatul url ( „http://your-own.site/fonts/journal/journal.svg#Journal” ) ( „svg” ),
 		formatul url ( „http://your-own.site/fonts/journal/journal.ttf” ) ( „tip veritabil” ),
 		url ( „http://your-own.site/fonts/journal/journal.eot” ),
 		formatul url ( „http://your-own.site/fonts/journal/journal.eot?#iefix” ) ( „embedded-opentype” );
 	font-weight : normal ;
 	stil font : normal ;
 }

Google Fonts

Același subiect în detaliu: Google Fonts .

Google Fonts (denumit anterior Google Web Fonts) este o bibliotecă de fonturi licențiată gratuit , un director web interactiv pentru navigarea în bibliotecă și API pentru utilizarea convenabilă a fonturilor prin CSS și Android . Oferă codul pentru încorporarea fontului ales în pagina web prin crearea unui link fără descărcarea acestuia (dar vă permite totuși să îl descărcați și să îl încorporați prin @font-face ) ^[13] :

 < link rel = "preconnect" href = "https://fonts.gstatic.com" >
< link href = "https://fonts.googleapis.com/css2? family = Open + Sans: wght @ 300 & display = swap" rel = "styleheet" >

SVG

SVG vă permite să transformați orice font în căi, astfel încât orice dispozitiv să îl poată citi fără a fi nevoie să încorporați fontul, dar în acest caz nu va mai fi un caracter, ci se va comporta ca o imagine (jpg, png, ...) . Deci, acesta nu va mai fi indexabil de către motoarele de căutare și nici citit de Screen Readers .

Exemplu de fonturi Google utilizate în SVG ^[14] :

 (...)
< defs >
  < style type = "text / css" >
    @ import URL ( 'https://fonts.googleapis.com/css2? family = Open + Sans: wght @ 300 & display = swap "rel =" styleheet' ) ;
 </ style >
</ defs >
(...)
< text font-size = "14" fill = "# 333" style = "font-family: 'Roboto';" >
   Wikipedia este o enciclopedie
</ text >
(...)

Exemplu de font SVG. În acest caz, fontul trebuie instalat pe dispozitivul utilizatorului, altfel va afișa în browser un font de sistem alternativ, cum ar fi Times New Roman sau Arial ^[15] :

Exemplu de font SVG

Exemplu de font încorporat în SVG prin CSS cu regula @font-face ^[15] :

Exemplu de font încorporat SVG

Pânză HTML5

Același subiect în detaliu: Canvas (element HTML) .

Fonturile încorporate pot fi folosite și pentru proiecte web 3D, cum ar fi HTML5 Canvas . În următorul caz, fontul trebuie instalat pe dispozitivul utilizatorului, altfel va afișa în browser un font de sistem alternativ, cum ar fi Times New Roman sau Arial :

 var canvas = document . getElementById ( "myCanvas" );
var ctx = canvas . getContext ( "2d" );
ctx . font = "30px Arial" ;
ctx . fillText ( „Wikipedia” , 10 , 50 );

Exemplu de font încorporat cu regula @font-face

Exemplu de font Canvas încorporat în CSS

Exemplu de font încorporat în Google Fonts :

Exemplu de fonturi Google în Canvas

Formatarea fontului

Același subiect în detaliu: HTML5 , CSS , WebGL și Canvas (element HTML) .

Odată cu nașterea HTML 5 și CSS 3, a devenit posibilă formatarea grafică a fonturilor prin crearea de efecte, rotații și animații , lucru care anterior era posibil doar folosind Adobe Flash (învechit din 31 decembrie 2020 ^[16] ) sau imagini ^[17] . Principalele tehnici utilizate sunt WebGL , CSS 3 , HTML 5 Canvas și SVG . Adesea, unele dintre aceste tehnici se pot îmbina. În unele cazuri, același rezultat poate fi obținut folosind diferite tehnici ^[18] .

Conturați și completați

Fonturile de pe web sunt grafice bazate pe vectori ^[19], ca și în procesatoarele de text, de fapt, mărind-le cu browserul rămân clare. Fonturile web sunt de fapt formate prin stroke și fill, ca fonturile găsite în programele grafice ^{[20] [21]} .

Schiță formatată cu CSS 3:

 h1 {
text-stroke : 1 px negru ;
}

Schiță formatată cu pânză HTML5 :

 CanvasRenderingContext2D.strokeText (text, x, y [, maxWidth]);

Schiță creată cu formatul SVG formatabil în CSS sau cu alte etichete SVG (în format text sau convertibil în cale):

 < text
style = "stroke: none; stroke-width: 2.04704;"
> A </ text >

Personaje speciale și verticale

Același subiect în detaliu: Entitate (marcare) .

CSS 3 poate produce text vertical pentru limbi precum chineză, japoneză, coreeană și mongolă ^[22] . De asemenea, pot formata entități (caractere speciale) ^[23] . Toate acestea se pot face și în SVG ^[24] .

Exemplu de inserare a pictogramei in în CSS:

 . wikipedia : înainte de {
conținut : „& # 9875;”
culoare : roșu ;
}
<P> Wikipedia <span style = "color: red"> & # 9875 </ span > 's free encyclopedia </ p>

Exemplu de inserare a pictogramei in în SVG (dacă nu o convertiți în căi) care poate fi formatată cu CSS sau alte etichete SVG:

 < text
id = "text839"
sodipodi: role = "line" > ⚓ </ text >

Exemplu de inserare a caracterelor orientale în CSS:

 ora {
      text-combina-vertical : cifre 2 ; 
      }

< p >今日 は< time datetime = "2016-05-22" > 2015 年 5 月 22 日</ time >で す。 </ p >

Exemplu de inserare a caracterelor orientale în SVG (în cazul în care nu le convertiți în căi) care pot fi formatate cu CSS sau cu alte etichete SVG:

 < text
       x = "300"
       id = "a" >什 水 跑 本 不要 去 在 使 司 物 似 小 可 期 是 的 好 三 ： 、。 ， </ text >

Exemple

• 

  Utilizarea măștii, a umbrelor și a animațiilor

• 

  Utilizarea gradienților, interactivității și 3D

• 

  Conturați și completați

Proiectare și SEO

Același subiect în detaliu: Optimizarea motorului de căutare .

Același subiect în detaliu: Design grafic .

De la nașterea CSS3, au apărut multe tehnici de formatare a fonturilor web ^[25] disponibile anterior doar pentru tipărire și în Adobe Flash (învechite la 31 decembrie 2020) ^[26] .

• 

  Vizual, cele trei fonturi sunt aceleași, dar nu pentru motoarele de căutare

• 

  Prea multe fonturi diferite nu creează un design bun și dacă sunt încorporate în HTML prin CSS pot încetini pagina ^[27]

• 

  Pentru un design bun, nu toate fonturile merg bine împreună. În primul caz, titlul și subtitlul sunt în regulă, în cel de-al doilea nu.

• 

  Există modalități de a obține același rezultat cu fonturile web. În primul caz, au fost utilizate două fonturi încorporate cu CSS.

Notă

Elemente conexe

• RFC 2119 Cuvinte cheie pentru utilizare în RFC-uri pentru a indica nivelurile de cerințe
• RFC 4647 Potrivirea etichetei de limbă