Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS font-weight thicker than 900?

I have a panel which can be expanded or minimised through a vertically centred link with a < or > symbol as the link text. At font-weight: 900 this does not stand out much, even with a large grey background around it. I do not want to use an image and, at the current font size, both symbols currently take up the maximum width of the panel.

Is there any way to thicken the line on the symbols beyond 900? Or is there another alternative I could use?

Thanks in advance.

Richard

like image 702
ClarkeyBoy Avatar asked Aug 31 '25 04:08

ClarkeyBoy


2 Answers

In CSS 3 there's another way to make the font size bolder:

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

EDIT:

For some sort of weird reason this doesn't look as pretty as it did over an year ago. It only works with text-shadow of 1px (on most common fonts, other thicker fonts might still work with 2px). And with text-shadow of only 1px, there's no need for such a large letter-spacing.

color:#888888;    
text-shadow: 1px 0 #888888;
letter-spacing:1px;
font-weight:bold;
like image 141
Gogutz Avatar answered Sep 02 '25 18:09

Gogutz


To add to Gogutz answer, you can go even bolder by stacking up the text-shadows in a grid. Comma separate each on the line:

.extra-bold {
  text-shadow: 0px 1px, 1px 0px, 1px 1px;
}
like image 37
Andy Ballard Avatar answered Sep 02 '25 19:09

Andy Ballard