开发者

How to create smooth headlines with HTML and CSS?

I saw a lot of web pages recently, that hav开发者_高级运维e very smooth headlines, like this website for example: http://boagworld.com/

How do they go about to do that? Are there any hidden clues?

At one point I heard from a technique where they used Flash (I think) to embed custom fonts onto a website and then replace normal headlines with this flash alternative.

What other ways are there besides flash?


Assuming you don't want to use images as text replacement, there are several techniques, that adapt font enhancement in very unobtrusive way:

  • using flash - SIFR
  • pure css = @font-face and directly embed fonts in ttf or otf
  • javascript enhancement technique, the script is called Cufon

Personally I like to use web safe fonts with combination of less known and do proper fallback


They're just using images as the CSS background for certain things, in this case:

http://boagworld.com/wp-content/themes/BoagworldV2/images/logo.gif

You can do whatever you want with a few images and css, something like:

#header { background: #FFFFFF url(myLogoImg.png) center no-repeat; }


If you don't want to use image replacement or sIFR, but want custom fonts, you should take a look at TypeKit - http://typekit.com/. They let you call custom fonts (that they have licensed to you) directly from your style sheet with font-family, and use javascript embedded on your page to serve the fonts from their servers. I'm using it their service on a project right now and so far it seems to work well. They don't have a huge library of fonts available yet, but it's still bigger than Arial, Verdana, Georgia and Times New Roman.


I would recommend cufón for this. It's non-Flash (JavaScript), really really easy to set up, and degrades gracefully.

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜