###
  • インターネット
  • プログラム
  • ゲーム
  • 問題点
  • ウィンドウズ
  • ソーシャルメディア
  • アンドロイド
  • iOS

    • HTML で美しいフォントを作成する方法: サイズ、色、HTML フォント タグ。 HTML ページ上のフォント、フォントの接続

    27.12.2023 フラッシュドライブとHDD

    次のプロジェクトでは、見出しとメニューが非標準フォントで再び表示されます。 写真で作る？ 最悪：ぎこちない、融通が利かない、遅い。 閃光？ 彼には我慢できない。 ジャバスクリプト？ もちろん、現時点では最善の解決策ですが、ブラウザの限界を思い出させる重要な解決策であることに変わりはありません。 標準が何を提供し、どこですでに機能しているのか、標準について詳しく調べる時が来ました。

    ノート

    対照的に、カスタム フォントは、ほとんどのサイト訪問者には見られない可能性が高いフォントです。

    タスク

    画像、JavaScript、フラッシュを使用せずにカスタム フォントを実装します。 の最新の進歩のみを使用します。

    解決

    しかし、IE の場合、それはそれほど単純ではありません。 サードパーティ フォントの実装をサポートしたのは初めてですが (Internet Explorer 4 バージョンがリリースされた 1997 年以来!!!)、フォントには特別な形式である EOT (Embedded OpenType) が必要です。 EOT フォーマットは、次の 2 つの問題を同時に解決します。

    • フォント ファイルを圧縮し、その重量を数分の 1 に小さくします (同僚のテストによると、この方法は RAR、ZIP、および gzip 方法よりも圧縮率が高くなります)。
    • ファイルを暗号化します。情報は、使用されるフォント ファイルに書き込まれます。 このフォントはこのアドレス以外では機能しません。

    その結果、フォントをスタイルに接続すると、次のハックのようになります。

    /* Internet Explorer のみ */ @font-face ( font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.eot); ) /* 他のすべてのブラウザ用 */ @ font-face ( font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.ttf); ) [...] h1 ( font-family: Scriptorama, arial; font-weight:普通; ）

    ハックの代わりに、 を使用できます。

    更新 23.08.11考えられる IE のバグとブラウザのサポートの強化を考慮した、より完全なフォント埋め込み構文:

    @font-face ( font-family: "Journal Regular"; src: url("journal-webfont.eot"); src: url("journal-webfont.eot?#iefix") format("embedded-opentype"), url("journal-webfont.woff") format("woff")、url("journal-webfont.ttf") format("truetype")、url("journal-webfont.svg#Journal Regular") format("svg" "); フォントの太さ: 通常; フォント スタイル: 通常; )

    ノート

    アップデート10.11.10 IEローカルでは動作しない可能性があります。 また、そのせいでフォントが全く接続できない場合もあります。 私たちのプロジェクトでは、この点に注意を払っています。機能しない場合は、IE ローカル用に単純に削除します。

    利点:

    • 柔軟性 - サイト所有者は任意のテキストを自由に変更できます。
    • 高速な読み込み速度 - 非標準フォントの任意の量のテキストを含む外部ファイルの最小数。
    • サイトの最大速度 - DOM 構造内の追加要素、サイトの速度を低下させるスクリプトや Flash オブジェクトはゼロです。
    • テキストはテキストのように動作します (結局のところ、テキストはテキストのままです)。 目立ち、色、太さ、スタイルなどの変化に対応する、理想的な SEO。
    • フォントの最適化を考慮した非常にシンプルな実装。

    欠点:

    フォントの圧縮と変換

    フォント開発者がすべての人を満足させようとした場合、フォントには非常に多くの文字が含まれる可能性が高く、それに応じて重さも非常に多くなります。 つまり、Arial Unicode MS フォントには 51,000 文字が含まれており、その重さは 23 メガバイトを超えています。 サイトでウドムルト語とフィン・ウゴル語のどちらを使用するかを考える時期が来ました。 また、さまざまな追加の記号、句読点、数字も含まれますか? 各フォントには、標準、斜体、太字、半太字などの特定の数のスタイルがあることにも注意する必要があります。 フォントには最大 9 種類の太字を含めることができます (許容値を覚えておいてください)。

    何をするか

    タスクを達成するために必要でないものはすべてフォントから除外します。。 たとえば、フォントがメニューにのみ使用される場合、句読点、さまざまな追加記号、数字は不要になります。

    実行する方法

    これには次のことが役立ちます。

    オンラインサービス @font-face ジェネレーター

    なにができる：

    • 2 つの操作モード: Easy - 深く掘り下げたくない人向け、Expert - 最大限の最適化を実現
    • さまざまな形式の結果が 1 か所にまとめられています。 それらの。 最初にすべてのブラウザに対して True Type を圧縮してから、IE に対して個別に EOT に変換する必要はありません。
    • 結果を取得するためのさまざまなオプション。 ローカルでの使用からフォントを保護したり、Cufon 用のファイルを保護したりできます。
    • 圧縮フォントの文字を正確に選択します。 言語と追加の文字のセットを指定したり、使用する文字の範囲を指定したり、単に必要な文字をリストしたり、すべての方法を併用したりできます。
    • CSSが苦手な人にとっては、スタイルルールさえ形成されます

    実験では、「メニューに使用」テスト タスクで 145Kb のフォントを圧縮しました。 小さなロシア語の文字だけを残しました。 最終的なフォント サイズは 8Kb でした。 すばらしい！

    欠点:

    • EOT は特定のドメインに関連付けられることなく生成されます (重大なプロジェクトの場合は、別途 EOT を実行する必要があります)
    • ライセンスを取得したすべてのフォントを処理できるわけではありません (これは相対的な欠点です)

    印象- 素晴らしい、素晴らしい、超一流、素晴らしい!!! 寄付をするために PayPal を取得します。

    ウェブフォントオプティマイザー

    必要な文字だけを残せるオンラインサービス。 作品。

    長所: シンプルでわかりやすい。 結果は、True Type 圧縮フォント、IE 用の EOT フォント、および接続用の CSS コードです。

    欠点としては、このサービスは、Web サイト上にある厳密に固定されたフォントのリストに対してのみ利用できることです。

    よこ糸

    マイクロソフト社のソフトウェア。 フォントを EOT に変換するのに役立ちます。 さらに、指定したサイト以外ではフォントを使用できなくなります。 スクリプト専用のページをダウンロードして、さらに詳しく知ることができます。

    TTF2EOT

    名前から、フォントを TTF から EOT に変換することは明らかです。 コマンドラインを介してローカルで動作しますが、それ自体は便利ではありません。 スクリプトをダウンロードして、プロジェクト Web サイトで詳細を読むことができます。

    オンラインフォントコンバーター

    使いやすく、ライセンスされたフォントを変換できます。 利用可能。

    デメリット：登録が必要。

    フォントの保護についてはどうですか?

    フォントの品質が高い場合は、高度な専門家、多くの場合専門家チームによって 1 か月以上かけて開発されます。 このようなフォントは、組立ラインで製造される「Zhiguli」と同じくらいのコストがかかります。 フォント開発者はフォントを商標として登録し始め、工業所有権保護のレベルでフォントに対する著作権所有者の権利を確保しました。

    それらの。 Web 上でフォントを使用するには、サイト所有者が Web 上で使用する権利のあるフォントを購入する必要があります。 しかし、買収が問題の半分です。 フォントは違法コピーから保護する必要もあります。 サイト上のライセンスされたフォントが画像付きまたは Javascript を使用して実装されている場合、このような問題はほとんどありません。 しかし、@font-face 経由で実装すると、フォントはサーバー上に公開され、誰でもダウンロードできるようになります。 そしてこれはすでに訴訟の脅威にさらされています。

    ノート

    何百万もの小規模なサイトでは、フォントの違法使用は問題なく通過する可能性があり、今後も影響を及ぼしませんが、クールで商業的なプロジェクト、特に国際的なプロジェクトは、ライセンスの購入を真剣に検討する必要があります。

    フォントを保護するにはどうすればよいですか?

    IE の場合、この問題はすぐに解決されました。EOT 形式でファイルが暗号化されます。 その結果、このサイト内でのみ機能するフォントができました。

    親愛なる皆さん、こんにちは！ この投稿では、レイアウトにおける次のような重要なポイントについて説明したいと思います。 非標準フォントの接続。 すべてのレイアウト デザイナーは、非標準フォントと「戦う」方法を見つけなければならないと私は信じています。そうしないと、デザイナーの空想は標準フォントで終わってしまいます。 PSD レイアウトの非標準フォントは私にとって常に問題でした。画像を使用するのは不便で、品質も悪くなります。 cufon のようなスクリプトを使用するのは実際には適切なオプションではありません。ドキュメントに示されているいくつかの点が私にとっては機能しなかったので、まったく気にしたくありません。

    最近、CSS ルール - @font-face を使用して、テンプレートから直接非標準フォントを含めることを使い始めました。 このアプローチにより、ユーザーのオペレーティング システムにフォントがインストールされていない場合でも、サイト テンプレートからフォントを直接読み込むことができます。

    CSSコードは以下のようになります。

    @font-face ( font-family: Arbat; /* CSS ルールのフォント名 */ src: local("Arbat"), /* ユーザーの OS にフォントが存在するかどうかを確認します */ url(fonts/Arbat. ttf); / * フォントがブラウザで見つからない場合は、指定されたパスにダウンロードします */ ) [...] h1 ( font-family: Arbat; /* このフォント名は必要な要素に指定できます*/)

    すべて問題ありませんが、この素晴らしいソリューションはクロスブラウザーではありません。 すべてのブラウザがこのフォントを正しく表示できるわけではありません。 問題は、すべてのブラウザが *.ttf 形式のフォントを理解できるわけではないということです。

    ブラウザごとにサポートされる形式のおおよそのリストは次のとおりです。

    サポートされているブラウザ フォーマット
    Internet Explorer 6 以降 EOT
    Mozilla Firefox 3.5 以降
    オペラ 10+
    クロム 4+
    サファリ 3.2+
    Opera モバイル 10+
    iOS 4.2以降
    アンドロイド2.2以上    		 OTFとTTF
    オペラ 9+
    クロム 4+
    サファリ 3.2+
    Opera モバイル 10+
    iOS
    アンドロイド3    		 TTFとSVG
    Internet Explorer 9
    Firefox 3.6以降
    オペラ 11+
    Google Chrome 6+
    サファリ5.1
    オペラモバイル 11+    		 WOFF

    この豊富な形式は、すべてのブラウザが最大限にサポートされているためです。 同時に、ブラウザーは、リストから理解できる最初のフォントをダウンロードします (正しい形式が指定されている場合)。 形式は、重みが大きい順に説明されています。 しかし、フォーマットにもかかわらず、 「ウォフ」まず一番簡単なのは - 「EOT」。 これは IE 6 ～ 8 での誤った表示を避けるために必要です。

    形式を指定する必要がありますか?

    宣言 "フォーマット"ブラウザが必要な形式をすぐに判断できるようにするために必要です。 それらの。 ロードするときは、必要な形式を選択するだけで、リストから理解できます。 形式を指定しないとどうなりますか? 形式を指定しないで、複数の形式が接続されている場合、ブラウザはすべての形式の読み込みを開始し、検索で目的の形式を並べ替えます。 したがって、複数のフォント形式を接続する場合、宣言を指定すると、 "フォーマット"必然的に！ 処理には時間がかかりますが、ここでは勝つことができることを忘れないでください。

    すべての形式を有効にするには、CSS コードは次の形式になります。

    @font-face ( font-family: "Arbat"; src: url("fonts/Arbat.eot"); /* IE6+ ブラウザのサポート用 */ src: url("fonts/Arbat.eot?#iefix") 形式("embedded-opentype"), /* IE8 でフォントを正しく表示するためのハック */ url("fonts/Arbat.woff") format("woff"), /* 最新のブラウザーの場合 */ url("fonts/Arbat.woff") ttf ") format("truetype"), url("fonts/Arbat.svg#arbat") format("svg"); font-weight:normal; font-style:normal; ) [...] h1 ( font - family: Arbat; /* このフォント名は必要な要素に指定可能 */ )

    したがって、この場合、ディレクトリ " フォント」 1 つのフォントの上記の形式をすべて保存する必要があります。 OS にフォーマットのみがインストールされている場合、どこで入手できますか - TTF? これを行うには、特別なフォント形式変換サービス (http://fontface.codeandmore.com) を使用します。 OS から必要なフォントをダウンロードし、大きな赤いボタン「@font-face キットが欲しい!」をクリックするだけです。 "すると、サービスは必要な形式のフォントのパッケージを数秒で生成します。

    注意！ このサービスは現在有料となっております。 このサービスは現在、サブスクリプションによって利用可能ですが、価格は象徴的です - 1か月です。 - 3ドル。

    すぐにデモを視聴したり、フォントとインデックス ファイルを含むアーカイブをダウンロードしたりするよう提案されます。

    このアーカイブをテンプレートの任意のディレクトリに解凍します (たとえば、fonts フォルダーを作成します)。 任意のテキスト エディタで拡張子 .html を持つファイル (私の場合は arbat.html ファイル) を開き、そこからフォント フェイス ルールをコピーして、スタイル ファイルに貼り付けます (「」を付けない場合のみ)。»).

    私のコードは次のとおりです。

    @font-face ( font-family: "Arbat"; src: url("arbat.eot"); src: url("arbat.eot?#iefix") format("embedded-opentype"), url("arbat" .woff") format("woff")、url("arbat.ttf") format("truetype")、url("arbat.svg#arbat") format("svg"); font-weight:normal; フォント-スタイル: 通常;)

    重要！フォント ファイルへのパスを正しいものに変更しないと、何も機能しません。

    H1 (font-family: Arbat; ) /* 例として、第 1 レベルの見出しを取り上げました */

    その他の Font-Face サービス

    代わりに、無料のフォントフェイス生成サービスを提案することもできます。

    それらは提供されているものよりも悪くありません。 複雑なことは何もなく、自分で理解できると思います。

    最後に、この方法の長所と短所をすべて述べておきたいと思います。

    利点:

    • 非標準フォントを使用しても、ページの読み込み速度が速い。
    • レイアウト設計者の作業の柔軟性により、テキストは問題なく変更できます。
    • これはテキストであり、画像やフラッシュなどではないため、鮮明な表示。
    • 必要な形式が生成されれば、実装は非常に簡単です。

    欠点:

    • さまざまな形式を使用した場合でも、この方法はすべてのブラウザーでサポートされているわけではありません。 各ブラウザには多くのバージョンがある可能性があることを忘れないでください。
    • 一部のフォント ファイルは非常に重く、数メガバイトになる場合があり (これは解決できますが)、これはページの読み込み速度に大きな影響を与える可能性があります。
    • フォントがロードされている間、ユーザーには、たとえ一瞬であっても標準フォントが表示されます (ここではフォント サイズによって異なります)。
    • 場合によっては、軽微なバグが発生する可能性があります。マウスをホバーすると色が歪みます (Safari、Chrome、Opera)。
    • フォントには著作権所有者がいる可能性があり、この場合は簡単に盗むことができます。

    一般に、使用する非標準フォントを接続する方法はユーザーが決定します。 このオプションは個人的には合っています。

    さて、非標準フォントの接続について言いたかったのはこれだけです。 コメントでの返答をお待ちしています。 皆さんお元気で！ 次の投稿でお会いしましょう...

    本格的で興味深いレイアウトを作成する多くのデザイナーは、ユニークで美しいフォントを大量に用意しています。 このようなフォントのおかげで、デザインに熱意と独自性が生まれます。 ただし、標準以外のフォントは、そのフォントがすでにインストールされているコンピュータにのみ表示されるため、それらを適切に操作するには、デザイナーがレイアウトで使用するすべてのフォントを提供する必要があります。 レイアウトをレイアウトするときに、これらのフォントをコンピュータにインストールする必要があるためです。 ただし、サイトのユーザーはすべてのフォントをダウンロードしたり、コンピュータにインストールしたりするわけではないため、ブラウザ自体が必要なフォントを取得できるようにする必要があります。 このルールはここで役立ちます。Cufon を使用するか、Google Webfonts または Fontsquirrel からフォントを読み込むオプションもありますが、Google Webfonts と Fontsquirrel には必要なフォントがない可能性があるため、@font-face を使用して固有のフォントを接続するという最良のオプションを検討しましょう。

    フォントを接続する最も簡単な方法は、スタイル シートにフォントを記述することです。

    @font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.ttf"); ) body( font-family: "PF Din CompPro", Arial, sans-serif ; ）

    ここで、「PF Din CompPro」はフォントの名前です。サイトの必要な要素にこのフォントを指定できます。また、fonts/pfdintextcomppro-medium-webfont.ttf は、フォント内にあるフォントへのパスです。フォルダーを作成する場合、フォント ファイルの名前にスペースが含まれていないことが重要です。スペースをダッシュ​​に置き換えることをお勧めします。

    これは最も簡単な方法ですが、すべてのブラウザで機能するとは限らず、これは大きな問題です。

    各ブラウザは独自のフォント形式をサポートしています。
    TrueType Firefox 3.5 以降、Opera 10 以降、Safari 3.1 以降、Chrome 4.0.249.4 以降のフォント
    EOT Internet Explorer 4 以降のフォント
    WOFF Firefox 3.6 以降、Internet Explorer 9 以降、Chrome 5 以降のフォント
    SVG iPad および iPhone 用のフォント

    したがって、.ttf 形式のフォントの 1 つから、形式を変えて同じフォントをさらにいくつか作成する必要があります。 ここで、fontsquirrel.com のフォント ジェネレーターが役に立ちます。 このページで、フォントをダウンロードし、最適設定を選択し、ダウンロードしたフォントの合法性を確認するチェックボックスをオンにして（一部のフォントは高額なため、使用するには許可が必要です）、「キットをダウンロード」ボタンをクリックします。すべてのフォント形式を含む希望のアーカイブを受け取ることができます。

    アーカイブから、フォントのすべての形式をダウンロードします。理論的には、これらは拡張子 .eot、.svg、.ttf、および .woff を持つ 4 つのファイルです。これらのファイルを Web サイトのフォント フォルダーにコピーします。アーカイブには、ファイル stylesheet.css - 含まれています フォントを接続するためのすべてのルールがすでに書き留められています。それらをスタイル シートに安全にコピーできます。ただし、フォント ファイルへのパス (たとえば、fonts フォルダー) を指定することを忘れないでください。 。 私のサイトの 1 つで起こったことの例:

    @font-face ( font-family: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.eot"); src: url("fonts/pfdintextcomppro-medium-webfont.eot?#iefix" ) format("embedded-opentype")、url("fonts/pfdintextcomppro-medium-webfont.woff") format("woff")、url("fonts/pfdintextcomppro-medium-webfont.ttf") format("truetype" ), url("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") format("svg"); font-weight:normal; font-style:normal; ) body( font-family: "PF Din CompPro",エリアル、タホマ、ベルダナ、サンセリフ; )

    これらのパラメータを使用すると、フォントは、誰もが好む IE-7、8、9 を含むあらゆるブラウザで表示されます。

    キリル文字、つまりロシア語の文字に非標準フォントを使用しており、そのフォントがサイトで正しく表示されない場合は、詳細設定でフォントを生成すると解決する場合があります。http://www.fontsquirrel.com のページをダウンロードしてください。 /tools/webfont-generator でフォントを開き、「エキスパート」設定を選択します。 そこにはたくさんの設定があります。私もすべてを知っているわけではありませんが、注意深く読んで必要な設定を選択し、キリル文字をサポートするには、サブ設定ブロックを選択して、カスタム サブ設定... セクションを選択し、キリル チェックボックスをオンにします。必要な言語と形式も確認してください。

    これが私が得たものの例です:

    フォントはウェブサイトのデザインにおいて大きな役割を果たします。 同じテキストを異なるフォントで書くと、人にまったく逆の印象を与える可能性があります。

    自分で見て：

    より説得力があるように見えるフォントもあれば、より興味をそそられるフォントもあります。

    しかし、フォントをサイトに接続して、好きな場所で使用するにはどうすればよいでしょうか?

    この記事では私が 3つの方法を紹介しますを使用すると、最も多様で非標準的なフォントを Web サイトに接続できます。 また、WordPress、Joomla、Drupal、Open Cart など、どの CMS を使用するかは関係ありません。

    フォントをサイトに接続するのに複雑なことは何もないことがわかります。

    次のことを学びます:

    方法その1。 フォントを WordPress サイトにすばやく接続する (難易度: ⭐ ⭐ ⭐)

    プレミアム デザイン テーマが Web サイトにインストールされている場合は、2 分でフォントを接続できます。

    例えば：

    記事タイトルのフォントを変更したいと考えています。 このために：

    1. 管理パネルで、「テーマ オプション」セクションに移動します。 テンプレートによっては、このセクションの呼び方が少し異なる場合がありますが、意味は常に同じ「テーマ設定」です。

    2. 「タイポグラフィ」セクションに移動します。

    3. フォントを変更する要素 (見出し、段落) を選択します。

    サイトが別のエンジンで実行されている場合、またはテーマにそのような設定が提供されていない場合は、次の方法に進みます。

    方法その2。 Google Fontsの力を活用する
    (難易度: ⭐ ⭐ ⭐ ⭐)

    Google Fontsについて聞いたことがありますか? つまり、700 種類以上のフォントを Web サイトに接続できるサービスです。

    ステップ 1. サービスの公式 Web サイトにアクセスします。

    ステップ 2. Google フォント コレクションから自分に合ったものを見つけます。 右側のメニューでは、フォントの言語、スタイル、人気を指定して円を絞り込むことができます。

    サービスがロシア語をサポートするフォントを表示するには、言語項目でキリル文字を選択します。

    ステップ 3. あなたが Roboto フォントが好きだと想像してみましょう。 「+」アイコンをクリックします。

    「+」アイコンをクリックすると、フォントを追加できます。

    ステップ 4. この後、選択したフォントを含むカートを展開する必要があります。

    [カスタマイズ] タブに移動すると、スタイルと言語を選択できます。 スタイルに関しては、標準セット (標準 (400)、斜体 (400 斜体)、太字 (700)、および斜太字 (太字 700 斜体) を選択することをお勧めします。

    ただし、太字スタイル (見出し用) のみが必要な場合は、これのみを選択します。

    選択するスタイルの数が増えるほど、ダウンロードされるファイルが重くなることに注意してください。

    サイトの読み込み速度の低下を避けるために、選択するフォント スタイルはできるだけ少なくしてください。

    ステップ 5. 「埋め込み」セクションに戻り、「@IMPORT」タブを選択します。 次に、「@import」を含むコード行をコピーし、サイトの CSS ファイルの最初の行に貼り付けます。

    WordPress サイトをお持ちの場合、CSS ファイルはおそらくここにあります。 wp_content/主題/"あなたのテーマ"/css/...ほとんどの場合、CSS フォルダー内に Fonts ファイルがあり、そこに Google から埋め込みコードを移動する必要があります。

    サイトがどの CMS で実行されているかは関係ありません。コードを貼り付けるだけですべてが完了します。 👌

    フォントを最初にロードし、その後で他のすべてをロードする必要があるため、CSS ファイルの先頭にフォント接続コードを配置します。

    同じ CSS ファイル内で特定の Web サイト要素のフォントを定義できます。

    例えば：

    すべての段落に Roboto フォントを与えるには、次のように書きます: p ( font-family: Roboto;)

    方法その3。 CSSを使用したカスタムフォント接続 (難易度: ⭐ ⭐ ⭐ ⭐ ⭐)

    十分なスキルがある場合は、CSS を使用して自分でフォントを含めるのが最善の策です。 この場合、フォントはサーバー上の特別なフォルダーに配置されます。 しかし、まずそれらをどこかで入手する必要があります。

    Web サイト用の Web フォントを入手できる場所

    Webフォントを使用するには特別なライセンスを購入する必要があることをご存知ですか?

    無料ライセンスでフォントを接続します。 それらを見つける最も簡単な方法は、Fontsquirrel サービスを使用することです。これを実行します。

    ステップ1.サービスの公式Webサイトにアクセスします

    ステップ 2. 右側のメニューの「言語」セクションで、「キリル文字」を選択します。

    ステップ 3. 適切なフォントを見つけます。 スタイルの数に注目してください。

    たとえば、4 つのスタイルがある場合、4 つのスタイルが書き込まれます。

    フォント スタイルの指定 - 標準 (400/標準)、斜体 (斜体)、太字 (700/太字)、太字斜体 (700 斜体)。

    ステップ 5. フォント名をクリックして、設定ページに移動します。

    ステップ 6. 「Webfont Kit」セクションに移動します。 すべてのフォント形式を選択し、「@FONT-FACE KIT をダウンロード」をクリックします。 使用できる形式が 1 ～ 2 つだけの場合は問題ありません。

    フォントを接続するには @Font-face を使用します

    @font-face ディレクティブを使用して、1 つまたは複数のフォントをサイトに接続できます。 しかし、この方法には長所と短所があります。

    長所:

    • CSS を通じて、ttf、otf、woff、svg などのあらゆる形式のフォントを接続できます。
    • フォント ファイルはサーバー上に配置されます。サードパーティのサービスに依存する必要はありません。

    マイナス点:

    • フォントを正しく接続するには、スタイルごとに個別のコードを記述する必要があります。
    • CSS を理解していないと、簡単に混乱してしまう可能性があります。

    完成したコードと値を指定する必要がある場所をコピーするだけです。

    ステップ 1. ダウンロードしたフォント ファイルを Web サイトに転送します。 これは、ホスティング コントロール パネルまたは FTP 経由で実行できます。

    CSS ファイルと同じディレクトリにフォント フォルダーを作成することをお勧めします。 すべてのフォント ファイルをこのフォルダーに移動します。

    ステップ 2. CSS ファイルの先頭に次のエントリを書き込みます。

    @フォントフェイス(
    フォントファミリー: "MyWebFont";
    src: url("../fonts/WebFont.eot");
    src: url("../fonts/WebFont.eot?iefix") format("eot"),
    url("../fonts/WebFont.woff") format("woff"),
    url("../fonts/WebFont.ttf") format("truetype"),
    url("../fonts/WebFont.svg#webfont") format("svg");
    フォントの太さ: 通常;
    フォントスタイル: 通常;
    }

    ここで、MyWebFont はフォントの名前で、src プロパティの値 (引用符内のデータ) はフォントの場所 (相対リンク) です。 各スタイルを個別に指定する必要があります。

    最初に標準スタイルを有効にするため、font-weight プロパティと font-style プロパティを標準に設定します。

    ステップ 3. イタリック体を追加する場合は、次のように記述します。

    @フォントフェイス(
    フォントファミリー: "MyWebFont";
    src: url("../fonts/WebFont-Italic.eot");
    src: url("../fonts/WebFont-Italic.eot?iefix") format("eot"),
    url("../fonts/WebFont-Italic.woff") format("woff"),
    url("../fonts/WebFont-Italic.ttf") format("truetype"),
    url("../fonts/WebFont-Italic.svg#webfont") format("svg");
    フォントの太さ: 通常;
    フォント スタイル: イタリック体。
    }

    すべてが同じですが、font-style プロパティに値を斜体にしただけです。

    ステップ 4. 太字スタイルを有効にするには、次のコードを追加します。

    @フォントフェイス(
    フォントファミリー: "MyWebFont";
    src: url("../fonts/WebFont-Bold.eot");
    src: url("../fonts/WebFont-Bold.eot?iefix") format("eot"),
    url("../fonts/WebFont-Bold.woff") format("woff"),
    url("../fonts/WebFont-Bold.ttf") format("truetype"),
    url("../fonts/WebFont-Bold.svg#webfont") format("svg");
    フォントの太さ: 太字;
    フォントスタイル: 通常;
    }

    ここで、font-weight プロパティを太字に設定します。

    各スタイルのフォント ファイルの正しい場所を指定することを忘れないでください。

    ステップ 5. 太字の斜体スタイルを追加するには、次のように入力します。

    @フォントフェイス(
    フォントファミリー: "MyWebFont";
    src: url("../fonts/WebFont-Italic-Bold.eot");
    src: url("../fonts/WebFont-Italic-Bold.eot?iefix") format("eot"),
    url("../fonts/WebFont-Italic-Bold.woff") format("woff"),
    url("../fonts/WebFont-Italic-Bold.ttf") format("truetype"),
    url("../fonts/WebFont-Italic-Bold.svg#webfont") format("svg");
    フォントの太さ: 太字;
    フォント スタイル: イタリック体。
    }

    まあ、それだけです :) これで、Web サイトに 4 つのフォント スタイルが追加されました。

    ただし、注意点が 1 つあります。フォントのこの接続は Internet Explorer 8 ブラウザでは正しく表示されません。

    異なる CMS 上のサイトのフォントを接続する方法

    サイトがどのエンジン (WordPress、Joomla、Drupal、Opencart) 上にあるかは関係ありません。CSS ファイルにアクセスできる場合は、Google Fonts を介してフォントを接続するか、Fontsquirrel を介してサーバーにフォントをアップロードすることでフォントを接続できます。

    OK、もう終わりです。 この記事が他のウェブマスターにとって役立つと思われる場合は、ソーシャル ネットワークで共有してください。

    そして：

    ニュースレターを購読する有益で興味深いブログ投稿を見逃さないようにします。

    「ペイント」フォントを要求する気まぐれな顧客に遭遇したことがありますか? それとも、スタイリッシュなテーマの Web サイトを作成しているだけで、カスタム テキストの書き込みにより作成者のアイデアが強調されますか? この問題を解決する方法の 1 つを考えてみましょう。

    必要なとき

    まず、標準以外のフォントが必要となる最も正当なケースを見てみましょう。

    • おしゃれなメニュー。
    • スタイリッシュなヘッダー.
    • ロゴ。ロゴを作成することは深刻な問題であり、このテーマについて多くの本が書かれ、専門家が長い間この問題を研究してきました...そして著者は人々のパンを奪うことはせず、自分の2セントを注ぎ込みます。 ロゴがテキストの場合、高品質の SEO 最適化のために、ロゴは TEXT として表示される必要があります。

    タスクは、非標準フォント、つまり、インターネット リソースのユーザーがかなりの確率で利用できないフォントを使用することです。

    ソリューション

    ほとんどの場合と同様、どのようなタスクにも複数の解決策があり、私たちのタスクも例外ではありません。 行く：

    • 写真。 設定の柔軟性はなく、ページの読み込み速度は低下し、サーバーの負荷は増加し、SEOはまったく問題になりません。
    • 閃光。 追加ファイルをダウンロードする必要があり、Flash エディターのスキルが必要です (ここでテキスト パラメーターを変更することもできます)。SEO は平均的です。
    • JS. 追加の外部ファイル (およびそれに付属するすべてのもの)、平均的な SEO、テキストはコピーできません。
    • CSSを使用したカスタムフォント

    武士の真の道、あるいは「CSS万歳」

    CSS ルール @font-face は、この問題の解決に役立ちます。これにより、特定のフォントをドキュメントにロードし、その設定を定義できるようになります。

    @ font-face ( font-family: AlexBrush- Regular; src: local("AlexBrush- Regular" ) , url("./AlexBrush- Regular.otf " ) ; )

    したがって、選択したフォントが訪問者の OS に存在する必要がなくなります。

    このタイプのデザインでは、TrueType (ttf) フォントと OpenType (otf) フォントを接続できます。

    面白い： OpenType は TrueType よりも優れたプリプレス機能を備えており、より小さいファイル サイズでより多くの文字セットをサポートします。

    このトピックは閉じてもよいように思えますが、1 つだけ問題があります...私たちの「特別な」友人、つまり IE ファミリーのブラウザーを思い出してください。 IE でカスタム フォントを実装するには、フォントが Embedded OpenType (eot) 形式である必要があります。

    IE の機能が害を及ぼすよりも良い効果をもたらす唯一のケースではありません。 実際のところ、eot 形式は次のことを意味します。

    • 暗号化。 プロジェクトのアドレスに関するデータがファイルに入力されるため、攻撃者がフォントを盗んで Web サイトにアップロードすることはできません。
    • 圧縮。 フォント ファイルは圧縮されているため、ダウンロード時間が短縮されます。

    上記を考慮して、例を変更してみましょう。

    @ font- face ( font- family: AlexBrush- Regular; src: local("AlexBrush- Regular " ) , url(./ AlexBrush- Regular. eot) ; ) @ font- face ( font- family: AlexBrush- Regular; src : local("AlexBrush-レギュラー" ) 、 url("./AlexBrush-レギュラー.otf " ) ; )

    実際の経験から、バグを修正しブラウザによる認識を向上させるためにこの例を改善する必要があることがわかりました。

    @font-face ( font-family: "AlexBrush- Regular" ; src: url("AlexBrush- Regular.eot" ) ; src: url( 「AlexBrush- Regular.eot?#iefix」) format("embedded-opentype" ) , url( 「AlexBrush- Regular.svg#Journal Regular」) フォーマット("svg" ) ; url("AlexBrush-Regular.woff" ) format("woff" ) , url("AlexBrush- Regular.otf " ) format("truetype" ) , )

    重要！！！

    1. 柔軟性。 テキスト設定の設定と変更は簡単です。
    2. スピード。 ロードする追加フ​​ァイルの最小数は、js や Flash の同じ数の要素のようにページの速度を低下させることはありません。
    3. SEO。 テキストはテキストのままです - 利点は明らかです。
    4. この例は、IE4、Op、Fx3.5、Cr2、Sa1 以降のブラウザで動作します。
    5. フォントを使用する前に、フォントを最適化する必要があります (あとがきを読んでください)。
    6. 購入したフォントを使用する場合は、その安全性について心配する必要があります。
    7. 通信チャネルの帯域幅が小さい場合、フォント ファイルがロードされるまで、ユーザーには非標準フォントの代わりに単純なフォントが表示されるか、まったく表示されません。

    あとがき。

    フォントの最適化

    キャラクター セットを作成するとき、開発者は、できるだけ広範囲のターゲット ユーザーにリーチするために、キャラクター セットに最大限の機能を詰め込もうとします。 これに基づいて、文字、数字、句読点、追加のアイコン、さまざまな種類のスタイル、あらゆる範囲のフォントの太さの値などを入力します。

    このような取り組みの結果、フォント ファイルは数十 MB を超える場合があります。 そんな多様性が必要なのでしょうか？ 結局のところ、ピリピリした文体のタッチを与えるために、（状況に応じて）句読点やさまざまな記号が必ずしも必要というわけではありません。 実際には、必ずしも異なるスタイルが必要なわけではありません。 あるいは、Web サイトを RuNet 向けに厳密に最適化しているとします。ラテン語を使わなくても大丈夫です...

    さて、あなたはすでに要点を理解しています。 フォントを最適化する必要があります。

    • 実際の問題の解決に役に立たないコンテンツはすべて削除されます。
    • ファイルを必要な形式に変換します。

    どうやってするの？ インターネット上には、font-face Generator、Online Font Converter、Web Font Optimizer など、必要な操作を実行できるサービスが多数あります。

    保護

    高品質な機能フォントの開発には多くの時間がかかり、そのため多額の費用がかかります。 購入した (合法的に) フォントはすべて登録されており、知的財産を構成します。

    フォントを購入すると、そのフォントを Web 上で使用する権利が得られますが、そのフォントが攻撃者によってリソースからダウンロードされた場合、開発者に生じた損害についてサイトの所有者が責任を負います。 フォントを保護するにはどうすればよいですか?

    IE では、すべてが考え抜かれており、eot 形式の保護がすでに組み込まれています。 他のすべてのブラウザについては、明確な解決策はまだありません。

    もちろん、新たな開発も行われています。たとえば、eot と同様に保護の問題が取り除かれた WOFT 形式ですが、残念ながら、まだブラウザーでの完全なサポートを誇ることはできません。

    フリーフォントをそのまま適用することもできます。