1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Non-deterministic Fonts (@font-face + font-weight)

Discussion in 'Internet Explorer' started by KevinKuchta, Jan 22, 2010.

  1. KevinKuchta

    KevinKuchta Flightless Bird

    Summary/TLDR: Specifying the @font-face as described below should either work
    or fail. Instead, it renders differently (and seemingly randomly) on
    successive reloads. I would like to see this either work or fail gracefully.

    What I'm trying to do:
    Some fonts (for example, Helvetica Neue) have separate fonts for seperate
    weights (ie, Helvetica Neue UltraLight, Light, Normal, Medium, Bold, and
    Black). What you can do (at least in Firefox and Safari using ttf's instead
    of eon's) is define several font faces with the same font-family, but
    different font weights.

    Eg:
    @font-face{
    font-family: "somefont";
    src: url('font1.eot');
    font-weight:100;
    }
    @font-face{
    font-family: "somefont";
    src: url('font2.eot');
    font-weight:400;
    }

    The reasoning for this would be that whenever a chunk of text in font
    'somefont' gets a font-weight assigned to it, it'd automatically switch to
    the appropriate font source.

    What happens:
    IE seems to decide to randomly display the different fonts and weights
    differently on different page reloads. It's very weird. Live test here:
    http://www.kevinkuchta.com/ietest-static/ftest.html
    The code for that site is as follows:
    HTML-
    -------
    <html>
    <head><link rel=stylesheet href="ftest-style.css"></head>
    <div id="idA">This is a test of idA</div>
    <div id="idB">This is a test of idB</div>
    <div id="idC">This is a test of idC</div>
    <div id="idD">This is a test of idD</div>
    </html>
    -------
    CSS (ftest-style.css)-
    -------
    /*Font: Officer down*/
    @font-face {
    font-family: 'inf';
    src: url('font1.eot');
    font-weight:100;
    }
    /*Font: Something cursive*/
    @font-face {
    font-family: 'inf';
    src: url('font2.eot');
    font-weight:400;
    }
    /*Font: Varsity*/
    @font-face {
    font-family: 'inf';
    src: url('font3.eot');
    font-weight:700;
    }
    html{
    font-size:6em;
    font-family:inf;
    }
    #idA{font-weight:100;}
    #idB{font-weight:400;}
    #idC{font-weight:700;}
    -------

    So, while it's a cool party trick to get randomly changing fonts from static
    html/css (at software engineering parties, anyway), it seems to be pretty
    clearly a bug. Am I doing something wrong, or anyone else aware of this,
    and/or has it been previously documented?

    Kevin M Kuchta
    Software Engineering Student
    Rochester Institute of Technology
     
  2. PA Bear [MS MVP]

    PA Bear [MS MVP] Flightless Bird

    Developer-specific resources include:

    MSDN IE Development Forums <=post such questions here instead
    http://social.msdn.microsoft.com/forums/en-US/category/iedevelopment/

    IE Developer Center
    http://msdn.microsoft.com/en-us/ie/default.aspx

    Learn IE8
    http://msdn.microsoft.com/en-us/ie/aa740473.aspx

    HTML and DHTML Overviews and Tutorials
    http://msdn.microsoft.com/en-us/library/ms537623.aspx and

    Cascading Style Sheets (CSS)
    http://msdn2.microsoft.com/en-us/ie/aa740476.aspx

    Expression Web SuperPreview for Internet Explorer (free, stand-alone visual
    debugging tool for IE6, IE7, and IE8)
    http://www.microsoft.com/downloads/...FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677

    Expression Web SuperPreview Release Notes
    http://www.microsoft.com/expression/products/Web_SuperPreviewReleaseNotes.aspx

    Validators:
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/


    KevinKuchta wrote:
    > Summary/TLDR: Specifying the @font-face as described below should either
    > work or fail. Instead, it renders differently (and seemingly randomly) on
    > successive reloads. I would like to see this either work or fail
    > gracefully.
    >
    > What I'm trying to do:
    > Some fonts (for example, Helvetica Neue) have separate fonts for seperate
    > weights (ie, Helvetica Neue UltraLight, Light, Normal, Medium, Bold, and
    > Black). What you can do (at least in Firefox and Safari using ttf's
    > instead
    > of eon's) is define several font faces with the same font-family, but
    > different font weights.
    >
    > Eg:
    > @font-face{
    > font-family: "somefont";
    > src: url('font1.eot');
    > font-weight:100;
    > }
    > @font-face{
    > font-family: "somefont";
    > src: url('font2.eot');
    > font-weight:400;
    > }
    >
    > The reasoning for this would be that whenever a chunk of text in font
    > 'somefont' gets a font-weight assigned to it, it'd automatically switch to
    > the appropriate font source.
    >
    > What happens:
    > IE seems to decide to randomly display the different fonts and weights
    > differently on different page reloads. It's very weird. Live test here:
    > http://www.kevinkuchta.com/ietest-static/ftest.html
    > The code for that site is as follows:
    > HTML-
    > -------
    > <html>
    > <head><link rel=stylesheet href="ftest-style.css"></head>
    > <div id="idA">This is a test of idA</div>
    > <div id="idB">This is a test of idB</div>
    > <div id="idC">This is a test of idC</div>
    > <div id="idD">This is a test of idD</div>
    > </html>
    > -------
    > CSS (ftest-style.css)-
    > -------
    > /*Font: Officer down*/
    > @font-face {
    > font-family: 'inf';
    > src: url('font1.eot');
    > font-weight:100;
    > }
    > /*Font: Something cursive*/
    > @font-face {
    > font-family: 'inf';
    > src: url('font2.eot');
    > font-weight:400;
    > }
    > /*Font: Varsity*/
    > @font-face {
    > font-family: 'inf';
    > src: url('font3.eot');
    > font-weight:700;
    > }
    > html{
    > font-size:6em;
    > font-family:inf;
    > }
    > #idA{font-weight:100;}
    > #idB{font-weight:400;}
    > #idC{font-weight:700;}
    > -------
    >
    > So, while it's a cool party trick to get randomly changing fonts from
    > static
    > html/css (at software engineering parties, anyway), it seems to be pretty
    > clearly a bug. Am I doing something wrong, or anyone else aware of this,
    > and/or has it been previously documented?
    >
    > Kevin M Kuchta
    > Software Engineering Student
    > Rochester Institute of Technology
     

Share This Page