ITを表現する

CSSは、今年10歳の存在を完了！ CSSを使用してパンを（またはしない）収入、しばらくの間、回避されている人、あなたは私たちがフォントの良い選択のために飢えてされたか知ってかもしれません。 さらにフォントの欠如とでているようなデザイナーはCSS禅の庭は彼らの設計にいくつかの正義を行うための追求にフォントを置き換えるためにCSSの背景画像を利用してきました。 我々はまた、Flash / JavaScriptの®ハック私たちの設計目標を達成しようとしています。 決してこれは我々が我々のWebデザインに希望のフォントを取得するために間違った方法ですが、間違いなく、それが最も望ましい方法ではありません。 長年にわたってWebデザイナーは、私のように、完全に彼らの設計のための10かそこらのフォントに頼ってきた。

Web標準とフォントフォーマットの最近の進展は、同じ古いデフォルトフォント以外の書体でHTMLテキストをレンダリングすることが可能になります。 "@ fontface" CSSのdeclerationにしています。

@ FontFaceは実際のフォントファイルにリンクし、Webから取得するためのソリューションをprovids。 @ FontFaceを使用して、設計者は背景画像としてテキストを凍結することなく、フォントを使用することができます。 以下に示すように、実装は、非常にまっすぐ進むですが、すべての良いものがそれにCONの部分を持っているとして、すべてのブラウザでは、単一の" フォントタイプ " をサポートしています。 あなたは、クロスブラウザのサポートを必要とすると、サイト内の@ FontFaceを使用することを計画している場合、あなたは同じの様々なフォントの種類のソースを提供する必要があります。

1. TrueTypeフォント -画面上の見栄えするように設計形式。 Windowsのブラウザ（クローム）には特にお勧めします。
2. OpenTypeフォント（CFF） -この形式は、印刷作業のために良いですし、常にWindows上で良く見えません。
3. EOT -あなたは、Internet Explorerをターゲットにしたい場合にこの形式を必要としています。 IEは他のフォーマットを使用することはありません。 彼らはどちらも圧縮しないでも、ドメイン制限されているので、私たちのEOTのは、 "ライト"とみなされます。
4. SVG -これはiPhoneを含むいくつかのブラウザでサポートされているXMLフォーマットです。
5. WOFF -これは、クロスブラウザは、Webのみのフォントの書式（フォントデータはZIP圧縮されます）軽量で、TrueTypeまたはPostScript（CFF）の概説のいずれかでコンパイルすることができます。 これは、現在のFirefox 3.6でサポートされています+。

@ FontFaceを使用して、

 の@ font-face {
フォントファミリー： 'CalligraphyFLFRegular';
 SRC：URL（ 'CalligraphyFLF.eot'）;
 SRC：ローカル（ 'CalligraphyFLF'）、ローカル（ 'CalligraphyFLF'）は、url（ 'CalligraphyFLF.woff'）フォーマット（ 'WOFF'）は、url（ 'CalligraphyFLF.ttf'）フォーマット（ 'TrueTypeフォント'）は、url（ 'CalligraphyFLF 。SVG＃CalligraphyFLF '）フォーマット（の' svg '）;
 }
の@ font-face {
  フォントファミリ： "あなたの書体";
   SRC：URL（ "フォント/ font_filename.eot"）;
   SRC：ローカル（ "代替名"）、ローカル（ "Alternatename"）、
     URL（ "フォント/ font_filename.woff"）フォーマット（ "WOFF"）、
     URL（ "フォント/ font_filename.otf"）フォーマット（ "OpenTypeフォント"）、
     URL（ "フォント/ font_filename.svg＃font_filename"）フォーマット（ "SVG"）;
   }
 H2 {フォントファミリー： "あなたの書体"、グルジア、セリフ;} 

あなたが選択したフォントの書体を含めるには、上記の例からわかるように、人は同じ書体のfonttypesのセットにリンクする必要があります。 したがって、人々は、 "フォントキット"としてそれを参照してください。
明示的にエンドユーザーライセンス契約（EULA）の下でそれにCSSの@ font-faceプロパティでリンクできます。利用可能なフォントキットがあります。

便利なWebFontリソース：

• @ font-faceの埋め込 ​​みできるフォントでwikiページhttp://webfonts.info/wiki/index.php?title=Main_Page
  
• レイLarabie 。 彼はウェブ上で使用するために自由に利用できる興味深いTrueTypeフォントの数百を行った有名なフォントデザイナーです。 彼のフォントは、優雅な装飾、遊び心があります。
• ディーターSteffmannは別の偉大なフォントデザイナーです。 彼は、あまりにも、使用する人のための多くの美しいフォントが利用可能になりました。
• フォントショップは ：ウェブの使用のために特別に設計されたフォントを提供しています。 最も成功したFontFontの家族の30以上は現在のWeb FontFontsとしてご利用いただけます。 FontShopはまた、詳細なWebFontのユーザーガイドがありますhttp://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdfを
  
• フォントリスは ：フォントリスはの@ font-face CSSの埋め込 ​​みで使用するために提供しているすべてのフォントを紹介しています。 フォントリスは、型の印象的な量を提供する1つを選択するのは簡単それは死んだになり、手近に "キット"を提供 - お好みの書体、いくつかの形式で、デモのHTML＆CSSに同梱非常に現在の@ font-face構文を使用します。 。 彼らはまた、方法を提供独自の@ font-faceキットを作るの 。 使用する書体（お使いのコンピュータに付属しているものが必ずしも良いものではありません）適切にライセンスされている場合は、ジェネレータは、EOT、SVGを生成し、ちょっと！ WOFFファイル。

PhotoshopやIllustratorなどのツールを使って私の限られたスキルセットで、私は正直なところ私はデザイナーの私よりその私は優れた開発者に告白することができます。 しかし、Java / PHP / COBOLでコア（サーバ側）の開発と私の背景には、私のUI開発スキルに非常に肯定的な影響を与えた。 私はデザインを作成中であり、何を意味するか、私はデザインを行うすなわちたびに、私はHTML-CSSをしながら、デザインが最高のHTML-CSSに変換する方法を考え、私は、バックエンド技術についての思考を与えると合理的に確認してくださいHTMLは簡単にXSLループやPHPスニペットなどに実装することができます

長年にわたり、私はおそらくdonot HTMLやCSSとは何か手がかりを持っているのUIデザイナーがデザインに頭をスローしています。 これらすべての年私は私はちょうど私の喉デザイン彼の "コードに不可能"をshovしようとしているデザイナーが、彼のデザインが変換されるものだけを少し理解することが予想される場合、私はあまりを求めるだろうと考えてきましたに。 それは正しい助けるでしょうか？

その後、私はこのポストは本日...出くわしコーディングすることはできませんWebデザイナー ...ありがとう主！ 私はちょうど同じを感じる多くの人々の一人です...上記artitleは、ビット長ったらしいです。.. しかし、読み取り、それのすべての単語価値があります。

エリオットジェイの株式をありがとう...私はホッと！

ここからの抜粋ですElliots記事が 。

うわー、何の日！ それは1つの小さなつぶやきから始まり、全体のWebデザインコミュニティを越えて掃引するように見えた議論で終わった。 それは、Webデザイナーは、コードにできるようにするかどうかの対象に開催されたいくつかの非常に強い意見があるが表示されます。
...
我々はこの中に取得する前に、私はすぐに私がTwitterで、この朝に言ったことを要約することができます：

正直なところ、私は2010年に、私はまだ自分のデザインをコーディングすることはできません "ウェブデザイナー"を越えて来ていることにショックを受けています。 弁解の余地はありません。

...私は私のつぶやきでもう少し具体的してきたはずです。 私は、実際のサイトにフラットなデザインを回すためにも、最も基本的なHTMLとCSSのスキルを持っていないデザイナーは話していた。 意図的にコードにないことを選択しない人、誰ができないもの。 そして私もここのフロントエンドコードにのみ参照しているが、もちろんそれは、設計者はまた、驚くべきバックエンドのプログラマであるべきだと考えるのはばかげて...

我々は、コードに無理イラストレーター、300dpiので送られた "ウェブ"のデザイン、ない一貫性/使いやすさを取得します。
〜エイミー·マオン

それが遅くなってきた、私は何とかこれを包むようになってきました。 私は私に反対する多くの人々もあるでしょうし、私の意図がコードすることはできません誰でも気分を害するか、動揺することはありませんが、私が言ったことのいくつかは掘り下げるときは、常に出てくるいくつかの点を反映していることを願ってこの議論。

一日の終わりに、私は可能なコードとすることはできません上の任意の睡眠を失うことはありません。 私はただ純粋に私は、これは過去のものだと思ったように、フロントエンドのスキルを欠いているので、多くのデザイナーを見つけて驚いています。

私が書くとしてもコメントを読んで、周りに320のコメントがあったが、...続きを読む価値がそれらは。
Elliots完全なポストをここで読んでください.. コーディングすることはできませんWebデザイナー

ラジオボタンとテキストがインラインであるため、そのテキストはラジオボタンの下に自分自身を合わせますが、テキストは、ラジオボタンの下にわずかにあるように見えます。
あなたはこれらの上に整列するには、div要素またはスパンのような別の容器に、ラジオやテキストを配置する必要があります（必要に応じて）、彼らは整列の世話をします。 それはあなたのデザインを簡単に、あまりにも、表のセルを使用する方が簡単だろう、それを可能にします。

これは、すべてのブラウザが若干異なる無線が表示されますので、あらゆるブラウザで同じように見えないので、いつもあなたが何をすべきかに関係なくサイズの問題がないようになるだろう。