Bardzo często dostając projekt graficzny od grafika widzimy, że zostały tam zamieszczone niestandardowe czcionki. Pół biedy jak czcionki te są użyte na elementach, które mogą zostać wycięte i wstawione na stronę w postaci grafik. Problem pojawia się wtedy, gdy sam tekst dostarczany do elementów strony występuje przy użyciu takiej czcionki.

Jest jednak na to rada.

Transformacja czcionki na potrzeby web

Z pomocą przychodzi nam tutaj serwis fontsquirrel. Po wejściu na stronę wczytujemy czcionkę dostarczoną przez grafika (w postaci pliku ttf). Wybieramy opcje “expert”, w sekcji “Subsetting” wybieramy “Custom Subsetting…”, a następnie w sekcji “Unicode Tables” wybieramy: “Basic Latin, Latin Extended-B, Latin Extended-A”. Te ustawienia oczywiście są dla czcionek zawierajcych polskie znaki. Na koniec zatwierdzamy opcję dotyczącą legalności transformowanej czcionki i po submitowaniu formularza otrzymujemy paczkę z kilkoma plikami, wśród których są pliki wynikowe transformacji oraz plik html zawierający przykład użycia czcionki.

Użycie czcionki na stronie www

Wszystkie pliki (poza przykładowym html) kopiujemy sobie w wybrane miejsce w serwisie, np. /fonts.

Następnie w pliku css definiującym style dla naszej strony wstawiamy następującą deginicję (gdzie czcionka to nazwa naszego pliku z czcionką, bez rozszerzenia):

@font-face {
  font-family: 'NazwaCzcionki';
  src: url('/fonts/czcionka.eot');
  src: url('/fonts/czcionka.eot?#iefix') format('embedded-opentype'),
    url('/fonts/czcionka.woff') format('woff'),
    url('/fonts/czcionka.ttf') format('truetype'),
    url('/fonts/czcionka.svg#gothic') format('svg');
  font-weight: normal;
  font-style: normal;
}

Od tego momentu mamy już pełen dostęp do czcionki. Wystarczy więc dla poszczególnych elementów strony nadać odpowiedni styl i gotowe, np.:

p {
  font-family: NazwaCzcionki;
  font-size: 14px;
}

Wszystko co zostanie więc umieszczone w tagu

będzie renderowane przy użyciu naszej czcionki.

Niestandardowe czcionki na stronie www
Tagged on:                     

Leave a Reply

Your email address will not be published. Required fields are marked *

Social Widgets powered by AB-WebLog.com.