FontAwesome アイコンの 1 つを少し軽くしたいのですが、使用しているフォントよりもずっと重いです。現在の外観は次のとおりです。
:
醜いですよね？だから私は次のようにfont-weightをリセットしようとしました：
.tag .icon-remove {
font-weight: 100;
}
属性は CSS で正しく設定されているように見えますが、効果はありません。アイコンは以前と同じように重く見えます。私も試してみましたが、効果はfont-weight: lighterあり-webkit-text-stroke-width: 1pxませんでした。
アイコンの重さを軽くする方法はありますか? ドキュメントには、「CSS フォント スタイルでできることは何でも、Font Awesome でできる」と書かれていますが、これを行う方法がわかりません。
Webkit ブラウザーは、フォントに「ストローク」を追加する機能をサポートしています。このちょっとしたスタイルにより、フォントが細く見えます (白い背景を想定):
-webkit-text-stroke: 2px white;
コードペンの例: http://codepen.io/mackdoyle/pen/yrgEH 一部の人々は、クロスプラットフォームの「脳卒中」ソリューションに SVG を使用しています: http://codepen.io/CrocoDillon/pen/dGIsK
2018年アップデート
Font Awesome 5 は、ライト、レギュラー、ソリッドのバリアントを備えています。この質問で紹介されているアイコンには、さまざまなバリエーションで次のスタイルがあります。
この質問に対する最新の答えは、アイコンのさまざまなバリエーションを使用して、アイコンをより太くまたはより明るく見せることができるというものです。唯一の欠点は、すでにソリッドを使用している場合は、ここで元の回答に戻ってそれらをより大胆にする必要があることです.
Font Awesome のHow To Useドキュメントでは、これらのバリアントの使用方法について説明しています。
元の回答
Font Awesome はUnicode の Private Use 領域を利用します。たとえば、使用しているこれは、疑似セレクター.icon-removeを使用して追加され、その内容を \f00d ( )に設定します。::before
.icon-remove:before {
content: "\f00d";
}
Font Awesome には font-weight バリアントが 1 つしか付属していませんが、ブラウザーはこれをレンダリングします。よく見ると、normalfont-weight は font-weight ほど太字ではありませんbold。残念ながら、通常のフォントの太さはあなたが求めているものではありません.
ただし、できることは、色をより暗いものに変更し、フォントサイズを小さくして少し目立たなくすることです. あなたの画像から、「タグ」のテキストはアイコンよりもはるかに明るく見えるので、次のようなものを使用することをお勧めします:
.tag .icon-remove {
color:#888;
font-size:14px;
}
著者は、フォント ライブラリに対してフリーミアム アプローチを採用したようであり、Font-Awesome ライブラリにさまざまな重みを与えるためにBlack Tieを提供しています。
アプローチに似ているがより移植性の高い、より明るいfontawesomeアイコンを作成するために私が使用した別の解決策webkit-text-strokeは、アイコンの色を背景と同じ（または透明）に設定し、テキストシャドウを使用してアウトラインを作成することです。
.fa-outline-dark-gray {
color: #fff;
text-shadow: -1px -1px 0 #999,
1px -1px 0 #999,
-1px 1px 0 #999,
1px 1px 0 #999;
}
つまり、<10 では機能しませんが、少なくとも Webkit ブラウザーに限定されません。