素晴らしいアイコンと CSS 特殊フォントの使い方_html/css_WEB-ITnose

最初のブログ投稿として、これを書いているときに吹き飛ばされそうになっています、分かった、ナンセンスな話はやめましょう

昨日プロジェクトでこれらの Awesome アイコンをたくさん見つけて、オンラインで Font Awesome も検索しましたこれらのファイルをダウンロードしました。

現在のバージョンは 4.2 です。Font Awesome はバージョン 4.1.0 以降、IE7 をサポートしなくなりましたが、IE7 を検討する必要がある場合は、次の解決策があります。

まず、cssファイルを変換します 以下のファイルを当プロジェクトのcssフォルダにコピーし、にOrsonアイコンのCSSスタイルを導入すれば導入されることは間違いありません。圧縮版か非圧縮版かは気分次第です

ie7 の圧縮版もありますが、このファイルがないところもあるので注意してください。直接インポートすることもできます

CDNを使用してインポートすることもできます。公式Webサイトで紹介されています。

次に、アイコンの使用についてはあまり説明する必要はありません。これは、クラスを見つけるための Orson アイコンの Web サイトに相当します。フロントは必須であり、次のクラスはアイコンに対応するクラスです。

3、プロジェクトを確認します。 最も厄介なのはアイコンです。 。 。 。コンソールを確認してください

フォント フォルダー内のフォントが見つからないというエラーが大量に報告されています。実際、なぜこのエラーが発生するのでしょうか。わかりません

Awesome の CSS ファイルを導入したプロジェクトが自動的に fonts フォルダーを検索するはずです。ここで、fonts フォルダーをプロジェクトに導入します (フォルダーをプロジェクトに直接コピーし、フォルダー名は変更しないでください)。 . 昨日、フォントがフォントに変更されました。私は長い間このような簡単なものを探していました)

OK。 。アイコンは正常に表示されました。厄介な問題は、フォントに対応するフォルダーをインポートする必要があることです

CSS 特殊フォントの使用方法

さて、上記のアイコンの問題は解決しました。特殊なフォントを に導入してみましょう。 Web ページのメソッドを使用するだけです

特別なフォントの導入は @font-face ステートメントに依存します。これらのフォントのブラウザーのサポートは、IE6/IE4 までサポートされていますが、これは非常に優れています。互換性の問題については考慮しません。

メイン形式は 4 つ (.eot、.woff、.svg、.ttf)、なぜそれらが異なるブラウザーに表示されるのでしょうか? あまり詳しく説明しません。さまざまなものを紹介します

1、YourWebFontName: ダウンロードしたフォント名

2、source: この値は、相対パスまたは絶対パスを指定できます。 、形式: この値は、カスタマイズしたフォントの保存パスを指します。フォントの形式、つまり上記の 4 つの形式は、さまざまなブラウザーが識別するのに役立ちます。

4. 太さとスタイル: フォントの太さとスタイル。

わかりました。 。 。 たとえば、raphaelicons フォントをダウンロードし、ダウンロード後に fonts フォルダーを作成します

2 つの txt テキストは考慮されません。4 つのフォントがあります。現在、4 つのフォントが CSS スタイルに導入されています

1 @font-face{2     font-family: 'Raphaelicons';3     src:url('fonts/raphaelicons-webfont.eot')format('eot');4     src:url('fonts/raphaelicons-webfont.svg')format('svg');5     src:url('fonts/raphaelicons-webfont.woff')format('woff');6     src:url('fonts/raphaelicons-webfont.ttf')format('truetype');7     font-weight: normal;8     font-style: normal;9 }

祝う 。 。 フォントがスタイルに正常に導入されました。構造を見てください

1 <div class="st-desc" data-icon="H"></div>

注: 特殊なフォントを使用するには、data-icon="" を使用してアイコンを定義する必要があります。対応する H は、ダウンロードしたフォントのアイコンになります。 CSS スタイルを定義します

非常に重要な手順は、スタイルでフォント フォントファミリー「Raphaelicons」を使用することです。スタイルは表示されません

定義された H で美しいアイコンが表示されます 素晴らしいことがわかりました。 。

他の特殊フォントの導入も同様で、まず @font-face でフォントを導入し、data-icon でフォントを定義し、data-icon スタイルを定義し、フォント Ouka を使用します。 。 。