26

リンク テキストとして < または > 記号を含む縦方向の中央のリンクを介して、展開または最小化できるパネルがあります。font-weight: 900 では、大きな灰色の背景があってもあまり目立ちません。画像を使用したくありません。現在のフォント サイズでは、現在両方のシンボルがパネルの最大幅を占めています。

シンボルの線を 900 を超えて太くする方法はありますか? または、私が使用できる別の代替手段はありますか?

前もって感謝します。

リチャード

4

6 に答える 6

50

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;
于 2013-01-28T11:49:19.620 に答える
16

Gogutz の回答に追加するには、テキストの影をグリッドに積み重ねることで、さらに大胆にすることができます。各行をコンマで区切ります。

.extra-bold {
  text-shadow: 0px 1px, 1px 0px, 1px 1px;
}
于 2016-11-19T16:32:23.593 に答える
6

残念ながら、900 よりも太い font-weight はありません。font-weight を数値で指定する方法はブラウザーによって異なります。最善の策は、より太いフォントを使用することです。使用しているものを指定していませんが、Impact は、Web セーフでありながら、幅に対して比較的太くて背が高いです。それ以外の場合は、 @font-face を使用して別のフォントをロードできます。

于 2010-10-16T14:11:42.073 に答える
2

Gogutz の回答に追加します。キーワードを使用currentcolorして、テキストの色を使用し、ハードコーディングを回避できます。

このような:

text-shadow: 0.5px 0 currentColor;
letter-spacing: 0.5px;
于 2020-04-22T19:57:00.833 に答える
0

これはかなり厚いです。ただし、webkit でのみ動作します。

font-size: -webkit-xxx-large;
font-weight: 900; 

ここに画像の説明を入力

于 2014-05-07T14:42:25.413 に答える