Removing <font> tags via CSS?

Discussion in 'Web Design and Development' started by 7on, Jun 5, 2008.

  1. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #1
    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.
     
  2. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #2
    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.
     
  3. Sdashiki macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #3
    use a find feature of your html program and delete them all?

    or, replace with inline CSS?
     
  4. rhett7660 macrumors G4

    rhett7660

    Joined:
    Jan 9, 2008
    Location:
    Sunny, Southern California
    #4
    What program are you using? I know dreamweaver has a find and replace. I am assuming most applications can do this.
     
  5. mogzieee macrumors 6502a

    Joined:
    Feb 8, 2008
    Location:
    London, UK
    #5
    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:

    Code:
    <font face="Comic Sans MS" size="12px" color="red">TEXT</font>
    IS THE SAME AS....

    Code:
    <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:

    Code:
    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.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    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,
    Code:
    <\/?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.
     
  7. 7on thread starter macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #7
    Well booooooooooooooooooooo. Thanks though.

    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.
     
  8. dtyson macrumors member

    Joined:
    Jan 20, 2008
    #8
    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.
     
  9. brn2ski00 macrumors 68020

    brn2ski00

    Joined:
    Aug 16, 2007
  10. 7on thread starter macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #10
    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.
     
  11. Matteh117 macrumors regular

    Joined:
    May 24, 2007
    Location:
    Surrey, UK
    #11
    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..

    Code:
    i {
    color: #0000FF !important;
    }
    
    
    <i style="color: #FF0000">Blah</i>
    
    ^ Will be coloured #0000FF.


    Hope that helps?
     
  12. a456 macrumors 6502a

    a456

    Joined:
    Oct 5, 2005
    #12
    I go with all those that say find and replace. In the long run surely its tidier and strips out unnecessary code.
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    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.
     
  14. Matteh117 macrumors regular

    Joined:
    May 24, 2007
    Location:
    Surrey, UK
    #14
    After re-reading the original post.. The following should do what has been requested..

    Code:
    <style type="text/css">
    font {
    font-size: 11px !important;
    font-color: #000000 !important;
    etc: etc;
    }
    </style>
    
     
  15. 7on thread starter macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #15
    Thanks! Works great! :)
     

Share This Page