L'exprimer

CSS complété l'existence de 10 ans cette année! Ceux qui ont été autour pendant un certain temps, gagner leur pain (ou non) en utilisant le CSS, alors vous pourriez connaître la façon dont nous avons été affamés pour une bonne sélection de polices de caractères. Même en l'absence de polices designers comme ceux de CSS Zen Garden ont fait usage d'images de fond CSS pour remplacer les polices dans la poursuite de faire un peu de justice à leurs desseins. Nous avons également essayé Flash / JavaScript hacks ® pour atteindre nos objectifs de conception. En aucun cas, il s'agit d'une mauvaise façon d'obtenir les polices que nous désirons dans nos conceptions web, mais certainement, ce n'est pas la façon la plus souhaitable. et plus web année designer, comme moi, ont pleinement compté sur une dizaine de polices pour leurs conceptions.

Les développements récents dans les standards du Web et des formats de polices permettent de rendre le texte HTML dans des polices de caractères autres que les mêmes polices par défaut anciens. Livré dans le "@ fontface" Decleration CSS.

@ Fontface provids une solution à un lien vers le fichier de police réel et le récupérer à partir du Web. Utilisation de @ fontface, les concepteurs peuvent utiliser des polices sans avoir à geler le texte comme les images de fond. La mise en œuvre est très simple, comme indiqué ci-dessous, mais comme toutes les bonnes choses ont une partie de l'CON, tous les navigateurs prennent en charge un «type de police" unique. Si vous prévoyez d'utiliser fontface @ dans le site avec besoin de soutien navigateur croix, alors vous aurez à fournir des sources à divers polices-types du même.

1. TrueType - Un format conçu pour bien paraître à l'écran. Recommandé en particulier pour les navigateurs Windows (Chrome).
2. OpenType (CFF) - Ce format est préférable pour les travaux d'impression et de ne pas toujours l'air bien sur Windows.
3. EOT - Vous avez besoin de ce format si vous souhaitez cibler Internet Explorer. IE de ne pas utiliser n'importe quel autre format. Notre EOT seraient considérés comme "Lite", car ils ne sont ni compressées ni domaine restreint.
4. SVG - Il s'agit d'un format XML pris en charge par certains navigateurs, y compris l'iPhone.
5. WOFF - Ce cross-browser, le format de police uniquement sur ​​le Web est léger (données de police est compressé zip) et peut être compilé avec TrueType ou PostScript (CFF) décrit. Il est actuellement pris en charge par Firefox 3.6 +.

Utilisation de @ fontface

  @ Font-face {
 font-family: 'CalligraphyFLFRegular';
 src: url ('CalligraphyFLF.eot');
 src: local ('CalligraphyFLF'), locale («CalligraphyFLF '), format d'URL (' CalligraphyFLF.woff ') (' WOFF '), url (' CalligraphyFLF.ttf ') format (" truetype "), url (' CalligraphyFLF . svg # CalligraphyFLF ') format (' svg ');
 }
 @ Font-face {
   font-family: "Votre police";
   src: url ("fonts / font_filename.eot");
   src: local ("Autre nom"), locale ("Alternatename"),
     url ("fonts / font_filename.woff") format ("WOFF"),
     url ("fonts / font_filename.otf") format ("OpenType"),
     url ("fonts / font_filename.svg # nom_du_fichier_de_fonte") format ("svg");
   }
 h2 {font-family: "Votre police", la Géorgie, serif;} 

Comme vous pouvez le voir dans l'exemple ci-dessus, afin d'inclure la police de caractères choisie, on doit relier à un ensemble de fonttypes pour le même type de caractère. Ainsi les gens se réfèrent à lui comme "Kit de police".
Il existe des kits de polices disponibles, qui permet explicitement le lien avec le CSS @ font-face de propriété en vertu de contrat de licence utilisateur final (CLUF).

Ressources WebFont utiles:

• Polices disponibles pour @ font-face plongement page wiki à http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Il est un concepteur de la police de renom qui a fait des centaines de polices TrueType intéressantes disponibles gratuitement pour une utilisation sur le web. Ses polices sont élégantes, décoratives, et ludique.
• Dieter Steffmann est un autre concepteur de la police grand. Lui aussi, a fait de nombreuses polices disponibles belles pour quiconque d'utiliser.
• Boutique de polices : les polices offre spécialement conçus pour l'utilisation du Web. Plus de 30 des familles les plus réussies FontFont sont maintenant disponibles en FontFonts Web. FontShop dispose également d'un utilisateur détaillé WebFont guide de http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Squirrel polices : vedette toutes les polices d'écureuil Font offre pour une utilisation avec @ font-face intégration CSS. Squirrel polices offre une quantité impressionnante de type, il est mort simple à en choisir un, et offre haut la main "kits" - La police de caractères de votre choix, dans plusieurs formats, emballés avec la démo HTML et CSS qui utilise très actuel @ font-face syntaxe . Ils offrent également un moyen de faire vos propres @ font-face kits . Si la police de caractères que vous souhaitez utiliser a été autorisé de façon appropriée (ceux qui viennent avec votre ordinateur ne sont pas nécessairement d'accord), le générateur produit EOT, SVG, et hey! Fichiers WOFF.

Avec mon savoir-faire-ensemble limité avec des outils comme Photoshop et Illustrator, je peux honnêtement avouer que je suis un développeur mieux que je suis un concepteur. Mais mon expérience avec le noyau (côté serveur) le développement avec Java / PHP / COBOL, a eu une influence très positive sur mes compétences en développement d'interface utilisateur. Ce que je veux dire, c'est, tout en créant mes dessins, c'est à dire chaque fois que je fais la conception, je pense à la façon dont le design peut être converti en meilleure HTML-CSS et tout en faisant le code HTML-CSS, je donne une pensée sur la technologie serveur et faire raisonnablement sûr que le code HTML peut être facilement mis en œuvre dans des boucles ou des extraits de XSL PHP, etc

Au fil des ans, j'ai été jeté la tête sur les dessins et modèles par les concepteurs d'interface utilisateur qui, probablement, n'a pas forcément avoir une idée de ce que HTML ou CSS. Toutes ces années, j'ai pensé que je serais trop demander, Si je viens de s'attendre le concepteur, qui essaie de shov son «impossible de code" conception dans ma gorge, de comprendre un peu ce que sa conception serait converti en. Cela aiderait à droite?

Puis, je suis tombé sur ce post aujourd'hui ... concepteurs de sites Web qui ne peuvent pas le code ... Seigneur Merci! Je suis juste un de ceux qui ressentent la même chose ... Le artitle ci-dessus est un peu poussif une longue .. mais il en vaut la lecture, chaque mot.

Merci Elliot Jay Stocks ... je me sens soulagé!

Voici quelques extraits de l'article Elliots .

Wow, quelle journée! Cela a commencé avec un tweet peu et se termine par une discussion qui semblait balayer la communauté du design web tout entier. Il semble qu'il y ait des opinions très fortes sur le sujet de savoir si les concepteurs Web devrait être en mesure de code.
...
Donc, avant d'entrer dans cela, permettez-moi de récapituler brièvement ce que j'ai dit ce matin sur Twitter:

Honnêtement, je suis choqué que, en 2010, je suis encore à venir à travers des concepteurs de sites Web 'qui ne peut pas coder leurs propres conceptions. Aucune excuse.

... J'aurais dû être un peu plus précis dans mon tweet. Je parlais de designers qui n'ont pas même les plus élémentaires en HTML et CSS pour allumer un design plat dans un site réel. Peu de gens qui, intentionnellement choisi de ne pas le code, ceux qui le peuvent pas. Et je pense aussi que pour front-end le code ici, bien sûr que c'est ridicule de penser que les concepteurs devraient aussi être étonnants back-end programmeurs ...

Nous recevons des dessins envoyés Web des dans Illustrator, 300dpi, impossibles à code, pas de cohérence / facilité d'utilisation.
~ Amy Mahon

Il se fait tard, et j'ai d'envelopper cette place en quelque sorte. Je sais qu'il y aura beaucoup qui sont en désaccord avec moi, et mon intention n'est pas d'offenser ou déranger personne qui ne peut pas le code, mais j'espère que certains de ce que j'ai dit reflète certains des points qui viennent toujours quand se plonger dans ce débat.

A la fin de la journée, je ne perds pas le sommeil sur qui peut coder et qui ne peut pas. Je suis juste vraiment surpris de trouver autant de designers qui manquent de compétences frontaux, comme je l'ai pensé que c'était une chose du passé.

Lisez également les commentaires, il y avait près de 320 commentaires, alors que j'écris ... ils valent la peine d'être lu.
S'il vous plaît lire le post complet ici .. Elliots concepteurs de sites Web qui ne peuvent pas coder

Depuis le bouton radio et le texte sont en ligne, de sorte que le texte sera s'aligner sur le bas du bouton radio, le texte de la volonté semble être légèrement en dessous du bouton radio.
Si vous voulez que d'aligner vers le haut, vous aurez à mettre la radio et le texte dans des récipients séparés comme divs ou d'une durée (le cas échéant) et ils prendront soin de l'alignement. Il serait plus facile d'utiliser des cellules de table aussi, de votre cahier des charges le permet.

Ce ne sera pas le même aspect dans tous les navigateurs, comme chaque navigateur affiche les radios un peu différemment, de sorte qu'il va toujours y avoir des problèmes de taille, peu importe ce que vous faites.