7

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

ここに画像の説明を入力

JavaScript インクルード経由で fonts.com のフォントを使用しています。これにより、css で新しいフォント ファミリを利用できます。次の 2 点に注意していただきたいと思います。

a) 左側にある説明テキスト「...への取り組み」が「Lorem ipsum ...」よりもはるかに太字になっていることに注意してください。フォントは「Droid Serif W01 Italic」。

b) 右側では、「MEET ONE」が「COMMERZBANK」よりもはるかに太字になっていることに注意してください。フォントファミリーは「UniversLTW01-57Condense 723821」です。

font-weight:normal を確認しました。それでも、一部のコンピューターではまだ大胆に見えます...そして、使用しているOSとブラウザーによって異なるようです. これらのフォントの太さを見た目に美しい方法で変更できる唯一の方法は、斜めバージョンや圧縮バージョン (存在する場合) など、フォント ファミリの別のバリエーションを選択することです。しかし、多くの場合、OS とブラウザーのすべての異なる組み合わせで適切にレンダリングするための重みを取得できません。

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

4

4 に答える 4

6

私の経験から、Web でのフォント レンダリングは、Photoshop やその他のデザイン ツールでのレンダリングほど優れていないことが常にわかります。これは通常、このような問題につながります。

Photoshop では、デザイナーは「シャープ」、「クリスプ」、「スムーズ」、「ストロング」などの「追加」設定を使用できます。これらのバリアントはすべて、フォントのレンダリングをより良くします。ただし、これらの属性は開発者には利用できません。

すべては、すべてのブラウザーがさまざまな方法で実装するフォントのアンチエイリアスに帰着します。すべてのブラウザーで同じ方法でフォントをレンダリングすることは不可能です。これが、Web 用に特別に作成されたフォントのみを使用する理由です。これらのフォントは、最も一般的なサイズの画面で適切なアンチエイリアシングが行われるように設計されているためです。

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

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

詳細を読みたい場合は、次のリンクをチェックしてください。役立つことを願っています。

CSS は「くっきり、くっきり」などのテキスト アンチエイリアシングをまだサポートしていますか?

Web ページでフォントのアンチエイリアシングを行う方法は?

Firefox と Opera での Web フォントのスムージングとアンチエイリアス

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

于 2013-03-24T02:48:24.340 に答える
2

「@font-face CSS @-rule を使用すると、作成者は Web ページにテキストを表示するオンライン フォントを指定できます。作成者が独自のフォントを提供できるようにすることで、@font-face は、ユーザーが所有する限られた数のフォントに依存する必要がなくなります。 @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

完璧な解決策ではありませんが、なりたい自分に近づくことができるかもしれません。

于 2013-03-24T02:56:21.530 に答える
1

個人的な経験と高レベルの調査から、sIFR (Scalable Inman Flash Replacement) または Typeface ( http://typeface.neocracy.org:81/ ) やキュフォン ( http://cufon.shoqolate.com/generate/ )。私はしばらく Cufon を使用してきましたが、現在求めている結果に近づくための最も簡単で効果的な方法だと思います。まだこれらの解決策に出くわしていない場合に役立つことを願っています.

于 2015-03-14T04:58:49.817 に答える