ホームページ  >  記事  >  ウェブフロントエンド  >  スプライトとフォントアイコンのCSS実装

スプライトとフォントアイコンのCSS実装

不言
不言オリジナル
2018-05-08 16:24:032223ブラウズ

この記事は主にスプライトとフォントアイコンを実装するためのCSSの関連知識を紹介しています。非常に優れており、必要な友人は参照できます

過去には、各画像。リソース これらはすべて独立した画像です。ブラウザが Web サイト内の異なる Web ページにアクセスすると、これらの画像を繰り返し取得するため、リソースに何度もアクセスする必要があります。 リソースへのアクセス数を減らすために、よく使用される複数の画像が 1 つの画像に収集されます (Web ページのキャッシュ メカニズムにより、既存のローカル リソースが省略されます。このリソースが以前に取得されていた場合、後で再度アクセスされることはありません)。キャッシュされたリソースが期限切れになるまで。 [意味は、遊園地に行くのと似ています。すべてのゲームをプレイできるチケットもあれば、すべてのゲームをプレイできるチケットもあります。わざわざチケットを何度も購入する必要はありません】)。

よく使用される複数の画像を 1 つの画像に集めた後、この画像を背景画像として設定し、background-position を使用して画像のさまざまな部分を表示します。

例:

次は 26 文字のアルファベットです。この画像を使用して GOOGLE を綴ります

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        p{
            display:inline-block;
        }
        p:first-child{
            width:79px;
            height: 79px;
            background-image:url(&#39;abcd.jpg&#39;);
            background-position:-396px 0;
        }
        p:nth-child(2){
            width:82px;
            height: 82px;
            background-image:url(&#39;abcd.jpg&#39;);
            background-position:-326px -98px;
        }
        p:nth-child(3){
            width:82px;
            height: 82px;
            background-image:url(&#39;abcd.jpg&#39;);
            background-position:-326px -98px;
        }
        p:nth-child(4){
            width:79px;
            height: 79px;
            background-image:url(&#39;abcd.jpg&#39;);
            background-position:-396px 0;
        }
        p:nth-child(5){
            width:48px;
            height: 77px;
            background-image:url(&#39;abcd.jpg&#39;);
            background-position:-81px -101px;
        }
        p:nth-child(6){
            width:48px;
            height: 77px;
            background-image:url(&#39;abcd.jpg&#39;);
            background-position:-286px 0;
        }

    </style>
</head>
<body>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</body>
</html>

結果:

に示すように上の例では、複数の画像を 1 つの大きな画像に配置し、background-position を使用して見たいコンテンツをキャプチャできます。

実際には、多くの背景画像でこのテクノロジーが使用されています。

たとえば、JD.com ロゴ:

JD.com のいくつかの小さなアイコン:

フォント アイコン:

ご存知のとおり、ユニット フォントのファイル サイズは画像のサイズより小さいと考えてください。スプライト画像は 1 つずつ処理されます。 写真、誰かが素晴らしいアイデアを思いつきました。写真をフォントに変換するというものです (実際、フォントはもともとそのように設計されていました)。 フォントに変換した後、特別なコードを使用して指定した写真を表示できます。

フォント アイコンはスプライトよりも明らかな利点があります。フォントであるため、フォントの色とフォント サイズを (歪みなく) 変更できるからです。

例: [以下は使用方法のみを示しており、フォントアイコンの作成方法ではありません]

icomoon を使用してフォントアイコンのセットを作成し、[icoon には既製のアイコンの選択があります]、それをダウンロードしました。以下にファイル名を示します。

style.css はフォント アイコンを使用する方法を提供できます

demo.html はフォント アイコンを使用する 2 番目の方法を提供します。

次に、次を使用します:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style >
    /* 声明字体  这下面一堆文字在下载的文件夹中的css文件中*/
        @font-face {
      font-family: &#39;icomoon&#39;;
      src:  url(&#39;fonts/icomoon.eot?ni3k5c&#39;);
      src:  url(&#39;fonts/icomoon.eot?ni3k5c#iefix&#39;) format(&#39;embedded-opentype&#39;),
        url(&#39;fonts/icomoon.ttf?ni3k5c&#39;) format(&#39;truetype&#39;),
        url(&#39;fonts/icomoon.woff?ni3k5c&#39;) format(&#39;woff&#39;),
        url(&#39;fonts/icomoon.svg?ni3k5c#icomoon&#39;) format(&#39;svg&#39;);
      font-weight: normal;
      font-style: normal;
        }
        /* 使用 */
        [class^="icon-"], [class*=" icon-"] {
          /* use !important to prevent issues with browser extensions that change fonts */
          font-family: &#39;icomoon&#39; !important;
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          /* Better Font Rendering =========== */
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        .icon-home:before {
          content: "\e900";
        }
        .icon-image:before {
          content: "\e90d";
        }
        .icon-music:before {
          content: "\e911";
        }
        p{
            font-family:&#39;icomoon&#39;;/* 要与上面一致 */
        }
    </style>
</head>
<body>
    <p class=".icon-imagee"></p> 
    <!-- 第一种使用方式:
    导入style.css文件,并使用指定图标的类选择器的属性作为对应的class属性值
     -->
    <p></p> <!-- 第二种使用方式:
    对标签进行字体声明,然后打开demo.html复制那个图标下来【左边一个代码,右边一个图标】
     -->
     <!-- 第一种方法是使用::before来增加,我们也可以使用别的::before方式来添加 -->
</body>
</html>

関連する推奨事項:

CSS を使用してブックマークパターンの効果を実現します

以上がスプライトとフォントアイコンのCSS実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。