Cum utilizam un font extern in CSS

La realizarea unei pagini web, de cele mai multe ori ma bazez pe designul creat in photoshop. Apoi incep sa formatez template-ul. Si de multe ori am avut o astfel de problema ca selectind in photoshop un anumit font, pentru a scrie un text cu un font mai special, in browser textul nu arata ca in photoshop. Browser-ele utilizeaza alte font-uri. Este de mentionat ca pe pc meu unde acest font este instalat deja in sistemul de operare, pagina arata bine, insa pe alte pc-uri, aceasta pagina utilizeaza alt font, pentru a afisa textul, este vorba despre un font implicit “Arial“. Si din cauza acestei probleme in loc de text utilizam imagini.

Insa, de exemplu, daca este vorba de ceva dinamic, ca un blog este necesar ca titlurile posturilor sa fie scrise mai special, atunci imaginile nu sunt o solutie.

Pentru acesta este un mecanizm special care permite dezvoltatorului sa utilizeze orice font. Trebuie de mentionat ca formatul fontului trebuie sa fie .ttf – pentru browserele Mozilla, Safari, Chrome, Opera; si formatul .eot – pentru IE.

” Aveti nevoie doar de fontul cu formatul .ttf in internet sunt o multime de servicii care transforma din .ttf in .eot

Voi arata un exemplu :

1. includem in proiect fontul .ttf si .eot.

ex:

fonturile vor fi plasate in directoriul resources/fonts (din directoriul parinte).
paginile de stil, (css) in resources/css

paginile html direct in directoriul parinte.

2. Avem urmatoarea structura :

resources/fonts/Bleeding Cowboys.ttf
resources/fonts/Bleeding Cowboys.eot
resources/css/style.css
home.html

Si avem urmatoarele surse :
home.html

<html>
  <head>
  <title> Extern Fonts Enbed</title>
  <link rel="stylesheet"
   href="resources/css/style.css"
   type="text/css"
   media="all" />
  </head>
  <body>
    <br>
    <br>
    <br>
    <br>
      <div class="my-class-silver-big"><center>
        Silver big  extern fonts enbed
      </center></div>
      <div class="my-class-silver-small"><center>
        Silver small  extern fonts enbed
      </center></div>
      <div class="my-class-black-small"><center>
        Black small  extern fonts enbed
      </center></div>
      <div class="my-class-black-big"><center>
        Black big  extern fonts enbed
      </center></div>
  </body>
</html>

Pagina de stil
resources/css/style.css

@font-face {
  font-family:MyFontTitle;
  src:url("../fonts/Bleeding Cowboys.eot");
}

@font-face {
  font-family:MyFontTitle;
  src:url("../fonts/Bleeding Cowboys.ttf");
}

.my-class-silver-small {
  font-family:MyFontTitle;
  font-size:15px;
  color:silver;
}

.my-class-silver-big {
  font-family:MyFontTitle;
  font-size:36px;
  font-weight:bold;
  color:silver;
}

.my-class-black-small {
  font:normal 15px MyFontTitle;
  color:black;
}

.my-class-black-big {
  font:bold 36px MyFontTitle;
  color:black;
}

Si cam asa sa primit rezultatul :

aici download surse

philosophy about open-source sites

Acest post nu are ca scop prezentarea creierii unui site/program/tool open source, ci prezentare functionalitatilor si posibilitatilor codului scris pentru a fi utilizat de catre altcineva.

Iau ca un caz aparte creare unui site pentru a fi utilizat de catre altcineva, iar aceste idei se pot adapta usor si la celalte tool-uri open-source.

In continuare prin cuvantul “developer” se va subintelege persoana care a creat site-ul initial iar “utilizator” – o persoana care va folosi acel site ( de asemenea, el poate scri/adauga/modifica cod in site dupa necesitatile pe care le vrea de la noul site )

E o diferenta foarte mare atunci cand creez un site, eu ca dezvoltator, pentru mine, si in a crea o pagina pentru un utilizator necunoscut, utilizator care poate nu o sa-l vezi niciodata.

In primul caz cand eu sunt utilizatoru si tot eu sunt si dezvoltatorul, folosind tehnologiile precum PHP, MYSQL, DESIGN se formeaza un conglomerat de code.

in toate cele 3 cercuri se afla cod scris de catre dezvoltator, si toate luate impreuna reprezinta site-ul.

Acum, hai sa facem un test si sa dam acest site unui utilizator care nu va avea nici un contact cu dezvoltatorul site-ului.

  • Partea buna e ca utilizatorul va avea un site gata facut.
  • Partea rea… mai bine zis partile rele apar atunci cand utilizatorul are nevoie de personalizarea site-ului. Si anume, el trebuie sa invete cam tot ce inseamna cod php si motorul din spatele site-ului ( care necesita un efort enorm din partea utilizatorului si respectiv din partea dezvoltatorului care trebuie sa scrie documentatie pentru tot codul php ) si trebuie sa se uite peste ce inseamna design al site-ului. Rezumat in cateva cuvinte: utilizatorul va trebui sa invete tot codul din site si pe langa faptul ca invata cod strain, este posibil ca sa nu ii placa codul vazut si poate are si idei mai bune de a crea acel site… si intr-un final exista o mare probabilitate de a renunta la el in favoarea altui.

Pentru a face un astfel de site accesibil mai usor unui utilizator, trebuie de identificat toate tehnologiile/tooluri cu care se va lucra:

  • MYSQL – utilizat pentru managementu cu datele.
  • PHP – limbaju de scripting din spatele site-ul.
  • TEMPLATE – fiecare utilizator doreste sa aiba un design personalizat.

Acum, luati pe pasi mici, se pot face urmatoarele lucruri:

  • ascunderea lucrului cu baza de date mysql, astfel ca tot codul sa fie doar PHP curat. Asta se face prin dezvoltarea unor clase ( engine ) care intorc datele necesare framework-ului prin structuri de tip php. Astfel vom avea ceva de genu :

In acest moment in ecuatie raman doar 2 componente : PHP si TEMPLATE.

  • Pentru a “ascunde” codul php, trebuie definita o interfata, o multime de functii care vor fi expuse mediului exterior si care sa fie foarte bine documentate. Aceste functii/scripturi vor prezenta insusi motorul (engine-ul) site-ului si toate feature-ule/posibilitatile site-ului.

acum avem din tot codul PHP o interfata de functii ( componenta PHP am simplificato ) si designul.

Designul e singura componenta care e strins legata de utilizator, si de aceea trebuie sa creem site-ul in asa mod incat din codul template-ul sa avem acces la toate facilitatile enginului siteului, de aceea am creat o interfata a engine-ului din php. Designul, implementat ca template, trebuie doar sa aiba posibilitatea sa zica doar ca in acest loc vor fi anumite informatii ( preluate cu un singur apel de functie php din interfata declarata mai sus ) iar in alt loc sa fie alte informatii ( tot preluate din informatii ).

Astfel, avind definita o interfata de functii php cu toate functionalitatile site-ului, o pagina din template ar putea arata astfel :

<?php include site_interface(); ?>
<html>
 <head>
  <title><?php echo get_title(); ?></title>
  <?php print_css_files(); ?>
 </head>
 <body>
   <h1> <?php echo post_title(); ?> </h1>
   <p> <?php echo post_content(); ?> </p>
 </body>
</html>

Acum, utilizatorul in caz ca vrea sa modifice ceva, va modifica doar in template-ul sau, si va avea posibilitatea de a modifica diferite kestii foarte rapid. Si tot ce treb sa invete este doar lista functiilor din interfata.

Comentariile sunt binevenite.