1 00:00:01,020 --> 00:00:09,880 Dus deze video gaat richten op lettertypen in het succes en natuurlijk plezier maken en het plukken van lettertypen voor een webpagina is echt heel belangrijk. 2 00:00:10,110 --> 00:00:14,660 Maar we gaan ook een heleboel andere eigenschappen die gerelateerd zijn aan lettertypen en naar tekst te dekken. 3 00:00:14,730 --> 00:00:23,470 En dat zijn lettertype tekstformaat gewichtslijn hoogte tekst een lijn en tekst decoratie. 4 00:00:23,610 --> 00:00:26,530 Dus in deze video gaan we om te stoppen en hebben betrekking op al die. 5 00:00:26,730 --> 00:00:32,670 En het eerste wat we gaan doen is onze eenvoudige tekst up die we gaan stijl. 6 00:00:33,030 --> 00:00:39,080 Dus ik heb een eenvoudige Funk dat is Jim M-file en ik ga om verder te gaan en toe te voegen in je mond. 7 00:00:39,080 --> 00:00:42,660 Dus ik ga gewoon een H-1 doen, zodat we een header en stijl kunnen zien. 8 00:00:42,750 --> 00:00:44,180 En vervolgens een aantal paragrafen. 9 00:00:44,490 --> 00:00:59,580 Dus ik ga gewoon van dit lettertype demo pagina en dan de volgende ding te bellen in plaats van alleen te typen enkele willekeurige woorden of een jibberish als deze, die eigenlijk niet echt weerspiegelen wat het Engels ziet eruit als op een pagina. 10 00:00:59,620 --> 00:01:02,610 Ik ga een Lorem Epsom generator te gebruiken. 11 00:01:02,610 --> 00:01:09,980 Dus voor degenen onder u die niet weten Lorem Ipsum generators worden gebruikt om een ​​aantal willekeurige tekst die Engels woorden te genereren. 12 00:01:09,990 --> 00:01:13,550 Het betekent niet dat helemaal niets, maar in ieder geval ziet eruit als echte woorden. 13 00:01:13,560 --> 00:01:15,570 Zo is het placeholder tekst. 14 00:01:16,110 --> 00:01:24,350 Dus ik heb het wel grappig artikel geopend van 10 van de beste of de meest hilarische Lorem Ipsum generator voor webdesigners. 15 00:01:24,570 --> 00:01:31,090 En ik ga gewoon om te gaan met deze eerste bacon ipsum, dus ik ga een paar alinea's hier te genereren. 16 00:01:31,560 --> 00:01:31,910 Snel. 17 00:01:31,920 --> 00:01:34,370 Geef me spek en je ziet het gewoon geef me wat tekst. 18 00:01:34,470 --> 00:01:41,670 Maar dit is echt tekst die eigenlijk lijkt op een potentiële je iets wat je op een website zou moeten weten. 19 00:01:41,700 --> 00:01:43,430 Het ziet er niet alleen jibberish als dit. 20 00:01:43,440 --> 00:01:45,890 Dus het is een betere vertegenwoordiging van een lettertype. 21 00:01:46,110 --> 00:01:48,010 Dus ik ga om verder te gaan en plak deze in. 22 00:01:48,120 --> 00:01:52,100 Ik ga twee alinea's te maken van dit. 23 00:01:54,140 --> 00:01:54,570 Okee. 24 00:01:54,570 --> 00:01:59,510 En we zullen het bij laten voor nu en we zullen terugkomen en voeg een beetje later. 25 00:01:59,670 --> 00:02:02,580 Laten we dit gewoon open te stellen en te zien wat we hebben. 26 00:02:03,300 --> 00:02:03,720 OK. 27 00:02:03,750 --> 00:02:11,840 Dus hier is een site die we gaan zijn styling en het eerste wat we willen doen is praten over hoe kunnen we eigenlijk gewoon een lettertype toewijzen aan alles. 28 00:02:12,180 --> 00:02:18,510 En voordat we kunnen zelfs doen dat we moeten praten over wat font we hebben zelfs voor ons beschikbaar in de browser. 29 00:02:18,510 --> 00:02:23,370 Dus er is geen eenvoudig antwoord op de vraag die een computer heeft lettertypen beschikbaar zijn in de browser. 30 00:02:23,550 --> 00:02:26,420 En dat komt omdat ze anders op elke machine. 31 00:02:26,670 --> 00:02:28,360 En ik heb deze site te openen hier. 32 00:02:28,640 --> 00:02:30,070 Ze zegt fonts stapelen. 33 00:02:30,270 --> 00:02:34,250 Dat toont eigenlijk afhankelijk van als je op een Mac of Windows. 34 00:02:34,350 --> 00:02:38,280 Wat is het percentage van die machines zijn dat een bepaald lettertype. 35 00:02:38,670 --> 00:02:42,820 En dus deze zijn gewoon een soort van de standaard web fonts dat we zullen zien een groot deel van de tijd. 36 00:02:42,840 --> 00:02:52,130 Dus als we kijken naar een zoals Helvetica kun je zien dat elke Mac heeft Amerika, maar zeer weinig ramen hebt geïnstalleerd. 37 00:02:52,290 --> 00:02:55,430 En dus deze zijn het systeem fonts die komen op een machine. 38 00:02:55,950 --> 00:03:00,650 Dit zijn dus niet de enige lettertypen die u kunt gebruiken, maar dit zijn enkele die veiliger weddenschappen zijn. 39 00:03:00,660 --> 00:03:07,590 Dus als je wilde men dat hij zeker wist zou werken op elke machine die u zou halen, zoals Arial zwart of antenne. 40 00:03:08,160 --> 00:03:10,310 Het is duidelijk dat deze lettertypen zijn echter vrij beperkt. 41 00:03:10,350 --> 00:03:14,030 Dus we gaan om te zien hoe we eigenlijk bevatten aangepaste lettertypen later in deze video. 42 00:03:14,130 --> 00:03:16,230 Maar voor nu laten we gewoon kies een van deze. 43 00:03:16,260 --> 00:03:19,750 Dus laten we gaan met Ariel Sharon Ariel. 44 00:03:20,010 --> 00:03:24,720 Zo te gebruiken dat we gaan toewijzen dat onze leden hier. 45 00:03:25,370 --> 00:03:27,700 Dus we gaan in mijn C S S, die ik hier heb gekoppeld om te gaan. 46 00:03:27,720 --> 00:03:31,840 Stijlen die C S S en de eigendom van de lettertype familie wordt genoemd. 47 00:03:32,040 --> 00:03:40,820 Dus ik ga naar de punten te kiezen en ik ga zeggen lettertype Arial is net als dat. 48 00:03:41,060 --> 00:03:46,390 En als ik vernieuw je ziet heb ik nu het lettertype Arial hier. 49 00:03:46,410 --> 00:03:51,830 Een kort bericht Ik kan ook aanhalingstekens zetten rond dit die volledig geldig. 50 00:03:51,840 --> 00:03:57,200 Soms moet je om dit te doen als u een lettertype dat een nummer aan het begin heeft te hebben. 51 00:03:57,200 --> 00:04:04,360 Niet dat dit een echte lettertype, maar als dat ik zou moeten aanhalingstekens omheen zetten, want dit is geen geldige CSSA lijn. 52 00:04:04,830 --> 00:04:10,660 OK, dus ik kan geven Aeriel als dat en je kunt zien we Aeriel. 53 00:04:10,830 --> 00:04:12,970 Dus er zijn andere lettertypen kunt u rond te spelen. 54 00:04:12,990 --> 00:04:16,340 Laten we proberen Georgië. 55 00:04:16,800 --> 00:04:28,520 Dus laten we onze H-1 Georgia zomaar refresh. 56 00:04:28,860 --> 00:04:33,100 En je kunt zien verandert lettertype dus niet wanhopen als je een ontwerper bent. 57 00:04:33,120 --> 00:04:36,810 We gaan om te zien hoe je een stuk meer fonts te gebruiken en hoe u aangepaste degenen omvatten. 58 00:04:37,110 --> 00:04:42,500 Maar voor nu zijn we gewoon gaan richten op het ingebouwde systeem standaard fonts die een beetje beperkt zijn. 59 00:04:42,600 --> 00:05:00,990 En zelfs dan is er geen garantie zoals je kunt zien is er geen enkele die 100 procent van de machines hebben dus de volgende woning Ik wil praten over lettergrootte zo lettergrootte doet soort klinkt als het bepaalt hoe groot het lettertype is of hoe klein de lettertype is van een bepaald element. 60 00:05:01,240 --> 00:05:07,230 Dus we kunnen er iets te kiezen en laten we het doen om onze H-1 en laten we ieder een stuk groter. 61 00:05:07,590 --> 00:05:12,460 Dus we doen lettergrootte en er zijn verschillende eenheden die we kunnen gebruiken. 62 00:05:12,450 --> 00:05:18,170 En de eerste is pixels of pieken geroepen en we hebben het gezien een beetje eerder met Forder. 63 00:05:18,330 --> 00:05:31,740 Dus we gaan gewoon iets groots als 200 foto's geven en als we terug naar de browser te gaan kun je zien of we dit gigantische fun 200 pixels wat we kunnen doen voor het geval dat. 64 00:05:31,750 --> 00:05:35,640 Als je wilt spelen met lettergroottes u niet zeker weet hoe groot je wilt dat dit zijn. 65 00:05:35,680 --> 00:05:57,010 We kunnen het inspecteren en dan kunnen we hier gaan en kunnen we op deze klikken en kunnen we dit nummer te veranderen, zodat we het kunnen veranderen in 100 of 60 of 85 of wat we willen en we kunnen rond spelen in de browser en zie het gewoon de wijziging direct weergegeven. 66 00:05:57,270 --> 00:06:01,570 Dus dat is echt een leuke functie wanneer u rond aan het spelen bent met lettergroottes. 67 00:06:01,560 --> 00:06:06,310 Dus zoals ik al zei al is dit niet de enige manier om het kiezen van een lettertype. 68 00:06:06,450 --> 00:06:07,650 Het is niet de enige eenheid. 69 00:06:07,900 --> 00:06:15,730 Er is nog een populaire unit genaamd IEM's en E-M is in feite een relatieve lettergrootte. 70 00:06:15,840 --> 00:06:33,500 Dus ik ga om te gaan en het openstellen van de lettergrootte MD en de pagina en ga naar de sectie EM en ik ga om te lezen van hier voor slechts een moment dat de grootte van een EM waarde is dynamisch en EM is gelijk aan de grootte van het lettertype dat van toepassing is op de ouder van het element in kwestie. 71 00:06:33,880 --> 00:06:36,900 Dus wat dat werkelijk betekent is dat ik ga je een snelle voorbeeld. 72 00:06:37,320 --> 00:06:48,120 Als ik Laten we naar binnen gaan van de hier onder strip steak ik ga een overspanning element in alles wat een overspanning doet zetten. 73 00:06:48,120 --> 00:06:50,300 Dit is waarschijnlijk de eerste keer dat ze te zien. 74 00:06:50,380 --> 00:07:01,050 Is het gewoon een manier om de groep bij elkaar tekst zonder daadwerkelijk een verschil maken visueel dus het is gewoon een manier om een ​​element rond het woord strip steak soort te maken. 75 00:07:01,050 --> 00:07:03,470 Maar als ik te vernieuwen. 76 00:07:03,510 --> 00:07:04,710 Er verandert niets at all. 77 00:07:04,750 --> 00:07:09,230 Nou, de zoektocht naar de lettergrootte, maar niets verandert hier zitten en waar ik deze overspanning. 78 00:07:09,780 --> 00:07:13,540 Dus het is een manier om te markeren of om enkel uit een aantal lijn en vervolgens iets te doen aan het. 79 00:07:13,550 --> 00:07:15,620 En we gaan gewoon om het een stuk groter te maken. 80 00:07:16,020 --> 00:07:26,380 Dus maken we gebruik van een E-M of we gebruik maken van de E-M units en we zijn als we wilden dit het dubbele van de grootte van het lettertype van deze paragraaf gaan we gewoon naar hier te maken. 81 00:07:26,520 --> 00:07:41,940 Dus laten we overspannen en dan zeggen we gewoon lettergrootte 2.0 E-M en zo die gaat om het dubbele van de lettergrootte van de omsluitende element van het bovenliggende element dat deze paragraaf zijn. 82 00:07:41,940 --> 00:07:49,220 Dus je zult dat hier te zien of ik hernieuwen overspanning is het dubbele van de lettergrootte van dit. 83 00:07:49,240 --> 00:07:53,170 Maar we hebben niet echt expliciet vertellen hoeveel pixels te maken. 84 00:07:53,160 --> 00:07:56,430 Hij wist precies hoe groot dit was en dan verdubbeld. 85 00:07:56,440 --> 00:08:05,930 Dus dit is dynamisch dat is de reden waarom veel mensen het leuk vinden, is dat als een of andere reden dat ik die nodig zijn om de lettergrootte van deze verandering zou dit automatisch gewijzigd. 86 00:08:06,190 --> 00:08:08,320 Dus laat ik je een ander voorbeeld. 87 00:08:08,460 --> 00:08:27,140 Laten we de lettergrootte van lettergrootte paragraaf te vergroten en laten we maken ze 40 pixels en je kunt zien dat dit nog steeds blijft dubbel. 88 00:08:27,150 --> 00:08:33,500 Dus dan is het een vraag over E-M, dat komt heel veel is wat is de initiële waarde van v en wat is het hoogste niveau. 89 00:08:33,580 --> 00:08:38,860 Want we kunnen niet gewoon blijven erft van een ouder en ouder heeft er enige bron van waarheid zijn. 90 00:08:38,860 --> 00:08:48,580 Er moet zijn als aan de top level element dat eigenlijk een lettergrootte en die daadwerkelijk verandert, afhankelijk van de browser die een beetje frustrerend. 91 00:08:49,050 --> 00:08:56,060 Maar volgens SDN is het meestal ongeveer 16 pixels, dus dat is geen garantie, maar het is meestal rond de 16 pixels. 92 00:08:56,160 --> 00:09:01,680 Dus wat de meeste mensen zouden doen, is een lettergrootte op het lichaam aan het begin. 93 00:09:01,950 --> 00:09:07,960 Dus zoiets als dit lichaam lettergrootte. 94 00:09:08,220 --> 00:09:23,560 En laten we het eens te laten we iets heel klein te beginnen als 10 pixels te doen en dan moeten veranderen of elke één, zodat het is vijf keer groter dan het lichaam. 95 00:09:23,620 --> 00:09:31,090 Dus dat gaat om te kijken als vijf porno E-M en dan gaan we op onze paragraaf twee keer zo groot als het lichaam. 96 00:09:31,120 --> 00:09:33,000 Dus 2,0 E-M. 97 00:09:33,180 --> 00:09:37,230 En dan tenslotte willen we onze overspanning tweemaal zo groot als een paragraaf zijn. 98 00:09:37,360 --> 00:09:40,810 Dus dat is ook 2.0, omdat niet vergeten dat het binnen genesteld. 99 00:09:41,080 --> 00:09:46,710 Dus laten we wat tekst doen buiten een paragraaf net als dat en je zult zien dat het vrij klein. 100 00:09:47,010 --> 00:09:50,080 En dan hebben we dit vijf keer groter dan dit. 101 00:09:50,160 --> 00:09:51,820 We hebben deze twee keer zo groot.