1
00:00:01,020 --> 00:00:07,590
Quindi questo video si concentrerà sui caratteri in caso di successo e ovviamente divertirsi e scegliere i caratteri per

2
00:00:07,580 --> 00:00:09,880
una pagina Web è davvero molto importante.

3
00:00:10,110 --> 00:00:14,660
Ma copriremo anche molte altre proprietà correlate ai caratteri e al testo.

4
00:00:14,730 --> 00:00:23,470
E quelli sono font famiglia font size font weight line height text una linea e una decorazione di testo.

5
00:00:23,610 --> 00:00:26,530
Quindi in questo video ci fermeremo e copriremo tutti quelli.

6
00:00:26,730 --> 00:00:32,670
E la prima cosa che faremo è ottenere il nostro semplice testo che stiamo andando a stile.

7
00:00:33,030 --> 00:00:39,080
Quindi ho un semplice Funk che è Jim M-file e ho intenzione di andare avanti e aggiungere in bocca.

8
00:00:39,080 --> 00:00:42,660
Quindi farò un H-1 in modo che possiamo vedere un'intestazione e uno stile.

9
00:00:42,750 --> 00:00:44,180
E poi alcuni paragrafi.

10
00:00:44,490 --> 00:00:51,720
Quindi chiamerò la pagina demo di questo font e quindi la prossima cosa invece di digitare solo alcune parole

11
00:00:51,720 --> 00:00:57,450
casuali o un po 'jibberish come questo che in realtà non riflette realmente l'aspetto della

12
00:00:57,450 --> 00:00:59,580
lingua inglese in una pagina.

13
00:00:59,620 --> 00:01:02,610
Userò un generatore Lorem Epsom.

14
00:01:02,610 --> 00:01:08,640
Quindi per quelli di voi che non conoscono i generatori di Lorem Ipsum vengono utilizzati per generare un mucchio di testo casuale

15
00:01:08,730 --> 00:01:09,980
che è in inglese.

16
00:01:09,990 --> 00:01:13,550
Non significa niente, ma almeno sembra parole vere.

17
00:01:13,560 --> 00:01:15,570
Quindi è il testo segnaposto.

18
00:01:16,110 --> 00:01:23,310
Quindi ho una specie di divertente articolo di 10 tra i migliori o il più esilarante generatore di Lorem Ipsum per

19
00:01:23,310 --> 00:01:24,350
i web designer.

20
00:01:24,570 --> 00:01:30,480
E sto andando con questo primo bacon ipsum, quindi ho intenzione di generare alcuni paragrafi qui.

21
00:01:31,560 --> 00:01:31,910
Presto.

22
00:01:31,920 --> 00:01:34,370
Dammi del bacon e puoi vederlo solo dammi un po 'di testo.

23
00:01:34,470 --> 00:01:41,080
Ma questo è un testo reale che in realtà sembra un potenziale che sai qualcosa che avresti su un

24
00:01:41,070 --> 00:01:41,670
sito Web.

25
00:01:41,700 --> 00:01:43,430
Non sembra solo ridicolo come questo.

26
00:01:43,440 --> 00:01:45,890
Quindi è una rappresentazione migliore di un font.

27
00:01:46,110 --> 00:01:48,010
Quindi ho intenzione di andare avanti e incollarlo.

28
00:01:48,120 --> 00:01:52,100
Farò due paragrafi fuori da questo.

29
00:01:54,140 --> 00:01:54,570
Tutto ok.

30
00:01:54,570 --> 00:01:59,510
E lo lasceremo per ora e torneremo e aggiungeremo un po 'più tardi.

31
00:01:59,670 --> 00:02:02,580
Apriamolo e vediamo cosa abbiamo.

32
00:02:03,300 --> 00:02:03,720
OK.

33
00:02:03,750 --> 00:02:08,670
Quindi, ecco un sito che stiamo per disegnare e la prima cosa che vogliamo fare è parlare di

34
00:02:09,030 --> 00:02:11,840
come in realtà assegniamo semplicemente un font a qualsiasi cosa.

35
00:02:12,180 --> 00:02:17,790
E prima ancora di poterlo fare, dobbiamo parlare di quale tipo di carattere abbiamo a nostra disposizione nel browser.

36
00:02:18,510 --> 00:02:23,370
Quindi non c'è una risposta facile a quali tipi di carattere è disponibile un computer nel browser.

37
00:02:23,550 --> 00:02:26,420
E questo perché sono diversi su ogni macchina.

38
00:02:26,670 --> 00:02:28,360
E ho questo sito aperto qui.

39
00:02:28,640 --> 00:02:30,070
Dice stack di caratteri.

40
00:02:30,270 --> 00:02:34,250
Questo mostra in realtà se sei su un Mac o Windows.

41
00:02:34,350 --> 00:02:38,280
Qual è la percentuale di quelle macchine che hanno un determinato font.

42
00:02:38,670 --> 00:02:42,820
E quindi questi sono solo tipi di font web standard che vedremo molto spesso.

43
00:02:42,840 --> 00:02:51,030
Quindi, se guardiamo uno come Helvetica, puoi vedere che ogni Mac ha l'America ma sono state installate pochissime

44
00:02:51,450 --> 00:02:52,130
finestre.

45
00:02:52,290 --> 00:02:55,430
E così questi sono i font di sistema che arrivano su una macchina.

46
00:02:55,950 --> 00:03:00,650
Quindi questi non sono gli unici tipi di carattere che è possibile utilizzare, ma questi sono alcuni che sono le scommesse più sicure.

47
00:03:00,660 --> 00:03:05,790
Quindi se ne volevi uno che sapeva per certo avrebbe funzionato su ogni macchina che avresti scelto

48
00:03:06,270 --> 00:03:07,590
come Arial nero o aereo.

49
00:03:08,160 --> 00:03:10,310
Ovviamente questi caratteri sono piuttosto limitati.

50
00:03:10,350 --> 00:03:14,030
Quindi vedremo come in realtà includeremo font personalizzati più avanti in questo video.

51
00:03:14,130 --> 00:03:16,230
Ma per ora selezioniamo uno di questi.

52
00:03:16,260 --> 00:03:19,750
Quindi andiamo con Ariel Sharon Ariel.

53
00:03:20,010 --> 00:03:24,720
Quindi, per utilizzarlo, lo assegneremo ai nostri paragrafi qui.

54
00:03:25,370 --> 00:03:27,700
Quindi andremo nel mio C S S che ho collegato qui.

55
00:03:27,720 --> 00:03:31,840
Gli stili che C S S e la proprietà sono chiamati famiglia di caratteri.

56
00:03:32,040 --> 00:03:40,820
Quindi selezionerò i paragrafi e dirò che la famiglia di font è Arial proprio così.

57
00:03:41,060 --> 00:03:46,390
E se aggiorno vedrai che ora ho un font Arial qui.

58
00:03:46,410 --> 00:03:51,830
Una nota veloce posso anche mettere citazioni su questo che è totalmente valido.

59
00:03:51,840 --> 00:03:57,200
A volte devi farlo se hai un font che ha un numero all'inizio.

60
00:03:57,200 --> 00:04:02,160
Non che questo sia un vero font, ma se fosse così dovrei metterlo tra virgolette perché

61
00:04:02,160 --> 00:04:04,360
questa non è una linea CSSA valida.

62
00:04:04,830 --> 00:04:10,660
OK, quindi posso dargli un Aeriel in questo modo e puoi vedere che otteniamo Aeriel.

63
00:04:10,830 --> 00:04:12,970
Quindi ci sono altri tipi di caratteri con cui puoi giocare.

64
00:04:12,990 --> 00:04:16,340
Proviamo Georgia.

65
00:04:16,800 --> 00:04:19,290
Diamo quindi alla

66
00:04:24,150 --> 00:04:28,520
nostra H-1 Georgia proprio quel refresh.

67
00:04:28,860 --> 00:04:33,100
E puoi vedere che cambia carattere quindi non disperare se sei un designer.

68
00:04:33,120 --> 00:04:36,810
Vedremo come usare molti più font e come includere quelli personalizzati.

69
00:04:37,110 --> 00:04:42,390
Ma per ora ci concentreremo solo sui font predefiniti di sistema integrati, che sono un po 'limitati.

70
00:04:42,600 --> 00:04:48,780
E anche in questo caso non vi è alcuna garanzia in quanto si può vedere che non c'è nessun 100 percento di macchine in modo

71
00:04:51,570 --> 00:04:57,370
che la proprietà successiva di cui voglio parlare sia la dimensione del carattere, quindi la dimensione del carattere fa un suono come controlla quanto

72
00:04:57,490 --> 00:05:00,990
grande è il carattere o quanto piccolo il carattere è di un dato elemento.

73
00:05:01,240 --> 00:05:07,230
Quindi possiamo selezionare qualcosa e facciamolo al nostro H-1 e facciamo ognuno molto più grande.

74
00:05:07,590 --> 00:05:12,460
Quindi facciamo la dimensione del carattere e ci sono diverse unità che possiamo usare.

75
00:05:12,450 --> 00:05:18,170
E il primo si chiama pixel o picchi e lo abbiamo visto un po 'prima con Forder.

76
00:05:18,330 --> 00:05:25,770
Quindi ci limiteremo a dare qualcosa di enorme come 200 foto e se torneremo al browser, vedremo se

77
00:05:25,770 --> 00:05:31,740
riusciremo a ottenere questo gigantesco divertente 200 pixel, cosa possiamo fare per ogni evenienza.

78
00:05:31,750 --> 00:05:35,640
Se vuoi giocare con le dimensioni dei caratteri non sei sicuro di quanto grande vuoi che sia.

79
00:05:35,680 --> 00:05:36,610
85 o

80
00:05:40,410 --> 00:05:46,470
qualsiasi cosa vogliamo e possiamo giocare nel browser e vederlo il cambiamento si riflette immediatamente.

81
00:05:46,470 --> 00:05:55,190
Possiamo ispezionarlo e quindi possiamo andare qui e possiamo cliccare su questo e possiamo cambiare questo numero in modo che possiamo cambiarlo

82
00:05:55,200 --> 00:05:57,010
a 100 o 60 o

83
00:05:57,270 --> 00:06:01,570
Questa è davvero una bella funzionalità quando stai giocando con le dimensioni dei caratteri.

84
00:06:01,560 --> 00:06:06,310
Quindi, come ho detto, questo non è l'unico modo per scegliere una dimensione del font.

85
00:06:06,450 --> 00:06:07,650
Non è l'unica unità.

86
00:06:07,900 --> 00:06:15,730
C'è un'altra unità popolare chiamata IEMs ed E-M è fondamentalmente una dimensione relativa del carattere.

87
00:06:15,840 --> 00:06:23,250
Quindi vado avanti e apro la dimensione del carattere M. di leggere da qui per un attimo la dimensione di un valore

88
00:06:23,250 --> 00:06:29,790
EM è dinamico e EM è uguale alla dimensione del carattere che si applica al genitore dell'elemento in questione .

89
00:06:29,790 --> 00:06:33,500
D e la pagina e andare alla sezione EM e ho intenzione

90
00:06:33,880 --> 00:06:36,900
Quindi quello che significa veramente è che ti mostrerò un rapido esempio.

91
00:06:37,320 --> 00:06:47,580
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

92
00:06:47,580 --> 00:06:48,120
campata.

93
00:06:48,120 --> 00:06:50,300
Questa è probabilmente la nostra prima volta a vederli.

94
00:06:50,380 --> 00:06:57,510
È solo un modo per raggruppare il testo senza realmente fare una differenza visiva, quindi è solo un modo

95
00:06:57,510 --> 00:07:01,050
per creare un elemento attorno alla parola striscia di bistecca.

96
00:07:01,050 --> 00:07:03,470
Ma se mi rinfresco.

97
00:07:03,510 --> 00:07:04,710
Niente cambia affatto.

98
00:07:04,750 --> 00:07:09,230
Bene, la ricerca della dimensione del carattere, ma nulla cambia qui e dove ho questo intervallo.

99
00:07:09,780 --> 00:07:13,540
Quindi è un modo per evidenziare o individuare una linea e poi fare qualcosa.

100
00:07:13,550 --> 00:07:15,620
E lo renderemo molto più grande.

101
00:07:16,020 --> 00:07:22,890
Quindi usiamo un E-M o usiamo le unità E-M e lo faremo se volessimo fare in modo che

102
00:07:22,890 --> 00:07:26,380
questo raddoppi le dimensioni del font di questo paragrafo.

103
00:07:26,520 --> 00:07:38,290
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

104
00:07:38,460 --> 00:07:41,940
racchiude l'elemento genitore che è questo paragrafo.

105
00:07:41,940 --> 00:07:49,220
Quindi vedrai che qui, se aggiorno questo intervallo, raddoppio la dimensione del carattere di questo.

106
00:07:49,240 --> 00:07:53,170
Ma in realtà non abbiamo detto esplicitamente quanti pixel farcela.

107
00:07:53,160 --> 00:07:56,430
Sapeva solo quanto fosse grande e poi lo ha raddoppiato.

108
00:07:56,440 --> 00:08:02,430
Quindi questo è dinamico ed è per questo che a molte persone piace che, se per qualche ragione

109
00:08:02,440 --> 00:08:05,930
avessi bisogno di cambiare la dimensione del carattere, questo cambierebbe automaticamente.

110
00:08:06,190 --> 00:08:08,320
Quindi lascia che ti mostri un altro esempio.

111
00:08:08,460 --> 00:08:12,600
Aumentiamo la dimensione del carattere della dimensione

112
00:08:16,800 --> 00:08:27,140
del carattere del paragrafo e facciamo 40 pixel e puoi vedere che questo rimane ancora doppio.

113
00:08:27,150 --> 00:08:32,410
Quindi l'unica domanda su E-M che emerge molto è qual è il valore iniziale di v e qual è

114
00:08:32,400 --> 00:08:33,500
il livello più alto.

115
00:08:33,580 --> 00:08:38,840
Perché non possiamo continuare a ereditare da un genitore e quel genitore deve esserci una fonte di verità.

116
00:08:38,860 --> 00:08:45,120
Ci deve essere come nell'elemento di livello più alto che in realtà ha una dimensione del carattere e che in realtà

117
00:08:45,660 --> 00:08:48,580
cambia a seconda del browser che è un po 'frustrante.

118
00:08:49,050 --> 00:08:55,480
Ma secondo SDN di solito è di circa 16 pixel, quindi non è garantito, ma di solito è di circa

119
00:08:55,480 --> 00:08:56,060
16 pixel.

120
00:08:56,160 --> 00:09:01,680
Quindi ciò che la maggior parte delle persone farebbe è impostare una dimensione del carattere sul corpo proprio all'inizio.

121
00:09:01,950 --> 00:09:07,960
Quindi qualcosa come questa dimensione del carattere del corpo.

122
00:09:08,220 --> 00:09:16,860
E facciamo un piccolo, facciamo qualcosa di veramente piccolo per iniziare come 10 pixel e poi dobbiamo

123
00:09:16,890 --> 00:09:23,560
cambiare o ognuno in modo che sia cinque volte più grande del corpo.

124
00:09:23,620 --> 00:09:30,330
Quindi assomiglierà a cinque porno E-M e poi andremo sul nostro paragrafo per essere due volte più grande

125
00:09:30,340 --> 00:09:31,090
del corpo.

126
00:09:31,120 --> 00:09:33,000
Quindi 2. 0 E-M.

127
00:09:33,180 --> 00:09:37,230
E infine vogliamo che la nostra estensione sia grande il doppio di un paragrafo.

128
00:09:37,360 --> 00:09:40,810
Quindi questo è anche 2. 0 perché ricorda che è annidato all'interno.

129
00:09:41,080 --> 00:09:46,710
Quindi facciamo un testo al di fuori di un paragrafo proprio così e vedrai che è piuttosto piccolo.

130
00:09:47,010 --> 00:09:50,080
E poi l'abbiamo fatto cinque volte più grande di questo.

131
00:09:50,160 --> 00:09:51,820
L'abbiamo fatto due volte più grande.

132
00:09:52,000 --> 00:09:54,300
E questo è due volte più grande del paragrafo