Własna czcionka na stronie intenertowej


W dalszej części artykułu przedstawię sposoby wyświetlania nietypowych czcionek na stronie internetowej. Wbrew pozorom niestandardowe czcionki można zaimplementować na kilka sposobów.

Tworząc stronę internetową webmaster musi pamiętać o wyborze właściwych czcionek,  które zobaczą wszyscy użytkownicy serwisu.

W związku z tym developerzy ograniczali się do podstawowego zestawu czcionek szeryfowych bądź bezszeryfowych, które są zainstalowane na większości komputerów jak: Arial, Verdana, czy Times New Roman.

Przykładowy styl dla czcionek bezszeryfowych wygląda następująco:

 font-family: Verdana,Arial,sans-serif;

Mówi on przeglądarce, by wyświetliła stronę w pierwszej kolejności za pomocą czcionki Verdana, jeśli nie ma jej zainstalowanej na komputerze to za pomocą Arial’a, a jeśli i ona nie występuje na komputerze użytkownika to domyślną czcionką bezszeryfową.

Firma Google udostępniła rozwiązanie do osadzania nietypowych czcionek o nazwie Google Web Fonts.

Wchodząc na stronę projektu wybieramy czcionkę, którą chcemy zaimplementować na stronie.

Po kilku krokach, dostajemy wygenerowany kod CSS, który wstawiamy na stronie.

<link href='http://fonts.googleapis.com/css?family=NowaCzcionka' rel='stylesheet' type='text/css'>
<style type="text/css">
	selektor { font-family: NowaCzcionka, serif; }
</style>

W pierwszym wierszu pobieramy czcionkę, w przypadku nazw kilku wyrazowych spacje zastępujemy plusami.

3 wiersz to implementacja czcionki, w przypadku gdyby się nie zaciągnęła będzie wyświetlana domyślna czcionka szeryfowa.

Narzędzie Google oferuje wiele różnych darmowych czcionek, wśród których można wybrać odpowiednią. Niestety lista jest ograniczona i można wybrać jedynie już istniejące czcionki.

Kolejnym sposobem wstawiania czcionek jest mechanizm Cufon.

Działa on w wyniku połączenia JS i mechanizmu canvas HTML5.

Wchodząc na stronę projektu wgrywamy czcionkę jaką chcemy zastosować, wybieramy: styl, znaki specjalne, narodowe, itp. Po akceptacji regulaminu dostajemy wygenerowany plik JS który zawiera szablony znaków pożądanej czcionki.

Następnie wystarczy w nagłówku osadzić skrypt cufon wraz ze skryptem czcionki i po wywołaniu funkcji cieszyć się nowymi czcionkami na stronie np:

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="NowaCzcionka_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
    Cufon.replace('p');
</script>

Pierwszy skrypt to mechanizm zamiany czcionki. Drugi zawiera definicję nowej czcionki, a trzeci zawiera funkcję która zamienia czcionkę we wszystkich paragrafach.

Zaprezentowany mechanizm ma sporo opcji konfiguracyjnych jak np. gradientowy kolor czcionki, o wszystkich opcjach można przeczytać na stronie API projektu.

Nie jest to niestety rozwiązanie doskonałe, istnieje problem z odległościami między kolejnymi wierszami (zmiana wartości: line-height), bądź też brak wsparcia dla języków pisanych od prawej do lewej (np: arabski).

Na koniec czcionki osadzone czyli @font-face.

Najbardziej ‘naturalnym’ dodawaniem nietypowych czcionek na stronę jest po prostu wrzucenie pliku czcionki na serwer strony i odwoływanie się do niego.

Aby być pewnym, że prawie wszystkie urządzenia poprawnie zinterpretują czcionkę, należy dodać ją w kilku formatach jak widać poniżej:

@font-face {
  font-family: 'NowaCzcionka';
  src: url('NowaCzcionka.eot');
  src: url('NowaCzcionka.woff') format('woff'),
       url('NowaCzcionka.ttf') format('truetype'),
       url('NowaCzcionka.svg#svgFontName') format('svg');
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
}

body{
  font-family: NowaCzcionka;
}

Powyższy wpis dodaje następujące typy czcionek:

  • EOT – Internet Explorer 5-8 (musi występować jako pierwszy)
  • WOFF – IE9, FF3.6
  • TTF – IE9, FF, Chrome, Opera
  • SVG – IOS (Iphone)

Wywołanie czcionki jest standardowe:

body{
  font-family: NowaCzcionka, serif ;
}

Jak widać zawsze należy ustawić wywołanie czcionki standardowej.

Oprócz wyżej przedstawionych metod występuje jeszcze np. sIFR podobny trochę do przedstawionego powyżej Cufon’u korzystający z JavaScript, CSS i Flash.

Podczas dodawania własnych czcionek na stronie należy pamiętać o obowiązujących prawach autorskich.

Times New Roman

, , ,

  1. #1 how to get rid of acne overnight, 4 Listopad 2012

    Neat blog! Is your theme custom made or did you
    download it from somewhere? A design like yours with a few simple adjustements would
    really make my blog stand out. Please let me know where you got your theme.
    Cheers

  2. #2 youtube views, 8 Listopad 2012

    Thanks for sharing your info. I truly appreciate your efforts
    and I am waiting for your further write ups thanks once again.

  3. #3 Alien, 11 Listopad 2012

    It’s free template, but I changed couple things. Thanks for Your post :)

  4. #4 how to make an app, 27 Listopad 2012

    May I just say what a comfort to discover an individual who actually understands what
    they’re discussing over the internet. You certainly realize how to bring a problem to light and make it important. More people should read this and understand this side of your story. I was surprised you are not more popular given that you certainly have the gift.

  5. #5 Shannon, 6 Grudzień 2012

    Sweet blog! I found it while surfing around on Yahoo News.
    Do you have any suggestions on how to get listed in Yahoo News?

    I’ve been trying for a while but I never seem to get there! Appreciate it

  6. #6 16 zone alarms Western Cape, 18 Grudzień 2012

    It is not my first time to pay a quick visit this web page,
    i am visiting this web page dailly and obtain good information from here daily.

  7. #7 disability cover and education plan Gauteng, 18 Grudzień 2012

    Awesome post.

  8. #8 Esperanza, 19 Grudzień 2012

    Hey! This is kind of off topic but I need some help from an established
    blog. Is it difficult to set up your own blog? I’m not very techincal but I can figure things out pretty quick. I’m
    thinking about making my own but I’m not sure where to start. Do you have any points or suggestions? Cheers

  9. #9 solar panels Gauteng, 19 Grudzień 2012

    If you are going for best contents like I do, only pay a visit this web page everyday because
    it gives quality contents, thanks

  10. #10 advertising, 19 Grudzień 2012

    Touche. Great arguments. Keep up the amazing effort.

  11. #11 Aluminium trailers Western Cape, 19 Grudzień 2012

    Have you ever thought about including a little bit more than just your articles?
    I mean, what you say is fundamental and all. But just imagine if
    you added some great photos or video clips
    to give your posts more, “pop”! Your content is excellent but with images and clips,
    this site could certainly be one of the best in its niche.
    Awesome blog!

  12. #12 shuttle service and rubble removals Pretoria, 20 Grudzień 2012

    I am extremely impressed with your writing skills as well as with the layout on your weblog.
    Is this a paid theme or did you modify it yourself?

    Either way keep up the excellent quality writing, it is
    rare to see a great blog like this one today.

  13. #13 home sitter Western Cape, 20 Grudzień 2012

    Hello my loved one! I wish to say that this post is amazing, nice written and come with almost all vital
    infos. I’d like to see more posts like this .

  14. #14 mobile catering Port Elizabeth, 20 Grudzień 2012

    I used to be able to find good information from your content.

  15. #15 bakkie rental Gauteng, 20 Grudzień 2012

    Hi, I do believe this is an excellent site. I stumbledupon it ;) I will come back once again since
    I book-marked it. Money and freedom is the greatest way to change, may you be rich and
    continue to help others.

  16. #16 entertainment areas Kwazulu Natal, 20 Grudzień 2012

    Hello, I think your website might be having browser compatibility
    issues. When I look at your blog in Chrome, it looks fine but when
    opening in Internet Explorer, it has some overlapping. I just
    wanted to give you a quick heads up! Other then that, terrific blog!

  17. #17 newport cigarettes, 20 Grudzień 2012

    Very nice post. I just stumbled upon your blog and
    wished to say that I’ve truly enjoyed browsing your blog posts. After all I’ll be subscribing
    to your feed and I hope you write again soon!

  18. #18 health and fitness Johannesburg, 23 Grudzień 2012

    Appreciating the hard work you put into your
    blog and in depth information you present. It’s good to come across a blog every once in a while that isn’t the same unwanted rehashed material.
    Great read! I’ve saved your site and I’m adding your RSS feeds to my Google account.

  19. #19 pay day loans, 24 Grudzień 2012

    My family always say that I am killing my time here at web, but
    I know I am getting familiarity daily by reading such good posts.

  20. #20 www.paydayloansyeah.com, 24 Grudzień 2012

    It’s difficult to find educated people about this topic, however, you seem like you know what you’re talking
    about! Thanks

  21. #21 Chasity, 24 Grudzień 2012

    I was curious if you ever considered changing the layout of your blog?
    Its very well written; I love what youve got to say. But
    maybe you could a little more in the way of content so people could connect with it better.

    Youve got an awful lot of text for only having 1 or two pictures.
    Maybe you could space it out better?

  22. #22 ps3 ylod, 25 Grudzień 2012

    Unquestionably believe that which you stated. Your favorite reason seemed to be on the internet the easiest thing to be aware of.
    I say to you, I definitely get annoyed while people consider
    worries that they just don’t know about. You managed to hit the nail upon the top and defined out the whole thing without having side effect , people could take a signal. Will probably be back to get more. Thanks

  23. #23 woodworking Projects, 26 Grudzień 2012

    I’m truly enjoying the design and layout of your blog. It’s a very easy on the eyes which makes it
    much more pleasant for me to come here and visit more often.

    Did you hire out a designer to create your theme?

    Exceptional work!

  1. No trackbacks yet.

Comments are closed.