CSS: Importowanie fontów

0:00W tej lekcji opowiem o importowane czcionek.

0:03Generalnie ja tutaj przez cały kurs miałem załadowane czcionki lato

0:08i ja ją ładowane za pomocą bezpośredniego linku do CDN Lewego

0:14i chciałbym po prostu tutaj troszkę nam opowiedzieć jak to konkretnie działa.

0:18Najistotniejsze co tutaj jest to to że w piątek domyślnie mają coś takiego jak

0:25Display służb czyli pozwalają na to że w momencie gdy dany front czyści czcionka

0:32nie ładują się jeszcze to znaczy nie ma ich jeszcze załadowane w przeglądarce

0:37no to tekst na mnie będzie znikał bo tak jak widzimy tutaj przy tym pierwszym.

0:44Za ładowaniu faktycznie jest mrugnięcia tego naszego tekstu

0:50więc jeśli damy tutaj Display

0:53słownik i to jest coś co domyślnie jest w tym linku cenowym od Googla zawarte.

1:00Jeżeli faktycznie korzystamy z tego bezpośrednio.

1:04No to tego mrugnięcia tam nie będzie.

1:06Zwłaszcza jeżeli tej czcionki faktycznie nie było w przeglądarce

1:11więc Display słup to jest coś o czym warto

1:14wiedzieć jeżeli faktycznie ręcznie ładuje czcionki bądź.

1:18Jeśli po prostu chcemy rozumieć co Gul

1:20robi pod spodem gdy korzystamy z jego cdn a co dalej chciałem powiedzieć to

1:26jak można ładować czcionki za pomocą dyrektywy food fast

1:31food fast to też jest tak samo jak media które zaczynamy ze

1:35znakiem małpy na początku no i tutaj dajemy deklarację naszego funta czyli

1:40deklarujemy jaką ma mieć nazwę Food Family.

1:43To jest tak jakby nazwa czcionki tutaj

1:46deklarujemy jej styl czyli czy to ma być styl normalny.

1:50Może tam być talib może być oblicze czyli takie grube i wata.

1:56Generalnie to są rzeczy bardzo powiązane z topografii.

1:59Na stronach internetowych i nie tylko

2:00generalnie cyfrową topografii i found Display faktycznie jest ustawiony na słup

2:08dzięki czemu nie będzie tego charakterystycznego mrugnięcia.

2:11I faktycznie strony będą ładować się

2:13szybciej pomimo tego że czcionka może się dynamicznie zmienić ponieważ jeżeli to

2:18robot to nie będzie wspierane domyślnie no to zostanie użyta farba czcionka domyślne

2:26i ona się oczywiście może zmienić w czasie

2:29będzie widać taki przeskok ale tekst będzie czytelny cały czas co zwłaszcza

2:33przy wolnym łącza internetowym jest naprawdę potrzebne.

2:36Tutaj jest jeszcze uniknął treningu.

2:38Czyli zakres znaków Unicode czyli tego

2:42tutaj wszystkie nasze literki to są znaki Unicode i to definiuje które

2:48znaki są przez te found pokryte czyli które elementy zostaną zmienione.

2:55No i zasada jest taka że jeżeli chociaż

2:57jeden element z tego przedziału zostanie użyty na naszej stronie internetowej wtedy

3:04telefon się ładuje dynamicznie to nie będzie się nadawało dynamicznie.

3:08Jeżeli na przykład pozbyli byśmy się tutaj tej sekcji z językiem polskim gdzie mamy

3:13faktycznie Latin extended czyli nasze polskie znaki są pokrywane przez dodatkowy

3:19front Faith No jeżeli się go pozbędziemy to on faktycznie się nie załamuje.

3:23Na naszej stronie internetowej.

3:25I koniec końców faktycznie będziemy mieli

3:28szybsze ładowanie się stron ponieważ jest mniej ładowane kontentu.

3:33No i oczywiście możemy też.

3:35Użyć Short Hebda aby zaatakować.

3:39Naszego funta którego za deklarowali byśmy

3:42przy pomocy Andreasa bo sam jakby nic nam nie daje musimy jawnie

3:47powiedzieć na których elementach ta czcionka ma zostać użyta.

3:53No i możemy to oczywiście zrobić.

3:55Short endem czyli tutaj mamy hit.

3:57Dla fanów miejsca found świata found spisu.

4:01No i tutaj jest front familii fall back to sens serii zawsze

4:05moglibyśmy to też oczywiście pojedynczo deklarować poprzez front familii.

4:11Found Water. Fot.

4:14FIS.

4:17Itd itd.

4:18Więc to co tutaj chciałbym powiedzieć o

4:21funtach to przede wszystkim możemy jeszcze robić różne inne rzeczy np.

4:26dodawać nasze funty.

4:28Z tym że z oddawaniem też.

4:32Trzeba być ostrożnym ponieważ jeżeli rząd

4:34waży za dużo wtedy będzie wprowadzał w nasze strony internetowe ponieważ będzie

4:39czekał aż ten rząd się dowiaduje a dopiero później wyświetlić cokolwiek na stronie.

4:44No i generalnie chciałbym abyście unikali

4:48frontów czyli takiego klasycznego sprzed powiedzmy

4:52pięciu może trochę więcej lat gdzie ikonki są ładowane jako znaki Unicode.

4:58I faktycznie.

5:00Używamy.

5:02Ikon jako tekstu który jest stylowe.

5:05To ma swoje powody.

5:08Oczywiście z kontekstu dostępności jak i po prostu już Experience ogólnego.

5:12A jeśli chodzi o dalszą optymalizację importowanych frontów czy innych

5:16generalnie aspektów no to myślę że to zasługuje na swój osobny kurs

5:20natomiast jeszcze niektóre właściwości CSS owe które mogą przyspieszyć ładowanie

5:25naszych treści omówione w dalszych częściach kursu.