SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Location
    Wichita, KS
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    For IE: Font embed, or image replacement?

    I'm currently working on a website where it has recently become painfully clear to me that a large majority of the target audience will be using IE, and probably older versions of it at that.

    At the current time, I have three different fonts embedded in the CSS, both in TTF and EOT formats (for IE), but older version are still giving me issues, as well as some other to-be-expected problems as well.

    As much as I don't like using text-indent with background images for image replacement on text, it seems that may be the best way for me to go at this point.

    Does anybody have any suggestions? Would text-indent and background images be a horrible idea? I'm not entirely sure how frowned-upon the practice is.

    Any insight is greatly appreciated.

    ( on a side note, I'm glad I've discovered the SitePoint forums! they seem to have a multitude of information available, and I'm also looking forward to contributing my own knowledge in return. )

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,731
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    The draw back to relying on IR and @font simultaneously is that IR assumes you have an explicit dimension ( the dimension of the image) while @font is essentially fluid. If youa re OK with giving the container element FIXED dimensions, this might work for you:

    <h3>I am text to be replaced.<span></span><h3>

    CSS
    h3 { position:relative;
    height:100px ;/*(height of your image)*/
    width:300px; ;/*(width of your image)*/
    overflow:hidden;;/*(keeps text from spilling outside if enlarged)*/}
    h3 span {position: absolute; top:0; left:0 ; height:100&#37;; width:100%; background:url (h3imagereplage.jpg); z-index:5}

    hope this helps


    Eseentially this is what happens:

  3. #3
    SitePoint Member
    Join Date
    Jun 2010
    Location
    Wichita, KS
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah I see! The IR covers the text that appears behind it. I'm assuming I'll just need to be careful about transparency in my background-image?

    Thanks for the help, I'll give this a shot and let you know how it works.

  4. #4
    SitePoint Member
    Join Date
    Jun 2010
    Location
    Wichita, KS
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was just thinking, if I'm using image replacement, is there a reason to use @font-face embedding as well? It seems one of the primary benefits of using font embedding is that you can update the HTML content of the text to update it instead of having to recreate and image. If I'm using both techniques, I will have to do both anyways.

    Would it be a bad idea to use image replacement throughout? I don't like using the technique, as I always feel there is a better way to accomplish something. But if that is what it will take to get things working the way I need in IE, then I will do it.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I assume you are talking about using image replacement for certain headings etc. You wouldn't want to replace passages of text etc.

    If you have a large number of headings and the details are changing regularly then image replacement would be a pain and I would just use a normal font (especially as you say you want to target older browsers) or perhaps try
    sifr or cufon.

    The font squirrel site has a font-face generator to help with embedding fonts to cater for various browsers.

  6. #6
    SitePoint Member
    Join Date
    Jun 2010
    Location
    Wichita, KS
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it's basically just for headers on the website, and there will be quite a few. I'm going to try cufon out, as I have a bit of a grudge with Flash. Thanks a ton! I'll let you know how it works.


    Update: Very awesome! Cufon seems to have saved the day. I've done a little IE testing and it seems to work great, and without Flash! Thanks for the recommendations, it's much appreciated.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •