3

おそらくデザイン分野に関連する基本的な質問がありますが、それでもそれは Web プログラミングです。

Web アプリケーションで Palatino-Linotype フォントを使用する必要があるとします。それを自分の Web ページ アプリケーションにうまく埋め込むにはどうすればよいですか?

私の既知の方法:
1) font.com にアクセスして、すべての種類のパラティーノ ライノタイプ (ノーマル、ボールド、イタリック、イタリック ボールド) を購入します。4 つの異なるファイル。
2) 次に、fontface スタイルを介してフォントを読み込みます

@font-face {
    font-family: "Palatino-Linotype-normal";
    src: "..."
}
@font-face {
    font-family: "Palatino-Linotype-italic";
    src: "..."
}

3) AI には 4 つの異なるフォントがあります。HTML マークアップでは、要素のフォントを明示的に設定して、要素を太字、斜体、または斜体-太字にする必要があります (これは私が最も気に入らないことです)。

質問:
1) カスタム Web フォントを使用するワークフローはありますか?
2) 親要素に 1 つのフォントのみを設定し、内部セットのみに style="font-style: italic;" を設定するという点で、このフォントを通常のフォントとして扱う方法があるかもしれません。それらを斜体にしたい場合。
3) パフォーマンスに関する質問ですが、Web フォントのレンダリング速度は通常のフォントのレンダリングと異なりますか?

4

4 に答える 4

4

一般にブラウザでサポートされている論理的な方法は、次のように、各書体を個別のルールで宣言することです。

@font-face {
    font-family: foobar;
    src: url("foobar-regular.woff");
}
@font-face {
    font-family: foobar;
    font-style: italic;
    src: url("foobar-italic.woff");
}

次に、、、、およびその他のマークアップを介して直接または間接的に宣言font-family: foobarして使用します。これにより、デフォルトのレンダリングがイタリック体になります。font-style: italic<i><em>

明らかな方法でコードを簡略化しました。当然、ブラウザで認識されるように、通常はフォントをさまざまな形式で使用できるようにする必要があります。

FontSquirrelのようなサービスは異なるコードを生成しますが、生成するコードを修正するか、コードを最初から作成するのはかなり簡単です。

「PalatinoLinotype」はダウンロード可能なフォントとして合法的に使用できないため、意図的に「foobar」を使用しました。「PalatinoLinotype」は使用していません。少なくともこれは、他の方法で証明されるまで推定されるものです。（フォントを違法に配布または販売しているサイトはWeb上にたくさんあります。）

于 2012-11-30T17:04:25.630 に答える
3

Fontsquirrel http://www.fontsquirrel.com/をチェックしてください。複数のブラウザーで互換性のあるフォントと css:s を生成するのに役立ちました。

于 2012-11-30T14:22:32.733 に答える
2

Palatino Linotype Normalのみを使用し、CSSで太字に変更した場合、PalatinoLinotypeBoldと同じ結果は得られません。ここで重要なのは、それを実現するためにブラウザーレンダリングが使用され、それが非常に困難になるということです。つまり、私にとってもおそらくあなたにとっても同じように見えるでしょうが、デザイナーにとってはそうではありません:)

また、1つのフォントには、通常の太字や斜体よりも多くのフォントがあります。ライト、セミライト、ブラックなどがあります。そして、デザイナーはそれらを頻繁に使用する傾向があります。

したがって、一般に、最初と2番目の質問では、スタイルごとに異なるフォント面を使用し、スタイルごとに異なる面を使用する方法がない場合は、別のフォントファミリの表示が必要です。

3つ目は、埋め込みフォントのパフォーマンスが問題です。しかし、ほとんどの場合、レンダリングが原因ではなく、フォントファイルのダウンロードが重いためです。したがって、必ずそれらをキャッシュし、必要なものだけを使用してください。たとえば、前の回答のhttp://www.fontsquirrel.com/は、実際にはデフォルトでダウンロードされるファイルが多すぎるため、さまざまな形式と何を埋め込む必要があるかを少し調べてみてください。

于 2012-11-30T14:28:18.650 に答える
0

あなたはPalatinoを使用しています-あなたのウェブアプリケーションでLinotypeフォントはグーグルからのウェブフォントを使用します。 https://developers.google.com/webfonts/docs/webfont_loader

Web Font Loaderは、Google WebFontsAPIが提供するよりもフォントの読み込みをより細かく制御できるJavaScriptライブラリです。Webフォントローダーを使用すると、複数のWebフォントプロバイダーを使用することもできます。これは、GoogleとTypeキットによって共同開発されました。

詳細については、私のブログへのリンクをたどってください： http : //webtemplatesmonster.blogspot.in/2013/02/how-to-use-font-face.html

 @font-face {   font-family: 'Awesome Font';   src:
       url('awesome-font.eot');  /* IE9 Compat Modes */   src:
       url('awesome-font.eot?#iefix') format('embedded-opentype'), /*
       IE6-IE8 */
                url('awesome-font.woff') format('woff'), /* Modern Browsers */
                url('awesome-font.ttf')  format('truetype'), /* Safari, Android, iOS */
                url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */  }
于 2013-02-06T11:34:06.770 に答える