リンク テキストとして < または > 記号を含む縦方向の中央のリンクを介して、展開または最小化できるパネルがあります。font-weight: 900 では、大きな灰色の背景があってもあまり目立ちません。画像を使用したくありません。現在のフォント サイズでは、現在両方のシンボルがパネルの最大幅を占めています。
シンボルの線を 900 を超えて太くする方法はありますか? または、私が使用できる別の代替手段はありますか?
前もって感謝します。
リチャード
CSS 3 には、フォント サイズを太くする別の方法があります。
color:#888888;
text-shadow: 2px 0 #888888;
letter-spacing:2px;
font-weight:bold;
編集:
なんらかの奇妙な理由で、これは 1 年以上前ほど美しくはありません。1px の text-shadow でのみ機能します (ほとんどの一般的なフォントでは、他の太いフォントは 2px でも機能する場合があります)。また、text-shadow が 1px しかないため、そのような大きな文字間隔は必要ありません。
color:#888888;
text-shadow: 1px 0 #888888;
letter-spacing:1px;
font-weight:bold;
Gogutz の回答に追加するには、テキストの影をグリッドに積み重ねることで、さらに大胆にすることができます。各行をコンマで区切ります。
.extra-bold {
text-shadow: 0px 1px, 1px 0px, 1px 1px;
}
残念ながら、900 よりも太い font-weight はありません。font-weight を数値で指定する方法はブラウザーによって異なります。最善の策は、より太いフォントを使用することです。使用しているものを指定していませんが、Impact は、Web セーフでありながら、幅に対して比較的太くて背が高いです。それ以外の場合は、 @font-face を使用して別のフォントをロードできます。
Gogutz の回答に追加します。キーワードを使用currentcolor
して、テキストの色を使用し、ハードコーディングを回避できます。
このような:
text-shadow: 0.5px 0 currentColor;
letter-spacing: 0.5px;
これはかなり厚いです。ただし、webkit でのみ動作します。
font-size: -webkit-xxx-large;
font-weight: 900;