Własne czcionki są jednymi z najbardziej atrakcyjnych aspektów CSS3 dla projektantów. Dzięki regule font-face możesz renderować dowolną czcionkę online w tekście strony WWW, niezależnie od tego, czy użytkownik ją zainstalował, czy nie.
Podobnie jak w przypadku większości technik CSS3, podstawowy kod jest dość prosty, ale rzeczywistość praktyczna jest nieco bardziej złożona.
W tym krótkim samouczku omówimy podstawy czcionek niestandardowych na Twoich stronach.
Najpierw upewnij się, że czcionka, której chcesz użyć, jest licencjonowana do używania w Internecie. Prawie wszystkie darmowe czcionki mogą być używane na stronie internetowej, a wiele czcionek premium jest dostępnych z licencją obejmującą korzystanie z Internetu.
Następnie prześlij wybraną czcionkę na serwer. Możesz go przechowywać w dedykowanym katalogu "fonts", ale jest to opcjonalne.
Pamiętaj o dołączeniu plików dla dowolnych wariantów czcionki, z której zamierzasz korzystać, takich jak pogrubienie lub kursywa. Możesz użyć plików EOT (Embedded OpenType) dla Internet Explorera i OTF (OpenType) lub TTF (TrueType) dla reszty. (Dodatkowe opcje to WOFF (Web Open Font Format) i SVG (Scalable Vector Graphics), ale będziemy trzymać się bardziej popularnych typów tutaj.)
Zanotuj, gdzie pliki czcionek są przechowywane na serwerze.
Otwórz plik HTML lub CSS dla strony, z którą pracujesz. Dodaj deklarację kroju czcionki do kodu stylu:
@font-face {}Najpierw w sekcji " Czcionka " nadaj czcionce nazwę, której możesz później użyć, aby się do niej odnieść:
font-family: 'lovelyFont';Następnie, nadal w sekcji " Czcionka " podaj lokalizację pliku EOT:
src: url('fonts/lovely_font.eot');Zmień lokalizację i nazwę czcionki, jeśli to konieczne. Następnie dodaj czcionkę OTF i / lub TTF:
src:url('fonts/lovely_font.otf')src:url('fonts/lovely_font.ttf') Są to niezapisane kości wymaganego kodu, które w wielu przypadkach będą wystarczające. Są jednak dodatkowe kroki, które możemy podjąć, aby kod był bardziej niezawodny. Najpierw rozszerz tę sekcję, aby zawierała wskaźnik typu pliku czcionki:
src:url('fonts/lovely_font.otf')format('opentype');src:url('fonts/lovely_font.ttf')format('truetype');Jako kolejną opcjonalną miarę efektywności możemy sprawić, że przeglądarka sprawdzi lokalną kopię czcionki na wypadek, gdyby użytkownik ją już posiadał. Rozszerz swój kod w następujący sposób, dodając sekcję lokalną przed podaniem adresu URL, aby czcionka została pobrana tylko w razie potrzeby:
src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.ttf')format('truetype');Dodawanie jest takie samo dla OTF i TTF. Określamy nazwę czcionki po słowie kluczowym lokalnym .
W tym przypadku mamy dwie linie określające lokalną czcionkę, ponieważ nazwa czcionki zawiera więcej niż jedno słowo. Wersja dzielona służy do przechowywania nazw czcionek w niektórych systemach operacyjnych - ta dodatkowa linia nie jest konieczna, jeśli czcionka zawiera tylko jedno słowo w nazwie. Jeśli wiesz, że czcionka może mieć różne nazwy w różnych systemach, uwzględnij każdą z możliwości w swojej lokalnej sekcji.
Wreszcie możemy zastosować czcionkę do elementów strony. W kodzie CSS dla danego elementu lub grupy elementów określ po prostu nazwę użytej czcionki, w tym dowolne opcje wyboru:
div { font-family: 'lovelyFont', sans-serif; }Jeśli, na przykład, chcesz użyć pogrubionej wersji czcionki, po prostu dołącz następną sekcję czcionek z pogrubionym adresem pliku czcionki i deklaracją "grubość czcionki: pogrubiona;". Określ grubość czcionki pogrubioną dla dowolnego elementu z zastosowaną niestandardową czcionką, a przeglądarka automatycznie wyrenderuje pogrubioną wersję:
/*default version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font.eot');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');}/*bold version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font_bold.eot');src:local('Lovely Font Bold'),local('Lovely-Font-Bold'),url('fonts/lovely_font_bold.otf')format('opentype');font-weight: bold;}/*container element*/div { font-family: 'lovelyFont', sans-serif; }/*span elements inside the container div*/span { font-weight: bold; }To jest to!
Czy używasz CSS3, aby rozwinąć dostępne twarze? Czy korzystasz z usług takich jak Adobe Typekit lub Google Webfonts? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, obraz czcionek przez Shutterstock.