Ausdruck ihrer IT-

CSS beendet 10 Jahre Bestehen in diesem Jahr! Diejenigen, die sich für eine Weile gewesen sind, verdienen ihr Brot (oder nicht) unter Verwendung von CSS, dann habe bewusst, wie wir für eine gute Auswahl an Schriften gehungert. Selbst mit dem Mangel an Schriften-Designer wie diejenigen bei CSS Zen Garden haben die Verwendung von CSS-Hintergrund-Bilder von Schriftarten in dem Streben nach Gerechtigkeit dabei einige um ihre Entwürfe zu ersetzen hat. Wir haben auch versucht Flash / JavaScript ®-Hacks, um unsere Design-Ziele zu erreichen. Auf keinen Fall ist dies ein falscher Weg, um die wir uns wünschen Schriften in unsere Web-Designs zu bekommen, aber definitiv ist es nicht das begehrteste Weise. und über Jahre Web-Designer, wie ich, haben sich voll auf zehn oder so Fonts für ihre Entwürfe verlassen.

Jüngste Entwicklungen in der Web-Standards und Font-Formate machen es möglich, HTML-Text in Schriften außer den gleichen alten Standard-Schriftarten machen. Kommt in dem "@ fontface" CSS Decleration.

@ Fontface provids eine Lösung für die aktuelle Schriftart-Datei zu verknüpfen und rufen Sie sie aus dem Web. Verwenden von @ fontface können Designer-Schriftarten, ohne den Text als Hintergrundbilder verwenden einfrieren. Die Umsetzung ist sehr geradlinig, wie unten dargestellt, sondern als alle guten Dinge ein CON Teil müssen sie unterstützen nicht alle Browser eine einzige "Schriftart". Wenn Sie planen, in @ fontface Website verwenden mit Cross-Browser-Unterstützung benötigt werden, dann müssen Sie Quellen zu verschiedenen font-Typen derselben liefern.

1. TrueType - Ein Format, das gut aussehen auf dem Bildschirm. Besonders empfohlen für Windows-Browsern (Chrome).
2. OpenType (CFF) - Dieses Format ist besser für den Druck der Arbeit und sieht nicht immer gut unter Windows.
3. EOT - Sie benötigen dieses Format, wenn Sie Internet Explorer ausrichten möchten. IE wird nicht mit irgendwelchen anderen Format. Unsere EOT würde als die "Lite", da sie weder komprimiert noch Domain-eingeschränkt werden.
4. SVG - Das ist ein XML-Format von einigen Browsern einschließlich dem iPhone unterstützt.
5. WOFF - Das Cross-Browser, Web-only-Font-Format ist leicht (Font-Daten ist zip komprimiert) und kann entweder mit TrueType-oder PostScript (CFF) skizziert kompiliert werden. Es wird gegenwärtig von Firefox 3.6 unterstützt +.

Verwenden von @ fontface

  @ Font-face {
 font-family: 'CalligraphyFLFRegular';
 src: url ('CalligraphyFLF.eot');
 src: local ('CalligraphyFLF'), lokale ('CalligraphyFLF'), url ('CalligraphyFLF.woff') format ('WOFF'), url ('CalligraphyFLF.ttf') format ('TrueType'), url ('CalligraphyFLF . SVG # CalligraphyFLF ') format (' svg ');
 }
 @ Font-face {
   font-family: "Ihre Schrift";
   src: url ("fonts / font_filename.eot");
   src: local ("Alternate Name"), lokale ("AlternateName"),
     url ("fonts / font_filename.woff")-Format ("WOFF"),
     url ("fonts / font_filename.otf")-Format ("OpenType"),
     url ("fonts / font_filename.svg # font_filename")-Format ("SVG");
   }
 h2 {font-family: "Ihre Schrift", Georgia, serif;} 

Wie Sie aus dem obigen Beispiel zu sehen, um die gewählte Schriftart Schrift gehören, muss man sich auf einen Satz von fonttypes für das gleiche Schriftbild zu verknüpfen. Daher Leute bezeichnen es als "Font Kit".
Es gibt Font Kits zur Verfügung, die explizit erlaubt die Verknüpfung mit der CSS @ font-face-Eigenschaft, um es unter End User License Agreement (EULA).

Nützliche WebFont Ressourcen:

• Verfügbaren Schriftarten für @ font-face Einbettung Wiki-Seite bei http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Er ist ein renommierter Schrift-Designer, die hunderte von interessanten TrueType-Schriften frei verfügbar für den Einsatz im Web gemacht hat. Seine Schriften sind elegant, dekorativ und verspielt.
• Dieter Steffmann ist ein weiterer großer Schrift-Designer. Auch er hat viele schöne verfügbaren Schriftarten für jedermann zu benutzen gemacht.
• Font-Shop : Fonts bietet speziell für die Web-Nutzung ausgelegt. Mehr als 30 der erfolgreichsten FontFont Familien sind jetzt auch als Web FontFonts. FontShop hat auch eine detaillierte Anleitung WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Squirrel : Vitrinen, dass alle Schriften Font Squirrel bietet für den Einsatz mit @ font-face CSS-Einbettung. Font Squirrel bietet eine beeindruckende Menge an Typ, macht es einfach tot um ein herausgreifen, handlich und bietet "Kits" - die Schrift Ihrer Wahl, in verschiedenen Formaten, mit Demo-HTML & CSS verpackt, die sehr aktuelle @ font-face-Syntax verwendet . Sie bieten auch einen Weg, um Ihre eigene @ font-face-Kits machen . Wenn die Schriftart Sie verwenden möchten, wurde entsprechend (die, die mit dem Computer kommen, sind nicht unbedingt in Ordnung) lizenziert, produziert der Generator EOT, SVG, und hey! WOFF-Dateien.

Mit meinen begrenzten Fähigkeiten, die mit Werkzeugen wie Photoshop und Illustrator, kann ich ehrlich gestehen, dass ich ein besserer Entwickler, als ich ein Designer bin. Aber mein Hintergrund mit Kern (Server-Seite) Entwicklung mit Java / PHP / COBOL, war ein sehr positiver Einfluss auf meine UI-Entwicklung Fähigkeiten. Was ich meine ist, während der Erstellung meiner Entwürfe, dh immer wenn ich Design zu tun, ich darüber, wie das Design lässt sich am besten in HTML-CSS konvertiert werden und während Sie das HTML-CSS denke, gebe ich einen Gedanken über das Backend-Technologie und machen ziemlich sicher dass der HTML lässt sich einfach in XSL-Schleifen-oder PHP-Schnipsel usw. umgesetzt werden

Über Jahre hinweg, habe ich den Kopf auf den Entwürfen geworfen durch UI-Designer, die wahrscheinlich donot Ahnung, was HTML oder CSS ist. All diese Jahre habe ich gedacht, dass ich für zu viel verlangt, wenn ich nur erwarten, dass der Designer, der versucht, seine "unmöglich, Code"-Design in meine Kehle shov wird, um nur ein wenig, was sein Design umgewandelt werden würde verstehen in. DAS wäre richtig helfen?

Dann stieß ich auf dieses Thema liegt heute ... Web-Designer, die nicht können Code ... Danke Herr! Ich bin nur einer von vielen, die das gleiche fühlen ... Die oben artitle ist ein bisschen ein langatmig .. aber es lohnt sich lesen, jedes Wort davon.

Vielen Dank Elliot Jay Stocks ... Ich fühle mich erleichtert!

Hier einige Auszüge aus Elliots Artikel .

Wow, was für ein Tag! Es begann mit ein wenig Tweet und endete mit einer Diskussion, die über die gesamte Web-Design-Community zu kehren schien. Es scheint, gibt es einige sehr starke Meinungen zu dem Thema, ob Web-Designer sollten in der Lage, Code gehalten.
...
Also, bevor wir uns damit, erlauben Sie mir, schnell rekapitulieren, was ich an diesem Morgen sagte auf Twitter:

Ehrlich gesagt, ich bin schockiert, dass im Jahr 2010 ich komme noch über "Webdesigner", die nicht programmieren können ihre eigenen Entwürfe. Keine Entschuldigung.

... Ich hätte ein wenig mehr in meinem speziellen Tweet habe. Ich war über Designer, die nicht einmal die grundlegendsten HTML-und CSS-Fähigkeiten, um eine flache Bauweise zu einem wirklichen Ort drehen zu sprechen. Nicht Menschen, die absichtlich nicht wählen, um Code, diejenigen, die nicht können. Und ich bin auch nur bezogen auf Front-End-Code hier, natürlich ist es lächerlich zu glauben, dass die Designer auch erstaunlich Back-End-Programmierer sein ...

Wir bekommen 'web' Entwürfe in Illustrator, 300dpi geschickt, unmöglich, Code, keine Konsistenz / Usability.
~ Amy Mahon

Es wird spät, und ich habe, um diese irgendwie bis zu wickeln. Ich weiß, es wird viele, die mit mir nicht einverstanden sein, und meine Absicht ist nicht zu beleidigen oder verärgern Wer will, kann nicht Code, aber ich hoffe, dass einiges von dem was ich gesagt habe, einige der Punkte, die immer kommen, wenn Eintauchen in reflektiert Diese Debatte.

Am Ende des Tages, kann ich keine schlaflosen Nächte darüber, wer zu kodieren und wer nicht. Ich bin nur ehrlich überrascht, so viele Designer, die Front-End-Fähigkeiten fehlen, wie ich das war ein Ding der Vergangenheit dachte finden.

Auch die Kommentare lesen, gab es rund 320 Kommentare, wie ich schreibe ... sie sind lesenswert.
Bitte lesen Sie Elliots full post hier .. Web-Designer, die nicht programmieren können

Da der Radio-Button und der Text inline sind, so wird der Text selbst auf dem Boden des Radio-Button ausrichten, wird der Text angezeigt, der leicht unter dem Radio-Button sein.
Wenn Sie diese an die Spitze ausrichten möchten, müssen Sie, um das Radio und den Text in getrennten Behältern wie divs oder Spannweiten (gegebenenfalls) zu platzieren und sie kümmert sich um die Ausrichtung zu nehmen. Es wäre einfacher zu Tabellenzellen zu verwenden, von Designvorgaben es zulässt.

Das wird nicht gleich aussehen in jedem Browser, da jeder Browser zeigt Radios etwas anders, so dass es immer los ist, um Größen-Fragen sein, egal was du tust.