Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Dreamweaver CS6 : Les nouveautés

Introduction à la gestion des fontes

Testez gratuitement nos 1340 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Avant de présenter les nouveautés de Dreamweaver à propos de la gestion des fontes pour le web, faisons un bref récapitulatif de la situation au sujet de l'utilisation de typos particulières pour afficher le contenu de nos pages web.
05:01

Transcription

Lorsque l'on est amené à utiliser de la typo sur le web, on va passer par des feuilles de style, et la par exemple dans l'exemple de cette page, qui possède un titre et un paragraphe, là, je vais typer par exemple le body pour partager cette typo pour l'intégralité de la page, et je vais venir chercher, dans une famille de font ici, un différent choix de typo. Alors toutes ces typos ne vont être généralement que limitées dans leur usage dans le sens où il faut que l'internaute possède la typo sur sa machine installé, parce que si j'ai une superbe typo sur ma machine, elle va être rutilante sur les pages web que je visualiserai sur ma machine, mais l'internaute puisqu'il ne possède pas la description de cette typographie, ne pourra pas l'utiliser. Alors, ici je peux modifier la liste des polices de ces jeux de familles, mais encore une fois, je ne pourrais utiliser que les typos qui sont installés sur ma machine, et pas forcément de manière générale sur le web. Pour cela, il existe une solution qui est la règle de description CSS @font-face{}. Alors sur ma page de font-face.com, vous trouverez toute une série d'informations sur cette règle et l'usage de cette règle. Alors qu'est-ce qu'il en est ? En fait, il en est qu'on va « packager » un ensemble de typographies, on va la convertir, cette typo, en différents formats, le format TTF, le format EOT, le format WOF et SVG, afin de pouvoir être distribuable et lue par toutes les plateformes, parce que toutes les plateformes, Internet Explorer par exemple, ne peut pas comprendre certains modes de police comme la TTF, les fichiers TTF, True Type File, ne seront pas interprétés par Internet Explorer, donc il va falloir contenter tous les navigateurs, toutes les technologies, afin de pouvoir être compatible. Alors ce paquet de font va pouvoir être téléchargeable de manière gratuite ou payante auprès de différents fondeurs, donc ici, vous avez plusieurs solutions, Google web fonts qui va proposer, vous voyez ici, 489 font families ici, et donc vous allez pouvoir venir chercher des typos, regarder la disponibilité de la typo, est-elle gratuite, est-elle payante, quel va être son droit d'exploitation, sa licence ? Ici, vous avez Typekit, qui est une fonderie créée et mis en place par Adobe aussi, qui proposes ses solutions, et donc vous allez pouvoir, pareil ici, venir sélectionner des typos. Webfonts.info qui va vous proposer aussi quelques typos gratuites ici, notamment avec le téléchargement disponible. Alors encore une fois, chaque fois, il vous faut vérifier la disponibilité de la typo, les conditions d'exploitation de la licence, et s'assurer que tout fonctionnera bien. Alors certains site, comme par exemple ici, sur webdesignshock, vous allez avoir aussi un petit tuto qui vous explique un peu comment on va utiliser cette typo, et vous voyez que si on se trouve sur Internet Explorer, le font-face va utiliser, va pointer vers une typo au format EOT qui est uniquement compris par Internet Explorer, d'où le commentaire conditionnel ici d'utilisation. Ici, sur fonts.com aussi, un choix de typo qui peut être gratuite. Ça ouvre des portes sur par exemple des typos comme fico, fico.lensco.be qui sont des typos de, comme on a l'habitude de voir, un peu comme symboles ou [inaudible], etc. qui mettent un peu des icônes, mais là, on a des icônes qui sont sous forme de typographies, mais des icônes assez web 2.0 qui ressemblent un peu à ce qu'on a l'habitude de voir sur le web comme les cases de check, boutons d'ajout, les boutons d'alerte, etc., donc c'est des standards, et ces standards, ben en fait, vous pouvez les colorer puisque c'est de la typo, changer leur taille, etc., et donc c'est exploitable, donc pensez à ce type de typo exactement qui peut être récupéré. Encore en faut-il ici par exemple ici, sur designshock, avoir par exemple des @font-face Kit Generator, parce que vous, si vous partez d'une typo qui va être Truetype, il va falloir pouvoir la convertir dans l'ensemble de ces formats pour pouvoir la rendre distribuable au travers de la règle @font-face. Alors ici, on va retenir notre attention sur fontsquirrel qui met quelques typos à disposition qui sont gratuites, et notamment pour illustrer cet exemple, je vous invite de regarder par exemple la Auruent, Auruent Sans ici qui est disponible, et donc si vous regardez plus de détails sur cette typos, généralement le fondeur va vous proposer donc un aperçu de la typographie, et puis ici son mode d'exploitation de licence, donc on voit bien que la licence est utilisable gratuitement dans la mesure où vous ne revendez pas cette typo, et puis ici, vous avez le @font-face Kit qui est directement téléchargeable, vous voyez ici, on peut directement télécharger un fichier zip qui va contenir donc le TTF, le EOT, le WOF, et le SVG, et ici pour mémoire, ben les formats, voilà, par exemple ici EOT, est utilisable uniquement par Internet Explorer, alors que le TTF n'est pas perçu par IE et iPhone, mais iPhone comprend le SVG. Voilà, ici un format standard émergeant, le WOFF qui va progressivement peut être devenir utilisable sur tous les navigateurs. Voilà donc cette introduction sur la gestion des fonts sur le web afin de mieux comprendre les nouveautés qu'apporte Dreamweaver CS6 à ce sujet.

Dreamweaver CS6 : Les nouveautés

Allez à la découverte des nouveautés de Dreamweaver CS6, qui gravitent autour du développement d’applications mobiles, de la pluri-distribution et de sites Internet réactifs.

3h16 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :23 avr. 2012
Mis à jour le:5 avr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !