Jak korzystać z czcionek Google w następnym projekcie internetowym i dlaczego warto

Reklama

Wybór czcionek jest integralną decyzją projektową w każdej witrynie, ale przez większość czasu jesteśmy zadowoleni z tej samej starej rodziny serif i sans-serif. Chociaż główna treść tekstu powinna zawsze być zoptymalizowana pod kątem czytelności, chyba że chcesz czytelników aby uzyskać ból głowy, tytuły i wyróżniający się tekst mogą być miejscem, w którym możesz dodać unikalny projekt z czcionką talent.

Czytaj dalej, aby dowiedzieć się, jak korzystać z dowolnego z Czcionki internetowe Google na twojej stronie.

tło

Dzięki CSS możesz określić łańcuch czcionek, które będą używane, jeśli preferowany nie jest dostępny. To pozwala ci mieć pierwszy wybór - być może rzadziej używaną, ale wolną czcionkę; następnie miej kopie zapasowe w miejscu, które zawsze będą dostępne w systemie Windows lub Mac. Ogólnie jednak projektanci stron internetowych będą trzymać się sprawdzonych łańcuchów rodzin czcionek, as przedstawione przez szkoły w3.

W przeszłości, jeśli pożądana była inna czcionka, projektanci byli zmuszeni do tworzenia obrazów do tekstu - logo, nagłówki itp. Wadami są:

• Obrazy nie skalują się dobrze.
• Obrazy nie są odczytywane przez czytniki ekranu.
• Nie możesz wyróżniać tekstu na obrazach.
• Wyszukiwarki nie mogą „czytać” obrazów.
• Ładowanie obrazu spowalnia stronę.

Czy jest więc lepsze rozwiązanie? Który pozwala nam korzystać z powszechnie dostępnego zestawu bezpłatnych czcionek, bez uciekania się do obrazów?

Czcionki internetowe Google

Odpowiedź pochodzi od Google. Google Web Fonts jest zasadniczo zbiorem (według aktualnej liczby, 489) zoptymalizowane czcionki przechowywane w chmurze, które mogą być osadzone w projektach internetowych (lub nawet pobrane do użycia na komputerze).

Ponadto witryna Google Web Fonts ułatwia porównywanie i wybieranie, a następnie zapewnia cały kod potrzebny do osadzenia czcionki za pomocą Javascript lub CSS - więcej na ten temat później.

Pierwsze kroki

Udaj się do Witryna czcionek internetowychi kliknij zacznij wybierać czcionki na początek.

Interfejs jest dość intuicyjny - po lewej stronie możesz wyszukiwać określone słowa kluczowe; i filtruj według podstawowego typu czcionki; lub filtruj według określonych czynników, takich jak grubość liter. Pasek u góry dostosowuje tylko tekst podglądu. Jeśli masz określony akapit tekstu, na którym chcesz go przetestować, na przykład przejdź do karty akapitu i wklej tekst.

Jak wspomniałem, lepiej nie wybierać niczego zbyt fantazyjnego dla głównego tekstu treści, więc trzymaj się rodziny szeryfowej lub bezszeryfowej, jeśli naprawdę chcesz tam znaleźć coś wyjątkowego.

Gdy zobaczysz ten, który Ci się podoba, po prostu dodaj go do swojej kolekcji.

Kliknij przejrzeć przycisk, aby przejść do trybu recenzji i porównać wszystkie wybrane opcje.

W trybie recenzji wyświetlane są różne rozmiary czcionek oraz tekst akapitu lub nagłówka. System dokona również inteligentnego wyboru, który pokaże ci w zależności od typowego przypadku użycia tej czcionki; ale możesz zmienić tryb podglądu, jeśli chcesz.

Przewiń w prawo, aby zobaczyć inne czcionki w bieżącej kolekcji; kliknij X w prawym górnym rogu, aby je odrzucić.

Jazda testowa to szczególnie interesujący tryb, który połączy wszystkie czcionki w Twojej kolekcji, aby pokazać, jak może wyglądać po połączeniu na podstawowym układzie strony.

OK, wybrany. Jak z nich korzystać?

Po zawężeniu kolekcji kliknij przejrzeć przycisk na dużym niebieskim pasku. Jeśli zaszedłeś za burtę i podałeś zbyt wiele (naprawdę, nie przekraczaj 2), wskaźnik wpływu ładowania strony ostrzeże Cię.

Przewiń w dół, aby pobrać odpowiedni kod. Istnieją tutaj 3 opcje:

• Standard (metoda rel = link): należy to wkleić w sekcji HEAD witryny, więc aby to zrobić, musisz dobrze znać HTML. W przypadku WordPress dodasz go do header.php jeśli wybierzesz w ten sposób. Nie polecam tego.
• @import: ta metoda przechodzi bezpośrednio do pliku arkusza stylów, w którym i tak będziemy określać czcionki dla różnych elementów strony, więc osobiście polecam to. W przypadku motywów WordPress umieść go w style.css zaraz po sekcji informacji o motywie
• JavaScript: oczywiste - umieść kod w dowolnym miejscu motywu. Zaletą korzystania z tej metody jest to, że czcionka będzie ładowana asynchronicznie - strona będzie najpierw wyświetlana jako czcionka zastępcza, a następnie przełączy się po pełnym załadowaniu czcionki. Chociaż początkowy czas ładowania strony będzie krótszy, spowoduje to nagłą zmianę dla użytkownika, której możesz nie chcieć.

To jest krok 1. Krok 2 polega na określeniu czcionki, w której ma być używana. Nie mamy tu miejsca na pełny samouczek CSS (sugeruję to 5 stron edukacyjnych CSS Top 5 witryn do nauki CSS Online Czytaj więcej ; i moje własne 5 kroków dla dzieci w samouczku CSS 5 kroków do nauki CSS i zostania czarodziejem CSS w stylu kick-assCSS jest najważniejszą zmianą, jakiej dokonały się strony internetowe w ostatnim dziesięcioleciu, i utorował drogę do oddzielenia stylu i treści. W nowoczesny sposób XHTML definiuje strukturę semantyczną ... Czytaj więcej ), ale wystarczy powiedzieć, że dostosujesz wszystko w arkuszu stylów, które mówi rodzina czcioneki pamiętaj o uwzględnieniu stylu kopii zapasowej zgodnie z sugestią Google.

Zoptymalizowany

Użycie niestandardowej czcionki, którą użytkownik musi pobrać, doda trochę czasu do wczytywania strony - to nieuniknione. Jednak typowa czcionka internetowa Google ma rozmiar około 100 KB - dla porównania jest to rozmiar dobrej jakości średniej wielkości obrazu JPEG. Podobnie jak obrazy, czcionka internetowa będzie buforowana w przeglądarce użytkownika, więc tylko początkowe ładowanie strony będzie nieco opóźnione.

Podsumowanie

Przyznaję - uwielbiam czcionki. Spodziewam się, jak wielu z was, mam tendencję do hordowania ich na moim dysku twardym - na wszelki wypadek, wiesz ?! Teraz mogę faktycznie korzystać z unikalnych czcionek w moich projektach internetowych - jestem podekscytowany. Proszę, nie zaniedbuj czcionek na swojej stronie!

Jeśli masz pytania dotyczące implementacji czcionek internetowych w swojej witrynie, zadaj je w komentarzach, a zobaczę, czy mogę pomóc.