Navigatorii pot face lucruri îngrozitoare cu textul. Dacă textul este stilizat cu caractere aldine sau italice, dar nu există font îngroșat sau italic în acest font, browserele compensează absența acestora, încercând să creeze independent o astfel de marcă. Ca rezultat, vedem o încercare ciudată de a imita designul real de fonturi. În acest articol, veți învăța mai multe modalități de a evita această problemă.
Nu puteți da vina pe browser pentru a încerca să compenseze lipsa formei dorite. Dacă textul ar trebui să fie aldine sau italic, dar fontul nu are datele necesare, browserul trebuie să facă ceva despre el. Astfel, boldul arată ca o versiune groasă a simbolurilor obișnuite, și pentru a obține italic, browserul înclină pur și simplu literele. Ceea ce vede utilizatorul final va arăta mai bine sau mai rău, în funcție de browserul pe care îl utilizează și de fontul pe care îl utilizați. Unele browsere, cum ar fi Firefox. Faceți mai multe îngrășăminte grase în textul gras, făcând o mizerie din textul de pe ecran. Alte browsere, cum ar fi Chrome. doar un pic ingrosa brushstrokes, ca urmare, uneori, este imposibil de a distinge textul gras de la cel normal. Nici una dintre aceste identități false nu seamănă foarte mult cu faptul că produce un font real.
Aceste stiluri de fonturi artificiale nu reprezintă o problemă pentru fonturile web securizate, dintre care majoritatea includ deja stiluri pentru fonturi aldine și italice. Dar, în ultimul timp, există tot mai multe site-uri cu falsitate îndrăzneață, uneori de la designeri care ar trebui să știe și să cunoască mai bine problema decât alții. În toate cazurile, persoana nu utilizează corect fonturile. Sau fontul în sine nu are font gras sau italic, sau proprietatea @ font-face este incorectă. Puteți să scăpați de astfel de probleme. Nu lăsați să apară pe site-ul dvs. un bold fals.
Titlurile și o singură schemă a fonturilor afișate
Imaginați-vă că doriți să utilizați un fel de font atrăgător pentru titlurile dvs. Poate că vă va plăcea fontul Diplomata. care poate fi găsit pe Fonturile Google Web. Urmând instrucțiunile de mai jos, le puteți conecta la elementele dvs. h1:
Ce va da un rezultat similar în Firefox:
Fig. 1: Diplomata într-o inscripție falsă
Puteți corecta acest comportament al diplomatului. adăugarea font-greutate: normal; pentru h1. Dar aceasta nu va fi o decizie bună dacă fontul nu este disponibil și trebuie să degradați în lista implicită de fonturi. Cea mai bună soluție ar fi să adăugați o altă regulă @ font-face pentru fonturile cu un singur font, indicând faptul că acest font poate fi folosit atât pentru textul normal, cât și pentru grăsime. Astfel, veți obține o schiță normală a fontului dvs. în anteturi și caractere aldine, dacă lipsește și înlocuiește cu un font standard.
Dacă faceți clic pe link-ul la fontul Diplomata. utilizând browserul Internet Explorer. atunci veți vedea un cod de browser încrucișat @ font-face. furnizate de Google. Puteți copia acest cod pentru a vă modifica proprietatea font-weight în bold.
Acest lucru salvează designul fontului selectat:
Fig. 2: Diplomatele fără o inscripție falsă
Din moment ce Diplomata este grasă, este potrivită pentru titluri în formă normală. Dacă în locul acestuia este folosit un alt font din listă, antetele vor rămâne în continuare aldine. Trucul cu dublarea @ font-face va funcționa cu alte servicii de fonturi. În exemplul meu, am duplicat o regulă pe care Google o folosește. Dar dacă îți faci propria regulă, atunci poate vrei să verifici @ font-face. oferite de servicii precum FontSpring. Font veveriță sau Paul irlandez. Dacă site-ul dvs. utilizează un font cu un singur font, puteți evita problema falsului bold adăugând o regulă suplimentară @ font-face.
Rețineți că specificația CSS3-Fonts definește proprietatea de sinteză a fontului. cu care puteți monitoriza dacă trebuie să utilizați o caractere false aldine sau false, folosind o singură regulă @ font-face. Dar, în prezent, niciun browser nu a implementat suport pentru această proprietate. Regulile de duplicare @ font-face este singura modalitate de a controla acest comportament în browsere.
Nu vă lăsați păcăliți de lipsa de grasime sau italică
Problema absenței tipului bold sau italic nu se limitează la fonturile cu un singur font. Majoritatea serviciilor de fonturi web vă permit să eliminați în mod special contururi suplimentare. Se pare că unii dintre ei se bazează pe utilizarea inscripțiilor artificiale, în timp ce alții stabilesc regulile pentru @ font-face numai greutatea și stilul normal sau includ numai o față în mod implicit.
De exemplu, luați fontul Lora. furnizate de Fonturile Google Web. Dacă urmați recomandările implicite pentru implementarea fontului, atunci veți primi doar un singur font, care vă va oferi următoarele rezultate în browserul Chrome pentru textul inclus în și
Fig. 3: Lora cu inscripție falsă și falsă italică
La prima vedere nu pare la fel de rău ca și cuvântul «Hopa!», Folosit mai sus, dar este posibil să observați că miniatura nu este atât de caractere aldine, cursive, și arată nimic ca hieroglifele rotunjite elegante de pe pagina cu exemple de typeface Lora. Textul dvs. poate include stilul cu caractere aldine sau italice, explicit sau implicit, dar în absența unor astfel de trăsături, browserul va introduce cazul. Iată ce ați dori cu adevărat să obțineți:
Fig. 4: Prezentul design al literei bold și italic al lui Lora
Interfața Google Fonts avertizează utilizatorul să nu includă prea multe stiluri. Iată setările implicite pentru fontul Lora unde săgeata indică câmpul galben, indicând că totul este în ordine.
Fig. 5: Interfață web pentru fonturi cu setări implicite
Dacă se întâmplă să aflați ce veți obține la ieșire nu este ceea ce vezi pe pagina de exemple, puteți decide să vă conectați stiluri suplimentare săgeată în timp ce perepolzet pe un câmp roșu.
Fig. 6: Interfață web de fonturi cu o scară roșie teribilă
Dacă nu sunteți sigur (ă) de necesitatea unor stiluri suplimentare, scara vă poate face să vă rătăciți: ați putea crede că faceți ceva greșit conectându-i! De fapt, vă solicită să vă bazați pe texte neclare și oblice, în loc de stilurile reale furnizate în font.
Nu vă sugerez să vă bazați exclusiv pe Fonturile Google Web. Dar, cel puțin, dacă marchezi jackdaws necesare pentru conturul îndrăzneț și italic, acest serviciu vă va oferi o regulă corect formată @ font-face. Unele alte servicii de fonturi web oferă o regulă separată @ font-face pentru fiecare font al fontului din familie, fiecare regulă fiind setată la greutatea fontului: normal; Acest lucru poate provoca toate problemele pe care le-am descris în articol, în ciuda faptului că fontul gras și italic este prezent în font.
Deci, atunci când utilizați servicii web pentru a implementa fonturi, nu fi leneș pentru a verifica modul în care acestea sunt afișate în diferite browsere. pentru a vă asigura că aveți exact ceea ce vă așteptați. Asigurați-vă că regulile dvs. @ font-face se potrivesc cu greutatea și stilul fontului dorit și că aveți @ font-face pentru fiecare dintre fețele folosite. Nu vă bazați orbește pe codul pe care îl oferă serviciul web. Dacă ați avut timp să alegeți un font frumos pentru site-ul dvs., asigurați-vă că utilizați caracteristicile fontului, nu browserul atunci când modelați textul.
P.S. Și asta poate fi interesant:
Au trecut mai puțin de șase luni de la ultima modificare a fluxului de lucru al W3C, deoarece conducerea consorțiului a primit o propunere pentru a aplica în cele din urmă acest nou proces. Și să scrieți specificațiile HTML irelevante în muzeu, astfel încât să nu confundă dezvoltatorii, "pretinzând" că sunt relevanți.
Un alt modul CSS, despre care am vorbit, a ajuns într-un mod imperceptibil la starea cu care W3C sfătuiește să înceapă utilizarea zilnică a produselor noi. Proprietatea conține vă permite să restricționați modificările la arborele de randare, să redenumiți casetele CSS și să le redimensionați în interiorul elementului. Prin urmare, este atât de important ...
MAI MULT
De la Paris (foto), care a trecut recent CSS intalnire de lucru de grup, a sosit știri amuzant: Proprietăți grilă-rând-gap și grila coloana-decalaj, precum și reducerea grilă decalaj ...
Articole similare
Trimiteți-le prietenilor: