Warning: fopen(/0877f0a35aaf4054086888240ba568c5e50d343d) [function.fopen]: failed to open stream: Permission denied in /home/klient.dhosting.pl/damek/damek.eu/public_html/wp-content/plugins/fv-code-highlighter/Includes/Cache.php on line 69
Warning: fopen(/cf9fa71acdf43653fa0c30ca5cf1cd763c78359a) [function.fopen]: failed to open stream: Permission denied in /home/klient.dhosting.pl/damek/damek.eu/public_html/wp-content/plugins/fv-code-highlighter/Includes/Cache.php on line 69
Warning: fopen(/35614f3aa58758d17ff1c461e83d9949633e9131) [function.fopen]: failed to open stream: Permission denied in /home/klient.dhosting.pl/damek/damek.eu/public_html/wp-content/plugins/fv-code-highlighter/Includes/Cache.php on line 69
Warning: fopen(/9fdc3565dcf54ff5657d2145de0f9d6ac8705311) [function.fopen]: failed to open stream: Permission denied in /home/klient.dhosting.pl/damek/damek.eu/public_html/wp-content/plugins/fv-code-highlighter/Includes/Cache.php on line 69
Ostatnio mówiłem w jaki sposób zaimplementować niestandardowe fonty za pomocą Google Font API. Rozwiązanie to ma jednak jak na tą chwilę dwa duże minusy. Po pierwsze jesteśmy ograniczeni co do czcionek znajdujących się w Google Font Directory, a po drugie nie wszystkie czcionki obsługują polskie znaki dialektyczne. Dlatego jeśli chcemy użyć innej niestandardowej czcionki możemy to zrobić w jeszcze jeden prosty sposób.
Web Fonts to osobna specyfikacja W3C dla @font-face, która postała już w 1997 roku. Zaimplementowanie niestandardowego fonta jest tutaj bardzo proste. Sprowadza się to do wpisania następującej deklaracji do naszego arkusza stylów:
1 2 3 4 5 6 7
@font-face {
font-family: nazwaczcionki;
src: url(czcionka.otf);
}
Teraz użycie naszej czcionki dla nagłówka h1 będzie wyglądało w ten sposób:
1 2 3 4 5
h1 {
font-family: nazwaczcionki, Arial, Sans-serif;
}
Są jednak pewne mankamenty tego rozwiązania. Internet Explorer pozwala tylko na osadzenie czcionek .eot (Embedded Open Type). Dlatego jeśli użyjemy czcionki .ttf i .otf to nie będzie ona widoczna po otworzeniu strony w przeglądarce, a wyświetlony zostanie tekst przy zastosowaniu standardowej czcionki zdeklarowanej dalej, w tym przypadku Ariala. Czcionki ttf i .otf za to wspierane są przez Operę, Safari i Firefoxa, a także Google Chrome.
Więcej niestandardowych czcionek.
Obecnie czcionki mają zazwyczaj cztery odmiany: normalną, pogrubioną, pochyloną i pogrubioną pochyloną. font-weight określa w takim przypadku wagę czcionki, a font-style jej styl. Jeśli chcemy używać czcionki pogrubionej to musimy ją zaimplementować w sposób podany niżej:
1 2 3 4 5 6 7 8 9
@font-face {
font-family: nazwaczcionki;
font-weight: bold;
src: url('czcionka-bold.otf');
}
Jeśli chcielibyśmy użyć czcionki pochylonej to tym razem musimy skorzystać z font-style:
1 2 3 4 5 6 7 8 9
@font-face {
font-family: nazwaczcionki;
font-style: italic;
src: url('czcionka-italic.otf');
}
Gdy nie zdefiniujemy stylu czcionki przyjmuje on wartość ‘normal’.
Przykład:
Nice Web Type
Przydatne:
Web Embedding Fonts Tool (WEFT)
Darmowy konwerter formatów czcionek
Zostaw swój komentarz
9 Komentarzy
Czyli wystarczy zaimplementować zarówno .eot dla IE i .ttf/.otf reszty. Tylko pytanie czy da się konwertować czcionki w obie strony?
A co się stanie, jak nie zdefiniuję wagi i stylu czcionki, a będę chciał uzyskać z któryś efektów?
Jeśli zaimplementujesz czcionkę tylko o normalnym kroju pisma to gdy np. do nagłówka h1 dodasz font-weight: bold; to nic się nie stanie. Tekst wyświetlony będzie bez zmian, nie uzyskasz efektu pogrubienia bez zaimplementowania odpowiedniej czcionki.
Co do konwertowania czcionek to chyba najlepiej używać Microsoft WEFT, który stworzy nam .eot. Jednakże jeśli licencja w czcionce .ttf i .otf na to nie pozwala to nie uda nam się wygenerować pliku .eot czcionki, którą chcemy umieścić na stronie.
Bardzo przydatny artykuł. Szukałem tego ale coś znaleźć nie mogłem. Dziękować.
Hmm dodałem:
@font-face {
font-family: ‘Sansation Regular’;
src: url(‘fonts/Sansation_Regular.eot’);
src: local(‘fonts/Sansation Regular’), local(‘Sansation’), url(‘fonts/Sansation_Regular.woff’) format(‘woff’), url(‘fonts/Sansation_Regular.ttf’) format(‘truetype’), url(‘Sansation_Regular.svg#Sansation’) format(‘svg’);
}
@font-face {
font-family: ‘Sansation Regular’;
font-style: italic;
src: url(‘fonts/Sansation_Regular.eot’);
src: local(‘fonts/Sansation Regular’), local(‘Sansation’), url(‘fonts/Sansation_Regular.woff’) format(‘woff’), url(‘fonts/Sansation_Regular.ttf’) format(‘truetype’), url(‘Sansation_Regular.svg#Sansation’) format(‘svg’);
}
@font-face {
font-family: ‘Sansation Regular’;
font-weight: bold;
src: url(‘fonts/Sansation_Bold.eot’);
src: local(‘fonts/Sansation Bold’), local(‘Sansation’), url(‘fonts/Sansation_Bold.woff’) format(‘woff’), url(‘fonts/Sansation_Bold.ttf’) format(‘truetype’), url(‘Sansation_Bold.svg#Sansation’) format(‘svg’);
}
Bold zaskoczył, ale Italic już nie :/ Czcionka niby powinna być ta sama co w regular
@Tomek
Hmm na pewno ta sama co w regular? Raczej powinien być osobny plik eot dla tego kroju czcionki i jego trzeba zaimplementować.
No to lipa bo nie mam :/ Sugerowałem się tym, że po dodaniu do Windowsa Regular na blogu było widać normalnie Italic.
Można też użyć konwetera czcionek onlie http://onlinefontconverter.com/ zmieni każdą czcionkę, tylko tak jak pisał Damek, należy się wczytać w licencję czy można dany font konwertować. Ostatnio niestety coraz więcęj “free fontów” rezygnuje z bycia “free” dla @font-face …
Najlepiej zdać się na generator z Fontsquirrel.com, napisałem o tym u siebie: http://doktorno.vot.pl/content/jak-zastosowac-font-face
Bardzo fajna metoda, żeby korzystać z dowolnej czcionki. Ja zwykłem ostatnio korzystać z Cufon’a. Cufon znacznie lepiej renderuje czcionkę. W operze zwykłe czcionki są renderowane bez wygładzania, w FF5 czcionki są już lepiej wygładzone.
Cufon ma też tą przewagę, że działa w IE, bo @font-face niestety nie chodzi pod IE :(
Można zawsze też korzystać z obu na raz :)