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.
Mais nous allons également couvrir beaucoup d'autres propriétés qui sont liées aux polices et au texte.
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.
Donc, dans cette vidéo, nous allons arrêter et couvrir tous ces éléments.
Et la première chose que nous allons faire est d'obtenir notre texte simple que nous allons style.
Donc j'ai un Funk simple qui est Jim M-file et je vais aller de l'avant et ajouter dans votre bouche.
Alors je vais juste faire un H-1 afin que nous puissions voir un en-tête et un style.
Et puis quelques paragraphes.
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.
Je vais utiliser un générateur Lorem Epsom.
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.
Cela ne signifie rien du tout, mais il ressemble au moins à de vrais mots.
C'est donc un texte réservé.
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.
Et je vais juste aller avec ce premier ipsum bacon donc je vais générer quelques paragraphes ici.
Rapide.
Donnez-moi du bacon et vous pouvez le voir juste me donner du texte.
Mais c'est un vrai texte qui ressemble en fait à un potentiel que vous savez quelque chose que vous auriez sur un site Web.
Ça ne ressemble pas à des bavardages comme ça.
C'est donc une meilleure représentation d'une police.
Donc, je vais aller de l'avant et coller cela.
Je vais faire deux paragraphes à ce sujet.
D'accord.
Et nous laisserons cela pour cela pour le moment et nous reviendrons et ajouterons un peu plus tard.
Ouvrons-le et voyons ce que nous avons.
D'ACCORD.
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.
Et avant même que nous puissions le faire, nous devons parler de la police dont nous disposons même dans le navigateur.
Il n'y a donc pas de réponse simple quant aux polices d'un ordinateur disponibles dans le navigateur.
Et c'est parce qu'ils sont différents sur chaque machine.
Et j'ai ce site ouvert ici.
Elle dit pile de polices.
Cela montre en fait selon si vous êtes sur un Mac ou Windows.
Quel est le pourcentage de ces machines qui ont une police donnée.
Et donc ce sont juste des types de polices Web standard que nous allons voir beaucoup de temps.
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é.
Et ce sont donc les polices système qui viennent sur une machine.
Donc, ce ne sont pas les seules polices que vous pouvez utiliser, mais ce sont certains qui sont des paris plus sûrs.
Donc, si vous vouliez un qui il savait à coup sûr travaillerait sur chaque machine que vous choisissiez comme Arial noir ou aérienne.
Évidemment, ces polices sont assez limitées.
Nous allons donc voir comment nous pouvons inclure des polices personnalisées plus tard dans cette vidéo.
Mais pour l'instant, choisissons simplement l'un d'eux.
Alors allons avec Ariel Sharon Ariel.
Donc, pour utiliser cela, nous allons l'assigner à nos paragraphes ici.
Donc, nous allons entrer dans mon C S S que j'ai lié ici.
Styles que C S S et la propriété est appelée la famille de polices.
Je vais donc sélectionner des paragraphes et je vais dire que la famille de polices est Arial comme ça.
Et si je me rafraîchis vous verrez que j'ai maintenant la police Arial ici.
Une note rapide, je peux également mettre des citations autour de ce qui est totalement valide.
Parfois, vous devrez le faire si vous avez une police qui a un nombre au début.
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.
OK alors je peux lui donner Aeriel comme ça et vous pouvez voir que nous obtenons Aeriel.
Donc, il existe d'autres polices que vous pouvez jouer avec.
Essayons la Géorgie.
Donc, nous allons donner notre H-1 Géorgie tout comme ce rafraîchissement.
Et vous pouvez le voir changer la police donc ne désespérez pas si vous êtes un concepteur.
Nous allons voir comment utiliser beaucoup plus de polices et comment inclure des polices personnalisées.
Mais pour l'instant, nous allons nous concentrer sur les polices par défaut du système qui sont un peu limitées.
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é.
Nous pouvons donc sélectionner quelque chose et nous allons le faire à notre H-1 et rendons chacun plus grand.
Donc nous faisons la taille de la police et il ya différentes unités que nous pouvons utiliser.
Et le premier est appelé pixels ou pics et nous l'avons vu un peu plus tôt avec Forder.
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ù.
Si vous voulez jouer avec des tailles de police, vous n'êtes pas sûr de la taille que vous voulez que ce soit.
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.
C'est donc une fonctionnalité vraiment sympa lorsque vous jouez avec les tailles de police.
Donc, comme je l'ai mentionné bien que ce n'est pas la seule façon de choisir une taille de police.
Ce n'est pas la seule unité.
Il y a une autre unité populaire appelée IEMs et E-M est fondamentalement une taille de police relative.
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.
Donc ce que cela signifie vraiment, je vais vous montrer un exemple rapide.
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.
C'est probablement notre première fois de les voir.
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.
Mais si je rafraîchis.
Rien ne change du tout.
Eh bien la recherche de la taille de la police, mais rien ne change ici et où j'ai cette portée.
C'est donc un moyen de mettre en évidence ou de singulariser une ligne et ensuite de faire quelque chose.
Et nous allons le faire beaucoup plus grand.
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.
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.
Ainsi vous verrez que ici si je rafraîchis cette portée est le double de la taille de police de ceci.
Mais nous n'avons pas réellement expliqué explicitement combien de pixels pour le faire.
Il savait juste combien c'était grand et puis il a doublé.
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.
Permettez-moi de vous montrer un autre exemple.
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.
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.
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é.
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.
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.
Donc ce que la plupart des gens feraient est de définir une taille de police sur le corps dès le début.
Donc, quelque chose comme cette taille de police corps.
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.
Donc ça va ressembler à cinq porno E-M et puis nous allons sur notre paragraphe pour être deux fois plus grand que le corps.
So 2.0 E-M.
Et enfin, nous voulons que notre portée soit deux fois plus grande qu'un paragraphe.
Donc, c'est aussi 2.0 car rappelez-vous qu'il est imbriqué à l'intérieur.
Alors, nous allons faire du texte en dehors d'un paragraphe comme ça et vous verrez qu'il est assez petit.
Et puis nous avons fait cela cinq fois plus grand que cela.
Nous l'avons fait deux fois plus grande.