Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Styling

sorccu edited this page · 34 revisions

Cufón supports most text-related CSS properties out-of-the-box, making Cufón-specific CSS rules completely unnecessary in most cases. However, extra care is sometimes needed with the following properties:

font-size

Due to differences in the way browsers return computed CSS values, the size of the replaced text may vary by one pixel. This is usually very hard to even notice, but in case you need absolute control you may specify a pixel value instead, either in the CSS file itself or as a configuration setting during replacement. Predefined keywords such as “larger” and “xx-small” are not supported in Internet Explorer.

font-style

For reasons unknown to mankind, Internet Explorer, by default, reports the font-style of <em> and <i> as “normal”, not “italic”. This can cause quite a bit of confusion. Your best bet is to have the following in your stylesheet:

em, i {
	font-style: italic;
}

and the issue is no more.

font-weight

Internet Explorer and Opera, by default, use font-weight: bold for <strong> and <b>. Gecko- and WebKit-based browsers use font-weight: bolder. In reality you probably don’t have to care about this at all, but if you’re using many different variations of a font with different font-weights this may be an issue. If so, you might want to add the following to your stylesheet to get more consistent results:

strong, b {
	font-weight: bold;
}

Unfortunately you cannot use bolder, as Internet Explorer will just increase the existing value of bold instead of overriding it.

line-height

If your text spans multiple rows and you want equal line-height in every supported browser, you must use a value other than “normal” (which is the initial value). The same is true even for regular text, but it is easy to think that cufón might be at fault.

Also, should you use a non-strict doctype, line-height may not behave correctly.

overflow

If the element that contains the replaced text (or any of its ancestors) has overflow set to any other value than “visible”, the replaced text may stay in place when the element in question is scrolled, just as if it had position: fixed set. This is an old, known bug in Internet Explorer, often used to achieve a position: fixed -like effect. You can get rid of this issue by setting the element with the overflow to position: relative.

text-shadow

Partially supported. Due to lack of native support in many browsers, this value cannot be read from CSS, and must be specified as an option instead. Offsets defined in units other than pixels are not supported, neither is blur. Examples

word-spacing

Not supported.

:hover

For performance reasons :hover is not enabled by default, which means that you’ll have to enable it separately for elements that need it. You can do this with with:

Cufon.replace('h1', {
	hover: true
});

By default cufón will only apply :hover effects to links. You can change this with:

Cufon.replace('h1', {
	hover: true,
	hoverables: { strong: true, em: true }
});

which would enable :hover for <strong> and <em> as well. Nesting :hover-enabled elements is unrecommended and may lead to unpredictable results.

Something went wrong with that request. Please try again.