Cross-browser add font terță parte pe - site-ul

Cross-browser add font terță parte pe - site-ul

Am scris o dată mult timp pe acest blog modul de a adăuga un fișier CSS pentru a conecta OTF terță parte -shrifta site-ului. Apoi, această soluție a părut ideală, dar după cum sa dovedit, nu toate browserele pot înțelege. Desigur, pe măsură ce tehnologia merge înainte cu câțiva ani la web-tehnologii nu vor fi folosite TET -shrifty, dar noi trăim acum, și site-urile trebuie să o facă astăzi.

Așa că a trebuit să caute o soluție mai elegantă, care ar fi cu adevărat compatibilitate cross-browser și funcționează peste tot, de la noua versiune Google Chrome și terminând cu vechea versiune a Internet Explorer 6.

O mică digresiune

Aș dori să vă împărtășesc un pic cu tine principalele puncte care trebuie să fie înțelese înainte de a adăuga fonturi terțe părți pe site.

  1. Creșterea dimensiunii (în kilobytes) a paginii. Ar trebui să fie înțeleasă ca câteva fonturi, de limbă rusă frumoase, conectate la fișierul CSS poate descuraja complet urmatorul vizitator pe site. În căutarea de mulți uita pentru frumos, site-ul - este o resursă de informații pe care oamenii vin mai des pentru informații (există site-uri care nu sunt făcute pentru acest lucru, dar acum nu este despre ei) și, dacă nu sunt extrem de specializate, site-ul unic (un fel de Nugget Internet), și unul dintre milioanele de site-uri care încearcă să dărâma un loc sub soare.
  2. Dacă este posibil, nu folosiți fonturi terțe părți. Este această idee rezultă din cele de mai sus. Există o mulțime de fonturi bune pe care le puteți utiliza pe site-ul dvs., fără probleme suplimentare. Dacă aveți nevoie pentru a aduce câteva cuvinte sau anteturi statice de pe site-ul dvs., apoi conectat de dragul fontului „străine“ - nu este bine. Punerea în aplicare similară va fi mai ușor de utilizat ca grafica antet.
  3. Utilizați numai o singură față de imprimare. Pentru a face un site frumos, nu încercați să adăugați la toate la găsit odată fonturile pe plac. Cel mai adesea pentru a sublinia doar un singur, care va scoate in evidenta anumite puncte de pe site.
  4. Fiecare font sistem de operare este netezită în mod diferit. Din păcate, dar unele fonturi sistem de operare „străine“ se pot uita doar dezgustător, fără cel mai mic indiciu de anti-aliasing. Mai ales acest păcat sistem de operare Windows. În cazul lor „nativ“ netezește fonturi Windows normale, cu sistem de operare terță parte din această problemă foarte mare. De aceea, înainte de a vă în cele din urmă decide cu privire la fonturile, este necesar să se uite la ele pe diferite sisteme de operare.

Aici sunt 4 reguli care trebuie înțeles înainte de a vă conecta fontul. Dacă totuși doriți să vă conectați la fonturile terță parte site-ul pe care vizitatorul site-ul dvs. este nu, atunci fă-dreapta.

Conectați fontul corect

În orice carte inteligent cu privire la gestionarea timpului a scris că, dacă nu pot sau nu doresc să facă totul de unul singur, rugați pe altcineva să o facă. Numai că nu face de locuri de muncă destul de obositoare și plictisitoare, cel mai simplu este de a utiliza un serviciu web specializat pe care l-ați descărcat de pe fontul va face toate fonturile necesare, formate și afișează CSS-codul corect, valabil și cel mai important, să-l corecteze pe site-ul dvs..

Acest serviciu este numit burghez și el fontsquirrel.com:

Cross-browser add font terță parte pe - site-ul

În ciuda faptului că site-ul este în limba engleză, și foarte ușor de a lucra cu el:
  1. fonturi descărcabile făcând clic pe Adăugați fonturi;
  2. dacă doriți să schimbați modul de formare Optimal pe EXPERT .... dar am fost fericit cu totul și așa;
  3. a pus o casetă de selectare de lângă cu roșu și apăsăm Descărcați kit-ul dvs. și asta este.

În arhiva descărcată are fișierul stylesheet.css. în care există un CSS-cod. Adăugați-l la fișierul CSS a site-ului.

@ Font-face font-family: 'FlowerNormal';
src: url ( 'floare-webfont.eot');
src: url ( '#iefix floare-webfont.eot?') format ( 'embedded-OpenType'),
URL-ul ( 'floare-webfont.woff') format ( 'WOFF'),
URL-ul ( 'floare-webfont.ttf') format ( 'TrueType'),
URL-ul ( 'floare-webfont.svg # FlowerNormal') format ( 'SVG');
font-weight: normal;
Stil de font: normal;
>

în cazul în care floarea - este numele fontului, care a fost inițial;
FlowerNormal - este numele fontului, care pot fi utilizate în dezvoltarea viitoare a site-ului.

Toate fișierele care sunt prezente în arhivă și care se face referire mai sus, într-un cod html trebuie să fie plasat în același director în cazul în care fișierul CSS.

În acest fel toate.

P.S. Pentru productivitatea muncii noastre cu tine, ca un webmaster, a fost ca întotdeauna în partea de sus, aveți nevoie pentru a crea un mediu confortabil în jurul spațiului de lucru. Primul lucru pe care trebuie să cumpere o lampă, care ne va satisface pe deplin ca un emițător de lumină. Deși activitatea webmasteri - aceasta este de 90% din timpul de lucru la calculator, dar de iluminat în cameră trebuie să fie suficient de mare. Având grijă de confortul personal și de sănătate - este sarcina principală a fiecărui webmaster.