フォントアイコンまたはカスタムフォント(テキストのみ)の使用方法
2805 ワード
@font-faceとは何か、cssでどのように使用するか.
@font-faceはCSSルールで、特定のフォントがアクセス者のコンピュータにインストールされていなくても、自分のフォントを入力してWebサイトに表示することができます.このルールが最も重要なのは、デザイナーのために新しい世界を開いたことです.好きなフォントを使ってもいいです.どうしてそれは素晴らしいの?
私が言ったように、@font-faceは新しい世界を開きました.今では、新しい方法でレイアウトを使用することができます.これは、このようなユニークなWebサイトのフォントレイアウトのWebデザイン要素とより高い統合度を見た理由です.
さらに、ソリューションとして、画像上の文字を使用すると、検索エンジンが@font-faceの使用方法を最適化するのに役立つカスタムフォントが示されています.
次の文法は@font-faceの使い方です.まず、新しいフォントが提供する名前と説明のフォントを定義します.
@font-face { font-family: DeliciousRoman; src: url(‘http://www.font-face.com/fonts/delicious/Delicious-Roman.otf’); }
そしてそれを引用します.
p { font-family: DeliciousRoman, Helvetica, Arial, sans-serif; }
そうです.
前の例では外部ソースを使用します.ただし、フォントファイルがサーバにある場合は、以下の方法を参照してください.
@font-face { font-family: DeliciousRoman; src: url(’…/Delicious-Roman.otf’); }
また、他にも3つのフォント属性があります.知っておくべきです.まずfont-stretchです.設定できるフォントは引っ張られ、「normal」はデフォルトです.また、フォントのスタイルがあり、フォントを斜めまたは斜体にします.最後に、フォントの重さ、最後のフォントは太字で、自分で設定することができます.
@font-face { font-family: DeliciousRoman; src: url(’…/Delicious-Roman.otf’); font-stretch: condensed; font-style: oblique; font-weight: bold; }
推奨
フォントレンダリングは、特に古いモバイルブラウザでは厄介なことです.常にテストすべきで、できるだけ多くのデバイスをサポートすることができます.問題を発見するスピードは速ければ速いほどいい.
最後に、多くの異なるフォントを使用すると、Webサイトのロードに時間がかかる可能性があります.ブラウザの互換性
すべてのブラウザが@font-faceをサポートしているわけではありません!
現在、@font-faceのサポート
これはあなたがIE 9以下のブラウザをサポートしていないと言うのでしょうか.心配しないでください.古いブラウザで@font-faceを使用するとき、異なるブラウザで特定のフォントファイルをサポートします.
@font-faceのリソースFont Squirrel
Font Squirrelは素晴らしいサイトで、よく知っているはずです.Font Squirrelは、良質なビジネスで使用される無料フォントをダウンロードします.最も重要なのは、@font-faceのキット部分と@font-faceのキットジェネレータがあります.Font Squirrelツールパッケージは、異なるフォントタイプを提供し、各ブラウザをサポートする必要があります.@font-faceのキット
Font Squirrelのスイート部分は、複数のフォントフォーマット、CSS、HTMLコードのセットを含む既存のツールパッケージです.フォントを選択し、キットをダウンロードし、これは簡単です.最も重要なのは、巨大なフォントに満ちた大きな選択があることです.
@font-faceのキットジェネレータ
一方、ツールパッケージジェネレータは、必要なすべてのコードを提供する独自のフォントをアップロードします.フォントに新しいツールパッケージを作成したからです.あなたがしなければならないことは、新しいスイートをダウンロードし、Webサイトにアクセスすることです.それは簡単ですただし、独自のフォントを使用する場合は、すべてのフォントの著作権が許可されていないことを確認してください.
Googleフォント
GoogleフォントはGoogleのAPIです.Webサイトで使用するフォントのセットを選択する必要があります.すべてのフォントは無料で、オープンソースです.彼らの選択はかなり大きく、多くの偉大なフォントが含まれています.また、好きなものを自由に選ぶこともできます.フォントを選択すると、コードクリップが表示され、Webサイトに貼り付けられます.Googleでは、CSSをラベルにインポートするなど、異なるコードを選択できます.
Googleのフォントといえば、使いやすいサービスに違いありません.あなたが知っておくべきことは、選択したフォントがWebサイトのロード時間に与える負荷を教えてくれます.TypeKit
TypeKitは別のサービスで、フォントの集合があります.彼らは有料サービスですが.彼らは@font-faceの実現を容易にすることに力を入れてきた.彼らの価格は公平なようで、多くの人がそれを使っています.彼らは雄大な集合の偉大なフォントを持っているので、あなたが使用することができます.彼らのサービスを利用すれば、心配しないでください.彼らはあなたの世話をしています.また、多くのフォントメーカーと協力して、最新の、最高のフォントを提供します.
@font-faceはCSSルールで、特定のフォントがアクセス者のコンピュータにインストールされていなくても、自分のフォントを入力してWebサイトに表示することができます.このルールが最も重要なのは、デザイナーのために新しい世界を開いたことです.好きなフォントを使ってもいいです.どうしてそれは素晴らしいの?
私が言ったように、@font-faceは新しい世界を開きました.今では、新しい方法でレイアウトを使用することができます.これは、このようなユニークなWebサイトのフォントレイアウトのWebデザイン要素とより高い統合度を見た理由です.
さらに、ソリューションとして、画像上の文字を使用すると、検索エンジンが@font-faceの使用方法を最適化するのに役立つカスタムフォントが示されています.
次の文法は@font-faceの使い方です.まず、新しいフォントが提供する名前と説明のフォントを定義します.
@font-face { font-family: DeliciousRoman; src: url(‘http://www.font-face.com/fonts/delicious/Delicious-Roman.otf’); }
そしてそれを引用します.
p { font-family: DeliciousRoman, Helvetica, Arial, sans-serif; }
そうです.
前の例では外部ソースを使用します.ただし、フォントファイルがサーバにある場合は、以下の方法を参照してください.
@font-face { font-family: DeliciousRoman; src: url(’…/Delicious-Roman.otf’); }
また、他にも3つのフォント属性があります.知っておくべきです.まずfont-stretchです.設定できるフォントは引っ張られ、「normal」はデフォルトです.また、フォントのスタイルがあり、フォントを斜めまたは斜体にします.最後に、フォントの重さ、最後のフォントは太字で、自分で設定することができます.
@font-face { font-family: DeliciousRoman; src: url(’…/Delicious-Roman.otf’); font-stretch: condensed; font-style: oblique; font-weight: bold; }
推奨
フォントレンダリングは、特に古いモバイルブラウザでは厄介なことです.常にテストすべきで、できるだけ多くのデバイスをサポートすることができます.問題を発見するスピードは速ければ速いほどいい.
最後に、多くの異なるフォントを使用すると、Webサイトのロードに時間がかかる可能性があります.ブラウザの互換性
すべてのブラウザが@font-faceをサポートしているわけではありません!
現在、@font-faceのサポート
Firefox
Opera
Chrome
Safari
Internet Explorer 9
これはあなたがIE 9以下のブラウザをサポートしていないと言うのでしょうか.心配しないでください.古いブラウザで@font-faceを使用するとき、異なるブラウザで特定のフォントファイルをサポートします.
IE ：EOT
Mozilla ：OTF，TTF
Safari ：OTF，TTF，SVG
：OTF，TTF，SVG
Chrome ：TTF，SVG
@font-faceのリソースFont Squirrel
Font Squirrelは素晴らしいサイトで、よく知っているはずです.Font Squirrelは、良質なビジネスで使用される無料フォントをダウンロードします.最も重要なのは、@font-faceのキット部分と@font-faceのキットジェネレータがあります.Font Squirrelツールパッケージは、異なるフォントタイプを提供し、各ブラウザをサポートする必要があります.@font-faceのキット
Font Squirrelのスイート部分は、複数のフォントフォーマット、CSS、HTMLコードのセットを含む既存のツールパッケージです.フォントを選択し、キットをダウンロードし、これは簡単です.最も重要なのは、巨大なフォントに満ちた大きな選択があることです.
@font-faceのキットジェネレータ
一方、ツールパッケージジェネレータは、必要なすべてのコードを提供する独自のフォントをアップロードします.フォントに新しいツールパッケージを作成したからです.あなたがしなければならないことは、新しいスイートをダウンロードし、Webサイトにアクセスすることです.それは簡単ですただし、独自のフォントを使用する場合は、すべてのフォントの著作権が許可されていないことを確認してください.
Googleフォント
GoogleフォントはGoogleのAPIです.Webサイトで使用するフォントのセットを選択する必要があります.すべてのフォントは無料で、オープンソースです.彼らの選択はかなり大きく、多くの偉大なフォントが含まれています.また、好きなものを自由に選ぶこともできます.フォントを選択すると、コードクリップが表示され、Webサイトに貼り付けられます.Googleでは、CSSをラベルにインポートするなど、異なるコードを選択できます.
Googleのフォントといえば、使いやすいサービスに違いありません.あなたが知っておくべきことは、選択したフォントがWebサイトのロード時間に与える負荷を教えてくれます.TypeKit
TypeKitは別のサービスで、フォントの集合があります.彼らは有料サービスですが.彼らは@font-faceの実現を容易にすることに力を入れてきた.彼らの価格は公平なようで、多くの人がそれを使っています.彼らは雄大な集合の偉大なフォントを持っているので、あなたが使用することができます.彼らのサービスを利用すれば、心配しないでください.彼らはあなたの世話をしています.また、多くのフォントメーカーと協力して、最新の、最高のフォントを提供します.