14

アイコン付きの CSS ボタンを使用していますが、画像はありません。アイコンは、Unicode 値を使用して生成されます。
これで、一部のブラウザーが一部の unicode 値をサポートしていないという問題に直面しました。したがって、適切なアイコンの代わりに、不要なシンボルが表示されます。

どのブラウザーでも Unicode のサポートを提供するには、どのような手順に従う必要がありますか?

4

3 に答える 3

3

Unicode をサポートするブラウザはすべて、すべての文字コードをサポートしますが、すべてのフォントがすべての Unicode 文字のグリフを備えているわけではありません。

したがって、必要な文字のサポートを得るには、それらの文字を含むフォントを、すべての異なるオペレーティング システムで使用される形式でダウンロードする必要があります。

于 2012-08-20T14:47:12.117 に答える
2

Icomoon アプリなどのツールを使用して独自のフォントを作成できます。

Icomoon アプリでは、次の各操作を行うことができます。

  • いくつかの一般的なアイコン フォントから 1 つまたは複数のアイコンを取得します
  • アイコン フォントだけでなく、通常のフォントの場合もある他のフォントをアップロードします。
  • 利用可能な任意の数のフォントから任意の数のアイコンを組み合わせる
  • 必要な文字の UNICODE 16 進値を設定します
  • 作成したフォント セットをエクスポートおよび/または保存する

Icomoon アプリを使用して、絵文字絵文字フォントを作成したり、プロジェクトごとにカスタム アイコン フォントを作成したりしました。

CSS にアイコン フォントを含めるには、次のコードを含めることができます。

@font-face {
    font-family: 'myfont';
    src:url('fonts/myfont.eot?-td2xif');
    src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
        url('fonts/myfont.woff?-td2xif') format('woff'),
        url('fonts/myfont.ttf?-td2xif') format('truetype'),
        url('fonts/myfont.svg?-td2xif#myfont') format('svg');
    // Different URLs are required for optimal browser support
    // Make sure to :
    // 1) replace the URLs with your font's URLs
    // 2) replace `#myfont` with the name of your font
    font-weight: normal; // To avoid the font inherits boldness
    font-style: normal; // To avoid font inherits obliqueness or italic
}

.icon {
    font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
    speak: none; // To avoid screen readers trying to read the content
    font-style: normal; // To avoid font inherits obliqueness or italic
    font-weight: normal; // To avoid the font inherits boldness
    font-variant: normal; // To avoid the font inherits small-caps
    text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
    line-height: 1; // To avoid the font inherits an undesired line-height
    -webkit-font-smoothing: antialiased; // For improved readability on Webkit
    -moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}

HTML でアイコンを使用するには、次のいずれかを実行できます。

<!-- Method 1 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts  -->
<!-- This means that regular characters are default. Icons are a fallback  -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<div class="rate"><p>I rate this movie ★★★★☆!!</p></div>

<!-- Method 2 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family for an entire HTML element -->
<!-- Define your icon fonts in your CSS font-family after your regular fonts  -->
<!-- This means that regular characters are default. Icons are a fallback  -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<div class="rate"><p>I rate this movie &#9733;&#9733;&#9733;&#9733;&#9734;!!</p></div>

<!-- Method 3 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts  -->
<!-- This means that icons are default. Regular characters are a fallback  -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie <span class="icon">★★★★☆&lt;/span>!!</p>

<!-- Method 4 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons but not the HTML elements that include them -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts  -->
<!-- This means that icons are default. Regular characters are a fallback  -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie <span class="icon">&#9733;&#9733;&#9733;&#9733;&#9734;</span>!!</p>

<!-- Method 5 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts  -->
<!-- This means that icons are default. Regular characters are a fallback  -->
<!-- Use UTF-8 characters directly in your HTML for improved human readability -->
<p>I rate this movie
    <span class="icon">★&lt;/span>
    <span class="icon">★&lt;/span>
    <span class="icon">★&lt;/span>
    <span class="icon">★&lt;/span>
    <span class="icon">☆&lt;/span>
    !!
</p>

<!-- Method 6 -->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts  -->
<!-- This means that icons are default. Regular characters are a fallback  -->
<!-- Use entity codes in your HTML when UTF-8 support is uncertain -->
<p>I rate this movie
    <span class="icon">&#9733;</span>
    <span class="icon">&#9733;</span>
    <span class="icon">&#9733;</span>
    <span class="icon">&#9733;</span>
    <span class="icon">&#9734;</span>
    !!
</p>

<!-- Method 7-->
<!--- * * * * * * * * * * * * -->
<!-- Set a font-family only for the icons and use a separate HTML tag for each icon -->
<!-- Define your icon fonts in your CSS font-family before your regular fonts  -->
<!-- This means that icons are default. Regular characters are a fallback  -->
<!-- Use the 'content' style rule with a ':before selector' in your CSS -->
<p>I rate this movie
    <span class="icon icon-star"></span>
    <span class="icon icon-star"></span>
    <span class="icon icon-star"></span>
    <span class="icon icon-star"></span>
    <span class="icon icon-star-unfilled"></span>
    !!
</p>

方法 7 を選択する場合は、追加の CSS コードが必要になります。この CSS コードは次のようになります。

.icon-star:before {
    content: "\2605";
}

.icon-star-unfilled:before {
    content: "\2606";
}

Iconic、Font Awesome、Glyphiconsなどのアイコン フォントは通常、すべてメソッド 7 を使用します。これにより、チート シートから特殊文字をコピーして貼り付けたり、HTML エンティティの使用を強制されたりすることを回避できます。

ただし、いくつかの欠点がある方法です。まず、:beforeCSS セレクターのサポートと、UNICODE 文字のエスケープ シーケンスの使用が必要です。IE6-7 も特定のバージョンの Webkitも、このサポートを提供していません。

もう 1 つの欠点は、アイコンごとに個別の HTML タグを使用する必要があることです。各タグは、アイコン フォントの 1 文字に対応しています。方法 7 では、他の方法とは異なり、HTML タグ内に複数のアイコンを表示することはできません。

ただし、他の方法には独自の欠点があります。方法 1、3、および 5 では、チート シートから文字をコピーして貼り付けるか、文字自体をコード内に配置する手段を使用する必要があります。アイコン フォントがその文字の非標準マッピングを使用している場合、コード エディタが文字を表示できないか、アイコン フォントの文字とは異なる文字を表示する可能性があります。

方法 2、4、および 6 では、文字をコピーして貼り付ける必要はありませんが、コードが人間にとって読みにくくなり、コードへの変更により人的エラーが発生しやすくなります。また、使用する各アイコンの HTML エンティティ コードを調べる必要があるため、それらを記憶する必要があります。同じことが方法 7 で使用されるクラスにも明らかに当てはまりますが、これらのクラスは HTML エンティティ コードよりもはるかに覚えやすいものです。

于 2014-12-09T13:29:24.187 に答える