1
00:00:01,020 --> 00:00:09,880
Donc, cette vidéo va se concentrer sur les polices de succès et évidemment avoir du plaisir et la cueillette des polices pour une page Web est vraiment très important.

2
00:00:10,110 --> 00:00:14,660
Mais nous allons également couvrir beaucoup d'autres propriétés qui sont liées aux polices et au texte.

3
00:00:14,730 --> 00:00:23,470
Et ceux qui sont la famille de polices taille de police poids de la police hauteur de ligne texte une ligne et la décoration de texte.

4
00:00:23,610 --> 00:00:26,530
Donc, dans cette vidéo, nous allons arrêter et couvrir tous ces éléments.

5
00:00:26,730 --> 00:00:32,670
Et la première chose que nous allons faire est d'obtenir notre texte simple que nous allons style.

6
00:00:33,030 --> 00:00:39,080
Donc j'ai un Funk simple qui est Jim M-file et je vais aller de l'avant et ajouter dans votre bouche.

7
00:00:39,080 --> 00:00:42,660
Alors je vais juste faire un H-1 afin que nous puissions voir un en-tête et un style.

8
00:00:42,750 --> 00:00:44,180
Et puis quelques paragraphes.

9
00:00:44,490 --> 00:00:59,580
Donc, je vais juste appeler la page de démonstration de cette police, puis la prochaine chose plutôt que de simplement taper quelques mots aléatoires ou certains jibberish comme cela qui ne reflète pas vraiment ce que ressemble l'anglais à une page.

10
00:00:59,620 --> 00:01:02,610
Je vais utiliser un générateur Lorem Epsom.

11
00:01:02,610 --> 00:01:09,980
Donc, pour ceux d'entre vous qui ne connaissent pas Lorem Ipsum générateurs sont utilisés pour générer un bouquet de texte aléatoire qui est des mots anglais.

12
00:01:09,990 --> 00:01:13,550
Cela ne signifie rien du tout, mais il ressemble au moins à de vrais mots.

13
00:01:13,560 --> 00:01:15,570
C'est donc un texte réservé.

14
00:01:16,110 --> 00:01:24,350
Donc, j'ai ce genre d'article drôle ouvert de 10 des meilleurs ou le plus hilarant Lorem Ipsum générateur pour les concepteurs de sites Web.

15
00:01:24,570 --> 00:01:31,090
Et je vais juste aller avec ce premier ipsum bacon donc je vais générer quelques paragraphes ici.

16
00:01:31,560 --> 00:01:31,910
Rapide.

17
00:01:31,920 --> 00:01:34,370
Donnez-moi du bacon et vous pouvez le voir juste me donner du texte.

18
00:01:34,470 --> 00:01:41,670
Mais c'est un vrai texte qui ressemble en fait à un potentiel que vous savez quelque chose que vous auriez sur un site Web.

19
00:01:41,700 --> 00:01:43,430
Ça ne ressemble pas à des bavardages comme ça.

20
00:01:43,440 --> 00:01:45,890
C'est donc une meilleure représentation d'une police.

21
00:01:46,110 --> 00:01:48,010
Donc, je vais aller de l'avant et coller cela.

22
00:01:48,120 --> 00:01:52,100
Je vais faire deux paragraphes à ce sujet.

23
00:01:54,140 --> 00:01:54,570
D'accord.

24
00:01:54,570 --> 00:01:59,510
Et nous laisserons cela pour cela pour le moment et nous reviendrons et ajouterons un peu plus tard.

25
00:01:59,670 --> 00:02:02,580
Ouvrons-le et voyons ce que nous avons.

26
00:02:03,300 --> 00:02:03,720
D'ACCORD.

27
00:02:03,750 --> 00:02:11,840
Alors voici un site que nous allons être de style et la première chose que nous voulons faire est de parler de comment pouvons-nous simplement attribuer une police à quoi que ce soit.

28
00:02:12,180 --> 00:02:18,510
Et avant même que nous puissions le faire, nous devons parler de la police dont nous disposons même dans le navigateur.

29
00:02:18,510 --> 00:02:23,370
Il n'y a donc pas de réponse simple quant aux polices d'un ordinateur disponibles dans le navigateur.

30
00:02:23,550 --> 00:02:26,420
Et c'est parce qu'ils sont différents sur chaque machine.

31
00:02:26,670 --> 00:02:28,360
Et j'ai ce site ouvert ici.

32
00:02:28,640 --> 00:02:30,070
Elle dit pile de polices.

33
00:02:30,270 --> 00:02:34,250
Cela montre en fait selon si vous êtes sur un Mac ou Windows.

34
00:02:34,350 --> 00:02:38,280
Quel est le pourcentage de ces machines qui ont une police donnée.

35
00:02:38,670 --> 00:02:42,820
Et donc ce sont juste des types de polices Web standard que nous allons voir beaucoup de temps.

36
00:02:42,840 --> 00:02:52,130
Donc, si nous regardons un comme Helvetica, vous pouvez voir que chaque Mac a l'Amérique, mais très peu de fenêtres ont installé.

37
00:02:52,290 --> 00:02:55,430
Et ce sont donc les polices système qui viennent sur une machine.

38
00:02:55,950 --> 00:03:00,650
Donc, ce ne sont pas les seules polices que vous pouvez utiliser, mais ce sont certains qui sont des paris plus sûrs.

39
00:03:00,660 --> 00:03:07,590
Donc, si vous vouliez un qui il savait à coup sûr travaillerait sur chaque machine que vous choisissiez comme Arial noir ou aérienne.

40
00:03:08,160 --> 00:03:10,310
Évidemment, ces polices sont assez limitées.

41
00:03:10,350 --> 00:03:14,030
Nous allons donc voir comment nous pouvons inclure des polices personnalisées plus tard dans cette vidéo.

42
00:03:14,130 --> 00:03:16,230
Mais pour l'instant, choisissons simplement l'un d'eux.

43
00:03:16,260 --> 00:03:19,750
Alors allons avec Ariel Sharon Ariel.

44
00:03:20,010 --> 00:03:24,720
Donc, pour utiliser cela, nous allons l'assigner à nos paragraphes ici.

45
00:03:25,370 --> 00:03:27,700
Donc, nous allons entrer dans mon C S S que j'ai lié ici.

46
00:03:27,720 --> 00:03:31,840
Styles que C S S et la propriété est appelée la famille de polices.

47
00:03:32,040 --> 00:03:40,820
Je vais donc sélectionner des paragraphes et je vais dire que la famille de polices est Arial comme ça.

48
00:03:41,060 --> 00:03:46,390
Et si je me rafraîchis vous verrez que j'ai maintenant la police Arial ici.

49
00:03:46,410 --> 00:03:51,830
Une note rapide, je peux également mettre des citations autour de ce qui est totalement valide.

50
00:03:51,840 --> 00:03:57,200
Parfois, vous devrez le faire si vous avez une police qui a un nombre au début.

51
00:03:57,200 --> 00:04:04,360
Pas que ce soit une vraie police mais si c'était je devrais placer des citations autour de lui parce que ce n'est pas une ligne valide de CSSA.

52
00:04:04,830 --> 00:04:10,660
OK alors je peux lui donner Aeriel comme ça et vous pouvez voir que nous obtenons Aeriel.

53
00:04:10,830 --> 00:04:12,970
Donc, il existe d'autres polices que vous pouvez jouer avec.

54
00:04:12,990 --> 00:04:16,340
Essayons la Géorgie.

55
00:04:16,800 --> 00:04:28,520
Donc, nous allons donner notre H-1 Géorgie tout comme ce rafraîchissement.

56
00:04:28,860 --> 00:04:33,100
Et vous pouvez le voir changer la police donc ne désespérez pas si vous êtes un concepteur.

57
00:04:33,120 --> 00:04:36,810
Nous allons voir comment utiliser beaucoup plus de polices et comment inclure des polices personnalisées.

58
00:04:37,110 --> 00:04:42,500
Mais pour l'instant, nous allons nous concentrer sur les polices par défaut du système qui sont un peu limitées.

59
00:04:42,600 --> 00:05:00,990
Et même alors, il n'y a aucune garantie que vous pouvez voir qu'il n'y a pas que 100 pour cent des machines ont donc la prochaine propriété dont je veux parler est la taille de la police de sorte que la taille de la police sorte de sons comme il contrôle la taille de la police est ou comment petite la Font est d'un élément donné.

60
00:05:01,240 --> 00:05:07,230
Nous pouvons donc sélectionner quelque chose et nous allons le faire à notre H-1 et rendons chacun plus grand.

61
00:05:07,590 --> 00:05:12,460
Donc nous faisons la taille de la police et il ya différentes unités que nous pouvons utiliser.

62
00:05:12,450 --> 00:05:18,170
Et le premier est appelé pixels ou pics et nous l'avons vu un peu plus tôt avec Forder.

63
00:05:18,330 --> 00:05:31,740
Donc, nous allons simplement lui donner quelque chose d'énorme comme 200 photos et si nous revenons sur le navigateur, vous pouvez voir si nous obtenons ce plaisir gigantesque 200 pixels ce que nous pouvons faire au cas où.

64
00:05:31,750 --> 00:05:35,640
Si vous voulez jouer avec des tailles de police, vous n'êtes pas sûr de la taille que vous voulez que ce soit.

65
00:05:35,680 --> 00:05:57,010
Nous pouvons l'inspecter, puis nous pouvons aller ici et nous pouvons cliquer dessus et nous pouvons changer ce nombre afin que nous puissions le changer à 100 ou 60 ou 85 ou tout ce que nous voulons et nous pouvons jouer dans le navigateur et juste le voir Le changement reflété immédiatement.

66
00:05:57,270 --> 00:06:01,570
C'est donc une fonctionnalité vraiment sympa lorsque vous jouez avec les tailles de police.

67
00:06:01,560 --> 00:06:06,310
Donc, comme je l'ai mentionné bien que ce n'est pas la seule façon de choisir une taille de police.

68
00:06:06,450 --> 00:06:07,650
Ce n'est pas la seule unité.

69
00:06:07,900 --> 00:06:15,730
Il y a une autre unité populaire appelée IEMs et E-M est fondamentalement une taille de police relative.

70
00:06:15,840 --> 00:06:33,500
Donc, je vais aller de l'avant et ouvrir la taille de la police MD et la page et aller à la section EM et je vais lire à partir d'ici pour un instant la taille d'une valeur EM est dynamique et EM est égal à la Taille de la police qui s'applique au parent de l'élément en question.

71
00:06:33,880 --> 00:06:36,900
Donc ce que cela signifie vraiment, je vais vous montrer un exemple rapide.

72
00:06:37,320 --> 00:06:48,120
Si je mets Allons à l'intérieur d'ici sous le steak de bande je vais mettre un élément de portée dans tout ce qu'une portée fait.

73
00:06:48,120 --> 00:06:50,300
C'est probablement notre première fois de les voir.

74
00:06:50,380 --> 00:07:01,050
Est-ce juste un moyen de regrouper le texte sans faire réellement une différence visuellement donc c'est juste un moyen de faire un élément autour du mot strip steak.

75
00:07:01,050 --> 00:07:03,470
Mais si je rafraîchis.

76
00:07:03,510 --> 00:07:04,710
Rien ne change du tout.

77
00:07:04,750 --> 00:07:09,230
Eh bien la recherche de la taille de la police, mais rien ne change ici et où j'ai cette portée.

78
00:07:09,780 --> 00:07:13,540
C'est donc un moyen de mettre en évidence ou de singulariser une ligne et ensuite de faire quelque chose.

79
00:07:13,550 --> 00:07:15,620
Et nous allons le faire beaucoup plus grand.

80
00:07:16,020 --> 00:07:26,380
Donc, nous utilisons un E-M ou nous utilisons les unités E-M et nous sommes si nous voulions faire ce double de la taille de la police de ce paragraphe, nous allons ici.

81
00:07:26,520 --> 00:07:41,940
So let's span et puis nous disons juste la taille de la police 2.0 E-M et donc qui va être le double de la taille de la police de l'élément inclus de l'élément parent qui est ce paragraphe.

82
00:07:41,940 --> 00:07:49,220
Ainsi vous verrez que ici si je rafraîchis cette portée est le double de la taille de police de ceci.

83
00:07:49,240 --> 00:07:53,170
Mais nous n'avons pas réellement expliqué explicitement combien de pixels pour le faire.

84
00:07:53,160 --> 00:07:56,430
Il savait juste combien c'était grand et puis il a doublé.

85
00:07:56,440 --> 00:08:05,930
Donc, c'est dynamique, c'est pourquoi beaucoup de gens aiment que si, pour une raison quelconque, j'avais besoin de changer la taille de la police de ce que cela changerait automatiquement.

86
00:08:06,190 --> 00:08:08,320
Permettez-moi de vous montrer un autre exemple.

87
00:08:08,460 --> 00:08:27,140
Augmentons la taille de police de la taille de police du paragraphe et faisons 40 pixels et vous pouvez voir que cela reste toujours double.

88
00:08:27,150 --> 00:08:33,500
Donc, la seule question sur E-M qui vient beaucoup est ce qui est la valeur initiale de v et ce qui est le niveau supérieur.

89
00:08:33,580 --> 00:08:38,860
Parce que nous ne pouvons pas simplement garder l'héritage d'un parent et ce parent, il doit y avoir une source de vérité.

90
00:08:38,860 --> 00:08:48,580
Il doit y avoir comme à l'élément très haut niveau qui a effectivement une taille de police et qui change en fait selon le navigateur qui est un peu frustrant.

91
00:08:49,050 --> 00:08:56,060
Mais selon SDN, il est généralement d'environ 16 pixels, ce qui n'est pas une garantie, mais il est généralement autour de 16 pixels.

92
00:08:56,160 --> 00:09:01,680
Donc ce que la plupart des gens feraient est de définir une taille de police sur le corps dès le début.

93
00:09:01,950 --> 00:09:07,960
Donc, quelque chose comme cette taille de police corps.

94
00:09:08,220 --> 00:09:23,560
Et laissez-nous faire un let's faire quelque chose de vraiment petit pour commencer comme 10 pixels et puis doit changer ou chacun de sorte qu'il est cinq fois plus grand que le corps.

95
00:09:23,620 --> 00:09:31,090
Donc ça va ressembler à cinq porno E-M et puis nous allons sur notre paragraphe pour être deux fois plus grand que le corps.

96
00:09:31,120 --> 00:09:33,000
So 2.0 E-M.

97
00:09:33,180 --> 00:09:37,230
Et enfin, nous voulons que notre portée soit deux fois plus grande qu'un paragraphe.

98
00:09:37,360 --> 00:09:40,810
Donc, c'est aussi 2.0 car rappelez-vous qu'il est imbriqué à l'intérieur.

99
00:09:41,080 --> 00:09:46,710
Alors, nous allons faire du texte en dehors d'un paragraphe comme ça et vous verrez qu'il est assez petit.

100
00:09:47,010 --> 00:09:50,080
Et puis nous avons fait cela cinq fois plus grand que cela.

101
00:09:50,160 --> 00:09:51,820
Nous l'avons fait deux fois plus grande.