1 00:00:01,020 --> 00:00:09,880 Więc ten film ma zamiar skupić się na czcionek w sukces i oczywiście zabawę i zbieranie czcionek dla strony internetowej jest naprawdę bardzo ważne. 2 00:00:10,110 --> 00:00:14,660 Ale mamy też zamiar pokryć wiele innych właściwości, które są związane z czcionkami i tekst. 3 00:00:14,730 --> 00:00:23,470 A to są czcionki rodziny wysokość linii masa rozmiar czcionki tekstu linia i tekst dekoracji. 4 00:00:23,610 --> 00:00:26,530 Więc w tym filmie mamy zamiar zatrzymać się i obejmować wszystkie z nich. 5 00:00:26,730 --> 00:00:32,670 A pierwszą rzeczą, mamy zamiar zrobić, to nasze proste teksty, które mamy zamiar stylu. 6 00:00:33,030 --> 00:00:39,080 Więc mam proste Funk, która jest Jim M-file i mam zamiar iść do przodu i włożyć w ustach. 7 00:00:39,080 --> 00:00:42,660 Więc jestem po prostu zamiar zrobić H-1, dzięki czemu możemy zobaczyć nagłówek i styl. 8 00:00:42,750 --> 00:00:44,180 A potem niektóre akapity. 9 00:00:44,490 --> 00:00:59,580 Więc jestem po prostu zadzwonić stronę demonstracyjną tej czcionki, a potem następną rzeczą, zamiast po prostu wpisując jakieś losowe słowa lub jakąś jibberish takiego, które w rzeczywistości naprawdę nie odzwierciedla tego, co język angielski wygląda na stronie. 10 00:00:59,620 --> 00:01:02,610 Zamierzam użyć generator Lorem Epsom. 11 00:01:02,610 --> 00:01:09,980 Więc dla tych z Was, którzy nie wiedzą, generatory Lorem Ipsum są wykorzystywane do generowania kilka losowo wybranym tekstem, który jest angielskie słowa. 12 00:01:09,990 --> 00:01:13,550 To nic nie znaczy w ogóle, ale to przynajmniej wygląda jak prawdziwe słowa. 13 00:01:13,560 --> 00:01:15,570 Tak to jest tekst zastępczy. 14 00:01:16,110 --> 00:01:24,350 Więc mam to niby zabawny artykuł otwarta z 10 najlepszych i najbardziej zabawne Generator Lorem Ipsum dla projektantów stron internetowych. 15 00:01:24,570 --> 00:01:31,090 A ja po prostu się iść z tym pierwszym jeden boczek ipsum więc mam zamiar wygenerować kilka akapitów tutaj. 16 00:01:31,560 --> 00:01:31,910 Szybki. 17 00:01:31,920 --> 00:01:34,370 Daj mi boczek i widać, że po prostu dać mi jakiś tekst. 18 00:01:34,470 --> 00:01:41,670 Ale to jest prawdziwy tekst, który faktycznie wygląda potencjale wiesz coś będzie trzeba na stronie internetowej. 19 00:01:41,700 --> 00:01:43,430 To nie wygląda jak tylko jibberish takiego. 20 00:01:43,440 --> 00:01:45,890 Więc jest to lepsze reprezentowanie czcionki. 21 00:01:46,110 --> 00:01:48,010 Więc mam zamiar iść do przodu i wklej że. 22 00:01:48,120 --> 00:01:52,100 Mam zamiar zrobić dwa akapity z tego. 23 00:01:54,140 --> 00:01:54,570 W porządku. 24 00:01:54,570 --> 00:01:59,510 I zostawimy go na tym teraz i wrócimy i dodać trochę później. 25 00:01:59,670 --> 00:02:02,580 Załóżmy, wystarczy otworzyć ten się i zobaczyć, co mamy. 26 00:02:03,300 --> 00:02:03,720 OK. 27 00:02:03,750 --> 00:02:11,840 Więc tutaj jest miejsce, które mamy zamiar być stylistyka i pierwszą rzeczą, którą chcemy zrobić, to porozmawiać o tym, jak mamy właściwie tylko przypisać czcionkę do niczego. 28 00:02:12,180 --> 00:02:18,510 I zanim jeszcze możemy zrobić, musimy mówić o tym, co czcionki mamy nawet dla nas dostępne w przeglądarce. 29 00:02:18,510 --> 00:02:23,370 Więc nie ma łatwej odpowiedzi, co do których komputer ma czcionek dostępnych w przeglądarce. 30 00:02:23,550 --> 00:02:26,420 A to dlatego, że są różne na każdej maszynie. 31 00:02:26,670 --> 00:02:28,360 I mam ta strona otworzy tutaj. 32 00:02:28,640 --> 00:02:30,070 Mówi czcionek stos. 33 00:02:30,270 --> 00:02:34,250 To rzeczywiście pokazuje zależności od tego czy jesteś na komputerze Mac lub Windows. 34 00:02:34,350 --> 00:02:38,280 Jaki jest odsetek tych maszyn jest to, że mają daną czcionkę. 35 00:02:38,670 --> 00:02:42,820 I tak to tylko rodzaj standardowych czcionek internetowych, że zobaczymy dużo czasu. 36 00:02:42,840 --> 00:02:52,130 Więc jeśli spojrzymy na jeden jak Helvetica widać, że każdy Mac ma Amerykę, ale niewiele okien zostały zainstalowane. 37 00:02:52,290 --> 00:02:55,430 I tak oto czcionki systemowe, które przychodzą na maszynie. 38 00:02:55,950 --> 00:03:00,650 Więc to nie są tylko czcionki, które można wykorzystać, ale są pewne, że są bezpieczniejsze zakłady. 39 00:03:00,660 --> 00:03:07,590 Więc jeśli chcesz taki, który wiedział, że na pewno będzie działać na każdym komputerze byś wybrał jak Arial czarne lub anteny. 40 00:03:08,160 --> 00:03:10,310 Oczywiście te czcionki choć są dość ograniczone. 41 00:03:10,350 --> 00:03:14,030 Więc mamy zamiar zobaczyć, jak faktycznie to niestandardowych czcionek w dalszej części tego filmu. 42 00:03:14,130 --> 00:03:16,230 Ale teraz niech po prostu wybrać jeden z nich. 43 00:03:16,260 --> 00:03:19,750 Więc chodźmy Ariel Sharon Ariel. 44 00:03:20,010 --> 00:03:24,720 Więc w obsłudze, że będziemy tutaj przypisać do naszych ust. 45 00:03:25,370 --> 00:03:27,700 Więc mamy zamiar udać się do mojego C S, które mam połączonego tutaj. 46 00:03:27,720 --> 00:03:31,840 Styl, że C S a właściwość nazywana jest rodzina czcionek. 47 00:03:32,040 --> 00:03:40,820 Więc mam zamiar wybrać paragrafy i mam zamiar powiedzieć rodziny czcionek Arial tak po prostu. 48 00:03:41,060 --> 00:03:46,390 A gdybym odświeżyć zobaczysz Mam teraz czcionka Arial tutaj. 49 00:03:46,410 --> 00:03:51,830 Jedna krótka notatka mogę również umieścić cudzysłowy wokół tego, który jest całkowicie poprawny. 50 00:03:51,840 --> 00:03:57,200 Czasami będziesz musiał to zrobić, jeśli masz czcionki, która ma wiele na początku. 51 00:03:57,200 --> 00:04:04,360 Nie dlatego, że jest to prawdziwy czcionki, ale czy to musiałbym umieścić w cudzysłowie, bo to nie jest ważna linia CSSA. 52 00:04:04,830 --> 00:04:10,660 OK, więc mogę dać to Aeriel tak i widać mamy Aeriel. 53 00:04:10,830 --> 00:04:12,970 Tak więc istnieją inne czcionki można pobawić się. 54 00:04:12,990 --> 00:04:16,340 Spróbujmy Georgia. 55 00:04:16,800 --> 00:04:28,520 Więc dajmy naszą H-1, podobnie jak Gruzja tym odświeżaniu. 56 00:04:28,860 --> 00:04:33,100 I widać to zmienia czcionkę więc nie rozpaczaj, jeśli jesteś projektantem. 57 00:04:33,120 --> 00:04:36,810 Jedziemy, aby zobaczyć, jak używać dużo więcej czcionek i jak to niestandardowe nich. 58 00:04:37,110 --> 00:04:42,500 Ale teraz jesteśmy po prostu zamiar skupić się na wbudowanych czcionek domyślnych systemu, które są nieco ograniczone. 59 00:04:42,600 --> 00:05:00,990 I nawet wtedy nie ma gwarancji, jak widać nie jest jakaś, że 100 procent maszyn mają więc następnym nieruchomość chcę rozmawiać o to rozmiar czcionki tak czcionki robi rodzaju brzmi jak kontroluje jak duża czcionka jest lub jak małe czcionki dla danego elementu. 60 00:05:01,240 --> 00:05:07,230 Możemy więc wybrać coś i zróbmy to do naszego H-1 i zróbmy każdy z nich o wiele większe. 61 00:05:07,590 --> 00:05:12,460 Więc mamy rozmiar czcionki i istnieją różne jednostki, które możemy wykorzystać. 62 00:05:12,450 --> 00:05:18,170 I pierwsza nazywa pikseli lub szczytów i widzieliśmy go trochę wcześniej z Forder. 63 00:05:18,330 --> 00:05:31,740 Więc będziemy po prostu dać mu coś ogromnego jak 200 fotki i jeśli wrócimy do przeglądarki można sprawdzić, czy mamy tego gigantycznego FUN 200 pikseli, co możemy zrobić na wszelki wypadek. 64 00:05:31,750 --> 00:05:35,640 Jeśli chcesz się bawić z rozmiarów czcionki nie jesteś pewien, jak duży chcesz to mieć. 65 00:05:35,680 --> 00:05:57,010 Możemy zapoznać się z nim, a potem możemy iść tu i możemy kliknąć na ten temat i możemy zmienić ten numer, dzięki czemu możemy go zmienić na 100 lub 60 lub 85 lub co chcemy i możemy bawić się w przeglądarce i po prostu go zobaczyć zmiana odbija się natychmiast. 66 00:05:57,270 --> 00:06:01,570 Więc to jest naprawdę ładne cechą kiedy grasz wokół z rozmiarów czcionek. 67 00:06:01,560 --> 00:06:06,310 Tak jak już wspomniałem, choć nie jest to jedyny sposób na wybranie rozmiaru czcionki. 68 00:06:06,450 --> 00:06:07,650 To nie jedyna jednostka. 69 00:06:07,900 --> 00:06:15,730 Jest inna popularna jednostka zwana iems i E-M jest w zasadzie względnej wielkości czcionki. 70 00:06:15,840 --> 00:06:33,500 Więc mam zamiar iść do przodu i otworzyć MD rozmiar czcionki i stronę i przejdź do sekcji EM i mam zamiar przeczytać tutaj na chwilę wielkość wartości EM jest dynamiczna i EM jest równa wielkość czcionki, która ma zastosowanie do nadrzędnego elementu, o którym mowa. 71 00:06:33,880 --> 00:06:36,900 Więc, co to naprawdę oznacza to mam zamiar pokazać wam krótki przykład. 72 00:06:37,320 --> 00:06:48,120 Jeśli mogę umieścić Chodźmy wewnątrz tutaj pod taśmy stek Zamierzam umieścić element w całej rozpiętości, że rozpiętość robi. 73 00:06:48,120 --> 00:06:50,300 Prawdopodobnie jest to nasz pierwszy raz je zobaczyć. 74 00:06:50,380 --> 00:07:01,050 Czy to tylko sposób na tekście zgrupowanie bez faktycznie czyni różnicę wizualnie tak, że to tylko sposób na rodzaj dokonać element wokół stek taśmy słowem. 75 00:07:01,050 --> 00:07:03,470 Ale gdybym odświeżyć. 76 00:07:03,510 --> 00:07:04,710 Nic się nie zmienia w ogóle. 77 00:07:04,750 --> 00:07:09,230 Dobrze poszukiwanie rozmiaru czcionki, ale nic nie zmienia się tu i gdzie mam ten przedział. 78 00:07:09,780 --> 00:07:13,540 Więc jest to sposób, aby podkreślić lub wyróżnić kilka linii, a następnie zrobić coś do niego. 79 00:07:13,550 --> 00:07:15,620 A my po prostu będzie to dużo większy. 80 00:07:16,020 --> 00:07:26,380 Więc używamy e-M lub używamy jednostek e-M i my, jeśli chcemy, aby ten podwójny rozmiar czcionki niniejszego ustępu po prostu przejść się tutaj. 81 00:07:26,520 --> 00:07:41,940 Warto więc rozciągać, a potem po prostu powiedzieć, rozmiar czcionki 2.0 E-M i tak, że będzie dwukrotnie rozmiar czcionki elementu otaczającego elementu dominującego niniejszym ustępie. 82 00:07:41,940 --> 00:07:49,220 Więc widać, że tutaj, gdybym odświeżyć ten okres jest dwukrotnie rozmiar czcionki o tym. 83 00:07:49,240 --> 00:07:53,170 Ale faktycznie nie wyraźnie powiedzieć to, ile pikseli to zrobić. 84 00:07:53,160 --> 00:07:56,430 To po prostu wiedział, jak wielkie to było, a potem podwoiła się. 85 00:07:56,440 --> 00:08:05,930 Więc to jest dynamiczna, dlatego wiele osób, jak to jest, że jeśli z jakiegoś powodu musiałem zmienić rozmiar czcionki tego byłoby to automatycznie zmieni. 86 00:08:06,190 --> 00:08:08,320 Więc pozwól mi pokazać inny przykład. 87 00:08:08,460 --> 00:08:27,140 Załóżmy zwiększyć rozmiar czcionki akapitu i rozmiaru czcionki zróbmy je 40 pikseli i widać, że ten wciąż pozostaje podwójnie. 88 00:08:27,150 --> 00:08:33,500 Więc wtedy jedno pytanie na temat e-M, która pojawia się dużo, co jest wartość początkowa v, a co jest na najwyższym poziomie. 89 00:08:33,580 --> 00:08:38,860 Ponieważ nie możemy po prostu zachować dziedziczenie z rodzica i że rodzic nie musi być jakieś źródło prawdy. 90 00:08:38,860 --> 00:08:48,580 Musi być jak na elemencie poziomu samej górze, że faktycznie ma rozmiar czcionki i że faktycznie zmienia się w zależności od przeglądarki, która jest trochę frustrujące. 91 00:08:49,050 --> 00:08:56,060 Ale według SDN to zazwyczaj około 16 pikseli, dzięki czemu ma gwarancji, ale jest to zwykle około 16 pikseli. 92 00:08:56,160 --> 00:09:01,680 Więc to, co większość ludzi zrobić, to ustawić rozmiar czcionki na organizm już na samym początku. 93 00:09:01,950 --> 00:09:07,960 Więc coś w tym rozmiarze czcionki ciała. 94 00:09:08,220 --> 00:09:23,560 I dajmy to zróbmy coś naprawdę mały, aby rozpocząć jak 10 pikseli, a następnie musi zmienić lub każdy z nich tak, że jest pięć razy większy niż ciało. 95 00:09:23,620 --> 00:09:31,090 Więc to będzie wyglądać pięć porno E-M, a potem idziemy na naszej ustępie być dwukrotnie większa od ciała. 96 00:09:31,120 --> 00:09:33,000 Więc 2.0 E-M. 97 00:09:33,180 --> 00:09:37,230 A potem wreszcie chcemy, aby nasza rozpiętość być dwukrotnie większa od akapitu. 98 00:09:37,360 --> 00:09:40,810 Więc to też 2.0, bo pamiętam to zagnieżdżona. 99 00:09:41,080 --> 00:09:46,710 Więc zróbmy jakiś tekst poza akapitu, tak jak to, a zobaczysz, że to całkiem małe. 100 00:09:47,010 --> 00:09:50,080 A potem zrobiliśmy to pięć razy większy niż ten. 101 00:09:50,160 --> 00:09:51,820 Zrobiliśmy to dwa razy większy.