web-dev-qa-db-ja.com

CSSフォント-900より太い?

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

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

前もって感謝します。

リチャード

18
ClarkeyBoy

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

5
Chris Cox

CSS 3では、フォントサイズを太字にする別の方法があります。

color:#888888;    
text-shadow: 2px 0 #888888;
letter-spacing:2px;
font-weight:bold;

編集:

ある種の奇妙な理由で、これは1年以上前ほどきれいに見えません。 1pxのテキストシャドウでのみ機能します(最も一般的なフォントでは、他の太いフォントでも2pxで機能する可能性があります)。また、テキストの影が1pxしかないため、このような大きな文字間隔は必要ありません。

color:#888888;    
text-shadow: 1px 0 #888888;
letter-spacing:1px;
font-weight:bold;
36
Gogutz

Gogutzの回答に追加するには、テキストの影をグリッドに積み上げることで、さらに大胆にすることができます。カンマは行上でそれぞれを分離します:

.extra-bold {
  text-shadow: 0px 1px, 1px 0px, 1px 1px;
}
9
Andy Ballard

Font-weightの代わりにtext-shadowを使用できます

text-shadow: 0px 1px, 1px 0px, 1px 0px;
6
Smita Kagwade

これはかなり厚いです。ただし、Webkitでのみ機能します。

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

enter image description here

0
Durin