如何覆盖全局样式表

Question

In a nutshell, there's a global stylesheet:

a { font-family: Arial; }

I want to use a different font family for a particular link:

<a href="..." style="font-family: Helvetica;">...</a>

or

<span style="font-family: Helvetica;"><a href="...">...</a></span>

but nothing works. Is there an easy way to do this?

PS I'm dynamically (via PHP) assign different fonts to different links, so creating a special class is not an option.

Answer 1

Unless you have a specific font named Helvetica, you should realise that on some platforms (such as Windows, via FontSubstitutes ), Helvetica is aliased to Arial. That might be the source of the problem. Try another font and see.

Answer 2

Your first attempt

  <a href="..." style="font-family: Helvetica;">...</a>

should have worked. Agree that you're probably missing a font. Inline styles have precedence over any other styles beside a user-defined style sheet. Here's the order of priorities for style definitions:

1. User defined style
2. Embedded or inline style sheet
3. Internal style sheet
4. External style sheet
5. Browser default style

Within a style sheet the priorities are as follows:

1. Anything marked !important

2. id

3. .class
4. element

In addition, you have the rule of greater specificity: div a overrides a .

Here's a good article with more detail on the subject .

@Kip's suggestion is your best bet.

Answer 3

What you've written should work, unless the problem is what Chris pointed out,

When you get a pair of fonts for which this works correctly, you might consider that a better way of doing this would be to declare a class for the special links that somehow reminds yourself of why they need a separate font (maybe because you want them to be especially noticed?)

a { font-family: Arial; }
a .noticed { font-family: Helvetica; }

Then in HTML:

<a class="noticed" href="...">...</a>

Changing the font by creating a span tag around the link, or adding inline style to the link just smacks of the old days of <font> tags.

Answer 4

element styles override global styles, so Chris Jester-Young is probably right and you don't actually have a Helvetica font; try a different font eg Courier or Times New Roman that you're certain exists