Removing <font> tags via CSS?

[7on]

I'm currently (slowly) transitioning the company I work for's site over to CSS. However, there are still the occasional <font> tag. I was wondering whether there is anything I could do via CSS (or other method) that would cancel font tags? Just until we made sure we've gotten rid of all of them.

 

[Darth.Titan]

As far as I know, an inline font tag will override anything in a css stylesheet. There's no way to "deactivate" a deprecated tag like the font tag.

 

[Sdashiki]

use a find feature of your html program and delete them all?

or, replace with inline CSS?

 

[rhett7660]

What program are you using? I know dreamweaver has a find and replace. I am assuming most applications can do this.

 

[mogzieee]

If you want to get rid of all the <font> tags because they are no longer in use, then just replace it with a <span> attribute as shown below:

<font face="Comic Sans MS" size="12px" color="red">TEXT</font>

IS THE SAME AS....

<span style="font-family:Comic Sans MS; size:12px; color:red;">TEXT</span>

or

<p style="font-family:Comic Sans MS; size:12px; color:red;">TEXT</p>

however the last example with the <p> attribute will actually turn it into a paragraph. The <span> attribute is just a way of saying "this section of text"...


OR, if you are predefining a whole attribute, in the style sheet you can add the CSS style for every time a heading appears, for example:

h1{
font-family: Trebuchet MS;
text-align: center;
color: orange;
}

And what that does is every time you use the <h1></h1> attributes then the heading will appear as Trebuchet MS, text align center, and text color as orange.

 

[angelwatt]

Regular expression find and replace

CSS can't help here really. If you use a text editor that supports regular expression replaces then you can use the following find criteria,

<\/?font[^>]*>

Then just replace with nothing. This will strip out the entire font tag including attributes. Text editors that do regular expression searches consist of TextWrangler, BBEdit, and maybe TextMate and likely others. A very powerful feature when you know what you're up to.

 

[7on]

As far as I know, an inline font tag will override anything in a css stylesheet. There's no way to "deactivate" a deprecated tag like the font tag.

Well booooooooooooooooooooo. Thanks though.

use a find feature of your html program and delete them all?

or, replace with inline CSS?

I want to replace them with CSS. That's what I'm doing. However if you have a <Font size=2> and the CSS says all paragraphs have 10pt font, I've seen the CSS get applied and then the font sizes (same if you use CSS and say something should be 18pt, making text HUGE)

And I would use the find feature, but we have a couple hundred pages here all managed with SourceSafe. Not fun editing everything.

 

[dtyson]

BBEdit will do a find and replace throughout an entire folder containing however many files you have in there. You need to strip out those tags.

I would be preemptive about the find and replace. I wouldn't replace with spans that have inline styles. I'd replace with span classes that you would only have to edit in the stylesheet later, should you wish to change them, rather than having to go through to find all that inline style stuff.

Always work with a sheet. Try to avoid in-line styling - or at least be very sparing with it. At least that's my take on it.

 

[brn2ski00]

Search and Replace. Easy as that.

 

[7on]

Search and Replace. Easy as that.

Sigh, we have two dev severs and two public servers. To edit any .aspx files (Yes we use ASP, though I don't know any, I'm strictly the HTML monkey) I have to check them out, edit them, copy them over to both dev servers, make sure they render correctly, then copy them over to the two public servers. I wish it was a simple find and replace.

I just made every <p> 10pt yesterday, so far I haven't seen any adverse effects. All the important pages render correctly after I changed a couple of pages (got everything under About Us to layout without tables, that was fun).

But I think I'll just tackle <font>s as I come to them, thanks.

 

[Matteh117]

Can you not just use display: none on font tags for a temp solution until you find them all (unless I read it wrong)?

You can "overwrite" inline styles in the stylesheet by using !important..

i {
color: #0000FF !important;
}


<i style="color: #FF0000">Blah</i>

^ Will be coloured #0000FF.


Hope that helps?

 

[a456]

I go with all those that say find and replace. In the long run surely its tidier and strips out unnecessary code.

 

[angelwatt]

Can you not just use display: none on font tags for a temp solution until you find them all (unless I read it wrong)?

That would also make the text inside those font tags disappear, which is likely not the desired effect.

I'm still not convinced you can't use a search and replace with a program that will apply it across a directory of files. I've seen it done with other projects, but I'd likely have to see the setup to understand the situation.

 

[Matteh117]

After re-reading the original post.. The following should do what has been requested..

<style type="text/css">
font {
font-size: 11px !important;
font-color: #000000 !important;
etc: etc;
}
</style>

 

[7on]

After re-reading the original post.. The following should do what has been requested..

<style type="text/css">
font {
font-size: 11px !important;
font-color: #000000 !important;
etc: etc;
}
</style>

Thanks! Works great!