• Welcome to Tux Reports: Where Penguins Fly. We hope you find the topics varied, interesting, and worthy of your time. Please become a member and join in the discussions.

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

K

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
 
P

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
 
You must log in or register to reply here.
Top