Quindi questo video si concentrerà sui caratteri in caso di successo e ovviamente divertirsi e scegliere i caratteri per
una pagina Web è davvero molto importante.
Ma copriremo anche molte altre proprietà correlate ai caratteri e al testo.
E quelli sono font famiglia font size font weight line height text una linea e una decorazione di testo.
Quindi in questo video ci fermeremo e copriremo tutti quelli.
E la prima cosa che faremo è ottenere il nostro semplice testo che stiamo andando a stile.
Quindi ho un semplice Funk che è Jim M-file e ho intenzione di andare avanti e aggiungere in bocca.
Quindi farò un H-1 in modo che possiamo vedere un'intestazione e uno stile.
E poi alcuni paragrafi.
Quindi chiamerò la pagina demo di questo font e quindi la prossima cosa invece di digitare solo alcune parole
casuali o un po 'jibberish come questo che in realtà non riflette realmente l'aspetto della
lingua inglese in una pagina.
Userò un generatore Lorem Epsom.
Quindi per quelli di voi che non conoscono i generatori di Lorem Ipsum vengono utilizzati per generare un mucchio di testo casuale
che è in inglese.
Non significa niente, ma almeno sembra parole vere.
Quindi è il testo segnaposto.
Quindi ho una specie di divertente articolo di 10 tra i migliori o il più esilarante generatore di Lorem Ipsum per
i web designer.
E sto andando con questo primo bacon ipsum, quindi ho intenzione di generare alcuni paragrafi qui.
Presto.
Dammi del bacon e puoi vederlo solo dammi un po 'di testo.
Ma questo è un testo reale che in realtà sembra un potenziale che sai qualcosa che avresti su un
sito Web.
Non sembra solo ridicolo come questo.
Quindi è una rappresentazione migliore di un font.
Quindi ho intenzione di andare avanti e incollarlo.
Farò due paragrafi fuori da questo.
Tutto ok.
E lo lasceremo per ora e torneremo e aggiungeremo un po 'più tardi.
Apriamolo e vediamo cosa abbiamo.
OK.
Quindi, ecco un sito che stiamo per disegnare e la prima cosa che vogliamo fare è parlare di
come in realtà assegniamo semplicemente un font a qualsiasi cosa.
E prima ancora di poterlo fare, dobbiamo parlare di quale tipo di carattere abbiamo a nostra disposizione nel browser.
Quindi non c'è una risposta facile a quali tipi di carattere è disponibile un computer nel browser.
E questo perché sono diversi su ogni macchina.
E ho questo sito aperto qui.
Dice stack di caratteri.
Questo mostra in realtà se sei su un Mac o Windows.
Qual è la percentuale di quelle macchine che hanno un determinato font.
E quindi questi sono solo tipi di font web standard che vedremo molto spesso.
Quindi, se guardiamo uno come Helvetica, puoi vedere che ogni Mac ha l'America ma sono state installate pochissime
finestre.
E così questi sono i font di sistema che arrivano su una macchina.
Quindi questi non sono gli unici tipi di carattere che è possibile utilizzare, ma questi sono alcuni che sono le scommesse più sicure.
Quindi se ne volevi uno che sapeva per certo avrebbe funzionato su ogni macchina che avresti scelto
come Arial nero o aereo.
Ovviamente questi caratteri sono piuttosto limitati.
Quindi vedremo come in realtà includeremo font personalizzati più avanti in questo video.
Ma per ora selezioniamo uno di questi.
Quindi andiamo con Ariel Sharon Ariel.
Quindi, per utilizzarlo, lo assegneremo ai nostri paragrafi qui.
Quindi andremo nel mio C S S che ho collegato qui.
Gli stili che C S S e la proprietà sono chiamati famiglia di caratteri.
Quindi selezionerò i paragrafi e dirò che la famiglia di font è Arial proprio così.
E se aggiorno vedrai che ora ho un font Arial qui.
Una nota veloce posso anche mettere citazioni su questo che è totalmente valido.
A volte devi farlo se hai un font che ha un numero all'inizio.
Non che questo sia un vero font, ma se fosse così dovrei metterlo tra virgolette perché
questa non è una linea CSSA valida.
OK, quindi posso dargli un Aeriel in questo modo e puoi vedere che otteniamo Aeriel.
Quindi ci sono altri tipi di caratteri con cui puoi giocare.
Proviamo Georgia.
Diamo quindi alla
nostra H-1 Georgia proprio quel refresh.
E puoi vedere che cambia carattere quindi non disperare se sei un designer.
Vedremo come usare molti più font e come includere quelli personalizzati.
Ma per ora ci concentreremo solo sui font predefiniti di sistema integrati, che sono un po 'limitati.
E anche in questo caso non vi è alcuna garanzia in quanto si può vedere che non c'è nessun 100 percento di macchine in modo
che la proprietà successiva di cui voglio parlare sia la dimensione del carattere, quindi la dimensione del carattere fa un suono come controlla quanto
grande è il carattere o quanto piccolo il carattere è di un dato elemento.
Quindi possiamo selezionare qualcosa e facciamolo al nostro H-1 e facciamo ognuno molto più grande.
Quindi facciamo la dimensione del carattere e ci sono diverse unità che possiamo usare.
E il primo si chiama pixel o picchi e lo abbiamo visto un po 'prima con Forder.
Quindi ci limiteremo a dare qualcosa di enorme come 200 foto e se torneremo al browser, vedremo se
riusciremo a ottenere questo gigantesco divertente 200 pixel, cosa possiamo fare per ogni evenienza.
Se vuoi giocare con le dimensioni dei caratteri non sei sicuro di quanto grande vuoi che sia.
85 o
qualsiasi cosa vogliamo e possiamo giocare nel browser e vederlo il cambiamento si riflette immediatamente.
Possiamo ispezionarlo e quindi possiamo andare qui e possiamo cliccare su questo e possiamo cambiare questo numero in modo che possiamo cambiarlo
a 100 o 60 o
Questa è davvero una bella funzionalità quando stai giocando con le dimensioni dei caratteri.
Quindi, come ho detto, questo non è l'unico modo per scegliere una dimensione del font.
Non è l'unica unità.
C'è un'altra unità popolare chiamata IEMs ed E-M è fondamentalmente una dimensione relativa del carattere.
Quindi vado avanti e apro la dimensione del carattere M. di leggere da qui per un attimo la dimensione di un valore
EM è dinamico e EM è uguale alla dimensione del carattere che si applica al genitore dell'elemento in questione .
D e la pagina e andare alla sezione EM e ho intenzione
Quindi quello che significa veramente è che ti mostrerò un rapido esempio.
Se metto Andiamo dentro di qui sotto una striscia di bistecca, ho intenzione di mettere un elemento di span in tutto ciò che fa una
campata.
Questa è probabilmente la nostra prima volta a vederli.
È solo un modo per raggruppare il testo senza realmente fare una differenza visiva, quindi è solo un modo
per creare un elemento attorno alla parola striscia di bistecca.
Ma se mi rinfresco.
Niente cambia affatto.
Bene, la ricerca della dimensione del carattere, ma nulla cambia qui e dove ho questo intervallo.
Quindi è un modo per evidenziare o individuare una linea e poi fare qualcosa.
E lo renderemo molto più grande.
Quindi usiamo un E-M o usiamo le unità E-M e lo faremo se volessimo fare in modo che
questo raddoppi le dimensioni del font di questo paragrafo.
Quindi andiamo e quindi diciamo solo la dimensione del carattere 2. 0 E-M e così sarà la dimensione del carattere doppio dell'elemento che
racchiude l'elemento genitore che è questo paragrafo.
Quindi vedrai che qui, se aggiorno questo intervallo, raddoppio la dimensione del carattere di questo.
Ma in realtà non abbiamo detto esplicitamente quanti pixel farcela.
Sapeva solo quanto fosse grande e poi lo ha raddoppiato.
Quindi questo è dinamico ed è per questo che a molte persone piace che, se per qualche ragione
avessi bisogno di cambiare la dimensione del carattere, questo cambierebbe automaticamente.
Quindi lascia che ti mostri un altro esempio.
Aumentiamo la dimensione del carattere della dimensione
del carattere del paragrafo e facciamo 40 pixel e puoi vedere che questo rimane ancora doppio.
Quindi l'unica domanda su E-M che emerge molto è qual è il valore iniziale di v e qual è
il livello più alto.
Perché non possiamo continuare a ereditare da un genitore e quel genitore deve esserci una fonte di verità.
Ci deve essere come nell'elemento di livello più alto che in realtà ha una dimensione del carattere e che in realtà
cambia a seconda del browser che è un po 'frustrante.
Ma secondo SDN di solito è di circa 16 pixel, quindi non è garantito, ma di solito è di circa
16 pixel.
Quindi ciò che la maggior parte delle persone farebbe è impostare una dimensione del carattere sul corpo proprio all'inizio.
Quindi qualcosa come questa dimensione del carattere del corpo.
E facciamo un piccolo, facciamo qualcosa di veramente piccolo per iniziare come 10 pixel e poi dobbiamo
cambiare o ognuno in modo che sia cinque volte più grande del corpo.
Quindi assomiglierà a cinque porno E-M e poi andremo sul nostro paragrafo per essere due volte più grande
del corpo.
Quindi 2. 0 E-M.
E infine vogliamo che la nostra estensione sia grande il doppio di un paragrafo.
Quindi questo è anche 2. 0 perché ricorda che è annidato all'interno.
Quindi facciamo un testo al di fuori di un paragrafo proprio così e vedrai che è piuttosto piccolo.
E poi l'abbiamo fatto cinque volte più grande di questo.
L'abbiamo fatto due volte più grande.
E questo è due volte più grande del paragrafo