Cum facem lucrurile sa functioneze, astazi

@font-face {

font-family:’some-font’;

src: url(‘some-font.eot#’)

format(’embedded-opentype’),

url(‘some-font.woff’) format(‘woff’),

url(‘some-font.ttf’)

format(‘truetype’),

url(‘some-font.svg#some-font’)

format(‘svg’);

}

Sunt incluse aici toate formatele de care aveti nevoie pentru a acoperi browserele care accepta @fontface. Fisierul EOT merge la ie, WOFF merge la Chrome, Firefox, Opera si Safari. TTF merge pe dispozitivele Android si iOS, impreuna cu alte browsere desktop mai vechi.  IE9 ofera suport pentru TTF, dar interpreteaza permisiunile de incorporare diferit fata de alte browsere: este mai bine sa-i oferim un WOFF sau EOT. iOS, in versiunile anterioare accepta numai fonturi SVG, iar unii utilizatori aleg sa nu isi actualizeze sistemul de operare iOS pe dispozitivele mai vechi – a...

Vezi articol

Incarcarea stilurilor

Ce se intampla cu testul in timp ce incarca un font? Nu va surprinde sa aflati ca acesta este un alt domeniu in care comportamentul browserelor difera. Exista doua principale abordari.

Afisarea solutiilor de rezerva pana la incarcarea fonturilor: Aceasta este abordarea adopdata de IE9, Opera si de mai vechile versiuni Firefox. Textul este afisat imediat, folosind primul font cat mai repede disponibil din declaratia CSS font-family. Pe masura ce fonturile sunt descarcate, afisarea este actualizata. Aceasta metoda prezinta utilizatorilor continutul asteptat cat mai curand posibil, dar comutarea fonturilor poate fi destul de neplacuta vizual.

Ascunderea textului pana la afisarea solutiilor: Aceasta este o abordare adoptata de catre browserele WebKit: Safari si Chrome...

Vezi articol

Fonturile si aspectele legale

Eliminarea unor caractere dintr-un font este o modalitate foarte buna de a reduce dimensiunile sale. Cu toate acestea, contravine termenilor si condiitolor celor mai multe fonturi comerciale. Acest lucru se datoreaza catorva repere legale care dicteaza modul in care fonturile sunt protejate de lege.

In vremurile cand fonturile erau bazate pe imagini bitmap, legislatia clasifica fonturile ca facand parte din categoria “Design Industrial”, fara a face obiectul dreptului de autor. Acest lucru a fost valabil si pentru fonturile vectoriale, cu exceptia cazului in care designul este cu adevarat inedit, situatie in care acestea pot fi acoperite printr-un brevet de design. In schimb, producatorii au ales sa protejeze instructiunile de vectorizare ca si cum ar fi programe de calculator...

Vezi articol

Suport nativ pentru fonturile web

Din fericire, este disponibila o solutie. Putem trimite fontul la utilizator si sa-l facem sa fie afisat cum era de asteptat! Se ia doar un font in format TrueDoc si se face acest lucru:

<head><link rel=”FONTDEF” src=”some-true-doc-font.pfr”></head>

<body><font face=”some-font”>Yey fonts!</font></body>

Cel putin, aceasta a fost solutia din Netscape Navigator 4, dar, de asemenea, aceasta a functionat si in Internet, celalalt browser Explorer, prin intermediul unui plugin. Se intampla in aniii in 1994.  Cu toate acestea, adoptarea Truedoc a fost modesta, iar Microsoft nu a fost interesata in implementarea acesteia in mod nativ. In schimb, compania a optat pentru o metoda complet diferita:

@font-face {

font-family: ‘un font’;

src: url(‘un-font.eot’);

}

p {

font-family: ‘un-font’;

}

Acest l...

Vezi articol

Pro si Contra – CSS

PRO

Dezvoltare rapida: Datorita faptului ca CSS-ul pe care il scriu se afla in aceeasi structura, pot copia si adauga foarte usor secvente de cod de la proiect la proiect. Nu trebuie sa iau nici un fel de decizii asupra structurii CSS-ului meu si nu petrec ore intregi cautand prin el. .

Mai multi dezvoltatori la acelasi proiect: Folosind aceasta structura, am lucrat intr-o echipa de patru dezvoltatori fornt-end din doua tari si fusuri orare diferite fara prea multe probleme si fara a ne calca pe picioare. Odata ce configuratia initiala este stabilita, puteti da rapid sarcini oamenilor – “tu lucrezi pe sectiunea showcase”, “tu lucrezi pe sectiunea de filmografie” – si fiecare dezvoltator trebuie sa lucreze mai cu seama asupra codului CSS specific paginii lui...

Vezi articol