开发者

Customizing bold stuff with CSS

开发者 https://www.devze.com 2023-01-24 12:23 出处:网络
I don\'t think my bold text in a webpage are bold enough, so I was wondering if there were any ways I could tweak bold t开发者_如何学运维ext with CSS.with font-weight you can specify the «boldness»

I don't think my bold text in a webpage are bold enough, so I was wondering if there were any ways I could tweak bold t开发者_如何学运维ext with CSS.


with font-weight you can specify the «boldness» of your text with a higher number … but almost every browser does only display the text in the same «boldness» as without a specific number.

Alternatively you can use Bold- or Black-Styles of the Font itself, but most Internet-Users may not have installed this specific fonts.

see examples: http://clagnut.com/blog/2228/


a workaround if the bold font does not really support bold style is to emulate boldness using css3 textshadows.

<span class="bold">some text goes here</span>

span.bold {
    text-shadow: 1px 0px 0px #000; /* the textcolor */
    padding-right: 1px;
    letter-spacing: 1px;
}

Adds 1px to the right and spaces the letters to make it looking nice again. You may also combine many "shadows" by putting them in comma list:

text-shadow: 1px 0px 0px #000, -1px 0px 0px #000, /*...*/ ; 


The font-weight (w3schools.com) property allows you to change the boldness of your text. I'm not sure if all browsers fully support it or not, however.


yes you can tweak it like this

.myClass 
{
    font-weight: 700;
}


you can specify a font-weight of 900, although most browsers render it the same as bold.

You can consider using some fonts such ash Arial Black which is quite bold.

You may want to include other fonts for the platform you intend to support, such as on Linux... on Mac Snow Leopard, for sure there is Arial Black, and on Windows 7, the font in control panel shows only Arial, but it has style such as Black, and using "Arial Black" works:

http://jsfiddle.net/S2SxS/2/


You can render the text as an image in your preferred font and boldness, then set that image as the background-image of the text in CSS, and set the text-indent to a large positive or negative number to move it off page. The image will appear where the text was, while the text is still in the page for screen readers and search engines.

0

精彩评论

暂无评论...
验证码 换一张
取 消