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.
Maar we gaan ook een heleboel andere eigenschappen die gerelateerd zijn aan lettertypen en naar tekst te dekken.
En dat zijn lettertype tekstformaat gewichtslijn hoogte tekst een lijn en tekst decoratie.
Dus in deze video gaan we om te stoppen en hebben betrekking op al die.
En het eerste wat we gaan doen is onze eenvoudige tekst up die we gaan stijl.
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.
Dus ik ga gewoon een H-1 doen, zodat we een header en stijl kunnen zien.
En vervolgens een aantal paragrafen.
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.
Ik ga een Lorem Epsom generator te gebruiken.
Dus voor degenen onder u die niet weten Lorem Ipsum generators worden gebruikt om een ​​aantal willekeurige tekst die Engels woorden te genereren.
Het betekent niet dat helemaal niets, maar in ieder geval ziet eruit als echte woorden.
Zo is het placeholder tekst.
Dus ik heb het wel grappig artikel geopend van 10 van de beste of de meest hilarische Lorem Ipsum generator voor webdesigners.
En ik ga gewoon om te gaan met deze eerste bacon ipsum, dus ik ga een paar alinea's hier te genereren.
Snel.
Geef me spek en je ziet het gewoon geef me wat tekst.
Maar dit is echt tekst die eigenlijk lijkt op een potentiële je iets wat je op een website zou moeten weten.
Het ziet er niet alleen jibberish als dit.
Dus het is een betere vertegenwoordiging van een lettertype.
Dus ik ga om verder te gaan en plak deze in.
Ik ga twee alinea's te maken van dit.
Okee.
En we zullen het bij laten voor nu en we zullen terugkomen en voeg een beetje later.
Laten we dit gewoon open te stellen en te zien wat we hebben.
OK.
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.
En voordat we kunnen zelfs doen dat we moeten praten over wat font we hebben zelfs voor ons beschikbaar in de browser.
Dus er is geen eenvoudig antwoord op de vraag die een computer heeft lettertypen beschikbaar zijn in de browser.
En dat komt omdat ze anders op elke machine.
En ik heb deze site te openen hier.
Ze zegt fonts stapelen.
Dat toont eigenlijk afhankelijk van als je op een Mac of Windows.
Wat is het percentage van die machines zijn dat een bepaald lettertype.
En dus deze zijn gewoon een soort van de standaard web fonts dat we zullen zien een groot deel van de tijd.
Dus als we kijken naar een zoals Helvetica kun je zien dat elke Mac heeft Amerika, maar zeer weinig ramen hebt geïnstalleerd.
En dus deze zijn het systeem fonts die komen op een machine.
Dit zijn dus niet de enige lettertypen die u kunt gebruiken, maar dit zijn enkele die veiliger weddenschappen zijn.
Dus als je wilde men dat hij zeker wist zou werken op elke machine die u zou halen, zoals Arial zwart of antenne.
Het is duidelijk dat deze lettertypen zijn echter vrij beperkt.
Dus we gaan om te zien hoe we eigenlijk bevatten aangepaste lettertypen later in deze video.
Maar voor nu laten we gewoon kies een van deze.
Dus laten we gaan met Ariel Sharon Ariel.
Zo te gebruiken dat we gaan toewijzen dat onze leden hier.
Dus we gaan in mijn C S S, die ik hier heb gekoppeld om te gaan.
Stijlen die C S S en de eigendom van de lettertype familie wordt genoemd.
Dus ik ga naar de punten te kiezen en ik ga zeggen lettertype Arial is net als dat.
En als ik vernieuw je ziet heb ik nu het lettertype Arial hier.
Een kort bericht Ik kan ook aanhalingstekens zetten rond dit die volledig geldig.
Soms moet je om dit te doen als u een lettertype dat een nummer aan het begin heeft te hebben.
Niet dat dit een echte lettertype, maar als dat ik zou moeten aanhalingstekens omheen zetten, want dit is geen geldige CSSA lijn.
OK, dus ik kan geven Aeriel als dat en je kunt zien we Aeriel.
Dus er zijn andere lettertypen kunt u rond te spelen.
Laten we proberen Georgië.
Dus laten we onze H-1 Georgia zomaar refresh.
En je kunt zien verandert lettertype dus niet wanhopen als je een ontwerper bent.
We gaan om te zien hoe je een stuk meer fonts te gebruiken en hoe u aangepaste degenen omvatten.
Maar voor nu zijn we gewoon gaan richten op het ingebouwde systeem standaard fonts die een beetje beperkt zijn.
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.
Dus we kunnen er iets te kiezen en laten we het doen om onze H-1 en laten we ieder een stuk groter.
Dus we doen lettergrootte en er zijn verschillende eenheden die we kunnen gebruiken.
En de eerste is pixels of pieken geroepen en we hebben het gezien een beetje eerder met Forder.
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.
Als je wilt spelen met lettergroottes u niet zeker weet hoe groot je wilt dat dit zijn.
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.
Dus dat is echt een leuke functie wanneer u rond aan het spelen bent met lettergroottes.
Dus zoals ik al zei al is dit niet de enige manier om het kiezen van een lettertype.
Het is niet de enige eenheid.
Er is nog een populaire unit genaamd IEM's en E-M is in feite een relatieve lettergrootte.
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.
Dus wat dat werkelijk betekent is dat ik ga je een snelle voorbeeld.
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.
Dit is waarschijnlijk de eerste keer dat ze te zien.
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.
Maar als ik te vernieuwen.
Er verandert niets at all.
Nou, de zoektocht naar de lettergrootte, maar niets verandert hier zitten en waar ik deze overspanning.
Dus het is een manier om te markeren of om enkel uit een aantal lijn en vervolgens iets te doen aan het.
En we gaan gewoon om het een stuk groter te maken.
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.
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.
Dus je zult dat hier te zien of ik hernieuwen overspanning is het dubbele van de lettergrootte van dit.
Maar we hebben niet echt expliciet vertellen hoeveel pixels te maken.
Hij wist precies hoe groot dit was en dan verdubbeld.
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.
Dus laat ik je een ander voorbeeld.
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.
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.
Want we kunnen niet gewoon blijven erft van een ouder en ouder heeft er enige bron van waarheid zijn.
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.
Maar volgens SDN is het meestal ongeveer 16 pixels, dus dat is geen garantie, maar het is meestal rond de 16 pixels.
Dus wat de meeste mensen zouden doen, is een lettergrootte op het lichaam aan het begin.
Dus zoiets als dit lichaam lettergrootte.
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.
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.
Dus 2,0 E-M.
En dan tenslotte willen we onze overspanning tweemaal zo groot als een paragraaf zijn.
Dus dat is ook 2.0, omdat niet vergeten dat het binnen genesteld.
Dus laten we wat tekst doen buiten een paragraaf net als dat en je zult zien dat het vrij klein.
En dan hebben we dit vijf keer groter dan dit.
We hebben deze twee keer zo groot.