Re: Detecting IE "Ignore font styles" mode

Hi Terrill,

The Filament Group has written a library that seems to accurately test
if a font loads or not, and it does not do it by querying the CSS
properties.

Blog post: http://filamentgroup.com/lab/bulletproof_icon_fonts.html
Code: https://github.com/filamentgroup/a-font-garde

It seems to do the check by checking the dimensions of a test string
written to the screen and then verifying that it is roughly the
correct size for the expected font. It keeps checking for the
existence of that string in the correct size until a certain timeout
is reached. If the timeout is reached it says the font failed to load
and then does the fallback.

If the font is not loaded, then you can fall back to text or a
standard Unicode glyph.

Greg

--
Greg Kraus
University IT Accessibility Coordinator
NC State University
919.513.4087
gdkraus@ncsu.edu
http://go.ncsu.edu/itaccess

On Tue, May 27, 2014 at 4:42 PM, Terrill Thompson <tft@uw.edu> wrote:
> Hi All,
>
> I've been exploring the feasibility of using icon fonts for a media player.
> I created a set of fonts at icomoon.io and I'm using JavaScript to check for
> two settings:
>
> a) background-color of the icon container div
> If the background color is light, I deliver black icons, and if the
> background color is dark, I deliver white icons. This works well, and seems
> to be reliable even within  Windows contrast mode.
>
> b) font-family of the <span> that contains the icon font. By default,
> font-family is set to "icomoon". However, if the user has defined a custom
> style sheet that overrides font-family, the icons wouldn't be displayed so
> I'll want to display an image instead.
> In Internet Explorer, if the user has enabled a custom style sheet, this
> technique works fine. However, if they select the checkbox to "Ignore font
> styles specified on webpages", that doesn't change the computed font-family
> (it still shows up as  "icomoon"). I'm also seeing "icomoon" as the computed
> value for font-family if I explore the span#play element using F12 Developer
> Tools in IE.
>
> Here's my test page:
> http://terrillthompson.com/tests/icomoon
>
> And here's a general idea of the JavaScript code I'm using to check
> font-family of span#play, which by default has font-family:"icomoon":
>
> var iconFont = "";
> var playSpan = document.getElementById('play');
> if (window.getComputedStyle) { // supported by most browsers
>   iconFont = document.defaultView.getComputedStyle(playSpan,
> null).getPropertyValue('font-family');
>   iconFont = iconFont.replace(/["']/g, ''); // strip out single or double
> quotes
> }
> if (iconFont !== 'icomoon') {
>   // display images instead of icon fonts
> }
>
> Since the above method fails, is there any way to detect whether IE users
> have that checkbox checked?
>
> Thanks,
> Terrill
>
> ---
> Terrill Thompson
> Technology Accessibility Specialist
> DO-IT, Accessible Technology Services
> UW Information Technology
> University of Washington
> tft@uw.edu

Received on Thursday, 29 May 2014 15:22:39 UTC