Spójne Web Safe CSS Czcionki używające Google Font i Cufon

1. Bezpieczne rodziny czcionek CSS w sieci
2. Czcionki Google
3. Cufon

Jeden z najważniejszych elementów unikalności i wyglądu stron internetowych zależy od czcionek. Twój krój pisma jest nie tylko korzeniem marki online, ale może również poprawić ogólne wrażenia użytkownika i zachowanie witryny w witrynie.

Częstym problemem większości witryn jest to, że wyświetlana czcionka może się różnić, w zależności od przeglądarki przeglądarki, systemu operacyjnego i / lub urządzenia. Jeśli chcesz, aby typografia i style były jak najbardziej spójne wśród portów widokowych, możesz użyć następujących metod integracji:

Bezpieczne rodziny czcionek CSS w sieci

• Stronie internetowej: Stos czcionek CSS
• Zalety: Szybkie ładowanie, kompatybilne ze wszystkimi urządzeniami, systemami operacyjnymi i przeglądarkami
• Wady: Czcionki muszą być zainstalowane lokalnie na urządzeniu wyświetlającym

Możesz określić swój krój pismem font-family: „Century Gothic”; w Twojej witrynie CSS, ale jeśli urządzenie używane do przeglądania Twojej witryny nie ma zainstalowanej wersji „Century Gothic”, zamiast niej zostanie użyta ogólna czcionka, zwana także rezerwową .

Ogólne kroje rodziny to te, które będą używane przez przeglądarkę / system operacyjny, jeśli wszystkie inne rodziny zawiodą, co może być szeryfowe, bezszeryfowe lub monospace.

font-family: „Helvetica Neue”, Helvetica, Arial, sans-serif;

Powyższy CSS spróbuje wyświetlić zawartość w „Helvetica Neue” lub jeśli system operacyjny go nie zainstaluje, spróbuje użyć następnej czcionki, Helvetica, i tak dalej. Na przykład komputer Apple często ma już zainstalowaną „Helvetica Neue”, dlatego wyświetla ją odpowiednio online, podczas gdy komputer z systemem Windows może wyświetlać ją za pomocą „Helvetica” lub mniej.

Czcionki Google

• Stronie internetowej: Google Webfonts
• Plusy: spójny wyświetlacz, niezależny od systemu operacyjnego
• Wady: zwiększenie obciążenia strony

Jednym z bardziej trendy źródeł osadzania krojów pisma są Google Fonts. Możesz zintegrować Google Webfonts po prostu wybierając żądane kroje pisma, odpowiednie style i wagi oraz umieszczając je w źródle witryny. Im więcej rodzin czcionek i odmian, które zdecydujesz się osadzić w swojej witrynie, tym większe będzie obciążenie strony, które możesz zmierzyć podczas procesu wyboru czcionki Google.

Przykład kodu

<link href = 'http: //fonts.googleapis.com/css? Family = Gabriela' rel = 'stylesheet' type = 'text / css'>

Po osadzeniu arkusza stylów możesz po prostu dołączyć tę rodzinę czcionek za pomocą CSS, używając pierwszej metody powyżej. Korzystanie z Google Fonts zapewnia równe wyświetlanie wybranych czcionek we wszystkich przeglądarkach i systemach operacyjnych.

Cufon

• Stronie internetowej: Generator Cufon
• Plusy: Uczyń dowolną sieć czcionek bezpieczną i spójną
• Wady: Dłuższe ładowanie stron obrazów Cufon; Wymaga JS

Bardziej nudną metodą, ale pozwalającą na użycie dowolnego kroju zainstalowanego na komputerze, jest Cufon. Ta metoda wymaga, aby wszystkie czcionki, które zamierzamy używać, były wolne od reklam, a jeśli nie, zakupiono licencję komercyjną.

Rodzinę czcionek można następnie przesłać i przekonwertować na Cufon, która generuje obraz dla każdego symbolu numerycznego, alfabetycznego i specjalnego dostępnego w przesyłanych rodzinach czcionek.

Wygenerowany plik Cufon jest następnie osadzany na stronie internetowej, a Javascript jest używany do „Cufon” żądanych elementów HTML, co zastępuje tekst obrazami, umożliwiając precyzyjne wyświetlanie czcionek.