Lefont de CSS3 et les transformations 3D

L'impact pratique d'un couple de fonctionnalités CSS3 est pas encore prouvé - la font

propriété (qui a généré buzz considérable) et un ensemble émergent de transformations 3D.

Si vous appliquez font pour les polices de caractères personnalisées, ou des transformations 3D, être sûr que votre page fonctionne bien dans les environnements de navigation qui ne supportent pas ces effets. Et, parce que ce qui est pas si facile à faire avec font ou 3D transforme, vous voudrez peut-être attendre et voir comment elles se développent.

La transformée defont en CSS3

Le concept derrière font est que les développeurs peuvent enfin se libérer des contraintes serrées concernant les polices peuvent être utilisés dans les pages Web en téléchargeant des polices personnalisées que les utilisateurs téléchargent ensuite pour afficher sur la page. cependant, font est quelque chose d'un concept imparfait, et dans la mesure qu'il a du potentiel, la mise en œuvre ne sont pas en place pour la rendre accessible pour la plupart des concepteurs de sites Web. Voici quelques-uns des problèmes font livré avec:

• Systèmes d'exploitation ne possèdent pas ces polices installées. Avec une résolution (en points par pouce) environ quatre fois plus de grain (ou moins dense) que la résolution d'impression, le web exige polices qui sont relativement simples. Les concepteurs artistiques exploitent outils CSS pour micro-accordage hauteur de la police et de l'espacement pour créer un type unique et intrigante en utilisant les polices standards qui sont déjà installés dans la plupart des ordinateurs.

  En d'autres termes, dans de nombreux cas, les concepteurs peuvent utiliser les CSS pour créer des polices de regard unique sans recourir à demander aux utilisateurs de télécharger une police avant qu'une page peut être consulté.

• Les visiteurs doivent télécharger une police dans leur système d'exploitation avant la police applique. Cela tend à inciter les avertissements dans les navigateurs et nécessite un processus qui, dans le temps et la complexité, est plus susceptible de conduire un visiteur loin d'un site que de faire son expérience de navigation plus positive.

• Polices personnalisées doivent être achetés. Licensing utilisation légale des polices personnalisées implique des contrats de licence plutôt complexes, et les coûts commencent à plusieurs centaines de dollars (pour utiliser une police personnalisée dans un site unique).

• Soutien font émerge plus lentement sur les appareils mobiles que pour les environnements en mode plein écran. Le système le plus populaire d'exploitation mobile, Android, par exemple, a adopté un support complet pour font dans la version 4, mais de nombreux smartphones encore fonctionner sur les versions d'Android 2 et 3.

À certains moments, des polices téléchargeables peuvent être appropriées. Par exemple, si vous êtes Keith Richards des Rolling Stones, vous pouvez utiliser une police personnalisée téléchargeable. Mais si votre environnement de navigation ne peut pas gérer les polices téléchargeables, son personnel de développeurs a créé des scripts qui détectent que votre environnement de navigation ne supporte pas le téléchargement de la police et de fournir une image graphique du type à la place.

Avec toutes ces précautions, si vous souhaitez installer et d'appliquer des polices personnalisées, procédez comme suit:

1. Achetez une police ou de trouver un gratuit en ligne.

   Sources comme Fonts.com fournissent des polices téléchargeables ainsi que des outils d'installation qui aider à installer, mettre en œuvre et dépanner des polices personnalisées téléchargeables. Dans de nombreux cas, la “ Steps ” pourrait finir ici - si vous pouvez passer dans la gamme de 500 $ pour un ensemble de polices téléchargeables (ensembles comprennent des options comme italique, gras, etc.), ce qui est probablement une bonne option.

2. Installer la police.

   Si la police ne vient pas avec un package ou instructions d'installation, vous pouvez l'installer en enregistrant la TTF ou un fichier de la FTO à votre dossier de site.

3. Au début de votre fichier CSS externe, ajoutez ce code:

   @ font-face {font-family: xxx-src: url (yyy.ttf ') -}

   xxx est le nom que vous allez utiliser dans des styles d'assigner la police, et yyy est le nom du fichier TTF (ou OTF) pour le fontface vous avez téléchargé.

4. Avec le code précédent en haut de votre fichier CSS, utilisez le nom de la police dans le cadre de définitions de style.

   Par example:

   h1 {font-family: Courrier de yyy-}

   Courier est la police de sauvegarde qui apparaîtra dans les navigateurs qui ne supportent pas votre police téléchargeable.

Transformations 3D

Transformations 3D peuvent faire pivoter un objet soit sur le X-axe (horizontal) ou y-axe (vertical). Parce feuilletant un objet horizontalement ou verticalement a des implications de conception très limitées, ces transformations sont destinés à être combinée avec javascript ou d'autres outils d'animation et d'interactivité pour fabriquer des objets basculent et de spin.

Encore plus limitant est la portée limitée de support du navigateur pour les transformations 3D. À ce jour, seuls les navigateurs construit sur le moteur de WebKit (Safari et certaines versions de Chrome) support de la 3D transforme.

Avec ces mises en garde, voici un exemple d'application un spin-180 verticale à un sélecteur de classe (.rotate_3d):

.rotate_3d {transform: rotateY (180 °) - webkit-transform: rotateY (180 °) -}