カスタムCSSフォントをデザインとまったく同じようにレンダリングするには

Question

本当に素晴らしいデザイナーと仕事しています。彼らのデザインを翻訳する際に、なぜ私たちは非システムフォントをそのデザインに描かれているように正確にレンダリングしないのか、私に尋ねています。ごく最近の例では、この質問に添付された画像で示すことができる（赤い注釈を無視する）：

を、私は私が新しいフォントを利用することを可能にする、などがJavaScriptでfonts.comからフォントを使用しています私のCSSの家族。

a）「Lorem ipsum ...」よりもはるかに大胆ですが、「努力している」という説明文に注意してください。フォントは "Droid Serif W01 Italic"です。

b）右側の「MEET ONE」が「COMMERZBANK」よりはるかに大胆であることに注意してください。フォントファミリは "UniversLTW01-57Condense 723821"です。

font-weight：normalと指定しました。それでも、いくつかのコンピュータではまだ物事が大胆に見えます...そして、それはあなたがいるOSとブラウザによって異なるようです。これらのフォントの重量を審美的に満足できるように変更する唯一の方法は、斜体または縮約版（存在する場合）のような別のフォントファミリを選択することです。しかし、しばしば、私はまだすべての異なるOSとブラウザの組み合わせで適切にレンダリングするための重みを得ることができません。

あなたはどのようにこれらの問題に対処していますか？ビューアのオペレーティングシステムやブラウザに関係なく、デザインに描かれているようにフォントを正確にレンダリングするためのテクニックはありますか？

Answer 1

私の経験から、Web上のフォントレンダリングは、Photoshopや他のデザインツールと同じくらい良いものではありません。これは通常、このような問題につながります。

Photoshopでは、デザイナーは「シャープ」、「クリスプ」、「スムース」、「強」などの「余分な」設定を使用できます。これらのすべての変形は、フォントレンダリングをはるかに良くします。これらの属性は、開発者として私たちには利用できません。

すべてのブラウザで異なる方法で実装されているフォントのアンチエイリアスになります。すべてのブラウザで同じ方法でフォントをレンダリングすることは不可能です。これは、最も一般的なサイズの画面で良好なアンチエイリアスを持つように設計されているため、Web用に特別に作成されたフォントのみを使用する理由です。

しかし、いくつかのトリックを試すことができます。私は経験はほとんどありませんが、うまくいけば私のバックグラウンドの答えとこれらのリンクは、あなたにこの複雑な問題の詳細を見つけるためのインスピレーションを与えるでしょう。

私にとっては、左側の画像は古典的なアンチエイリアス問題のように見えます。右の写真、私はそれほど確かではありません。ほとんどの場合、別のフォントのように見え、サイズは適切にレンダリングするのに十分な大きさでなければなりません。

あなたはより多くを読みたい場合は、うまくいけば、彼らは役に立つことができ、これらのリンクをチェックアウト：

Does CSS support text anti-aliasing such as "crisp, sharp etc" yet?

How to do font antialiasing in web page?

Webfont Smoothing and Antialiasing in Firefox and Opera

http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/

Answer 2

「の@ font-をface CSS at-ruleでは、テキストを表示するオンラインフォントを指定できます彼らのウェブページに。作成者が独自のフォントを提供できるようにすることで、@ font-faceは、ユーザーが自分のコンピュータにインストールしたフォントの数に制限を加える必要がなくなります。 AT-ルールする@ font-faceがで規則CSSの最上位レベルではなく、任意のCSS条件付きグループ内だけでなく、使用することができる。」-MDN

@font-face { 
    [font-family: <family-name>;]? 
    [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]? 
    [unicode-range: <urange>#;]? 
    [font-variant: <font-variant>;]? 
    [font-feature-settings: normal|<feature-tag-value>#;]? 
    [font-stretch: <font-stretch>;]? 
    [font-weight: <weight>]; 
    [font-style: <style>]; 
    } 

https://developer.mozilla.org/en-US/docs/CSS/@font-face

そのありません

Answer 3

私は同じ問題を抱えていましたが、ここですでに説明した優れた情報は複製しません。アンチエイリアスとCSSはちょうどいいです私はタイプフェイスのファウンドリやライセンスが物事にどのように取り入れることができるかに触れたいと思っていました。

PC側では、fonts.comやTypekitのようなwebfontサービスの現実は、通常、著しく悪い結果を意味します。それはブラウザに関係なくです。

ウェブフォントサービスを使用している場合、そのサービスがフォントの埋め込みをどのように処理しているかわかりません。しかし

、あなたは、this article has an good tip to improve rendering on Chrome for Windows.

販売ファウンドリの例（またはGoogle Webfontsをウェブの使用状況に合わせて最適化し、それはあなたが直接フォントの埋め込みは自分でファイルを制御することができます購入することができますのフォントを使用している場合無料埋め込みフォントは、FontSpring、MyFonts、Commercial Typeなどです。

Hoefler Typeは、PC上で美しくレンダリングする独自のフォントサービスをデビューしました。フォントを直接ホストしたり埋め込んだりしないという意味で、fonts.comやTypekitに似ています。 Webフォントの一般的な問題に対処するために、これまでにないレベルに達しました。彼らはフォントウェイトの規模を調整し、個々のブラウザの展開をカスタマイズしました。他の多くのファウンドリと同様、今のところ、自分の書体しか購入できないという制限があります。

これらの複雑さのために、私たちは通常、プロジェクトの早い段階で個々の書体のウェブ使用のオプションを検討します。個人的な経験と高いレベルの研究から

Answer 4

は、私はあなたがsIFR（スケーラブルなインマンフラッシュ交換）や書体（http://typeface.neocracy.org:81/）とCufon（http://cufon.shoqolate.com/generate/）のような純粋なJavaScriptの選択肢のいずれかを使用して快適な結果を達成するために近くに来ることができることを見出しました。私はしばらくの間Cufonを使用していましたが、私はあなたが現在探している結果に近づける最も簡単で効果的な方法であることがわかりました。まだ解決策が見つからない場合に役立ちます。